Angular2,用于凉亭组件的SystemJS路径

Question

我创建了一个示例Angular2应用程序,其中一个模块使用外部库(其余),如下所示:

/// <reference path="../../typings/tsd.d.ts" />
import rest = require('rest');
import jsonpClient = require('rest/client/jsonp');
import mime = require('rest/interceptor/mime');
... 

我用过

tsd install rest

将rest.d.ts放在"typings"目录中,并使用过

bower install rest 

获取运行时版本(这在任何地方都没有解释.我假设我必须做这样的事情？)

我已经设置了我的gulp脚本,将两个目录从bower_components("rest"及其依赖"when")复制到dist/lib中

应用程序本身编译良好,但在浏览器中,它无法解析其余/何时模块依赖.

我已经添加了

 System.config({
      "baseURL": "/",
      "transpiler": "traceur",
      "paths": {
        "components/*": "components/*.js",
        "provider/*": "provider/*.js",
        "services/*": "services/*.js",
        "model/*": "model/*.js",
        "rest": "lib/rest/rest.js",
        "rest/*": "lib/rest/*.js",
        "when": "lib/when/when.js",
        "when/*": "lib/when/*.js",
        "*": "lib/*.js"
      }
    });

到我的index.html文件,我可能继续将文件添加到该列表,但不知何故,这感觉......错了.

当然,我必须在index.html中列出每个包的内部文件结构,这是不对的？我看到"when"模块假定在"./lib"中找到自己的依赖项,其中"rest"具有完全不同的结构.

所以,我的问题是:

• 我怎么误解了如何将通过bower(或npm)管理的javascript包导入到Angular2的客户端？

• 我是否真的需要列出System.paths中每个模块的每个文件才能使其工作？

Answer 1

TSD 已弃用，请使用类型来安装声明文件 (.d.ts)。正确安装后，声明文件可以在您的类型目录中找到。声明文件描述了外部 JavaScript 库的形状。它们主要在设计时为您提供帮助（代码完成、类型检查等）。您不需要将它们导入您的打字稿中。可以使用 tsconfig.json 文件中的排除选项将它们从打字稿编译过程中排除。您不需要在 System.config 中包含外部 javascript 库，只需在 index.html 中创建脚本引用即可。您可以将 System.config 中的 angular2 等 Typescript 模块映射到其他 url，并将您自己的 Typescript 应用程序声明为包。所以：

• 外部 javascript 库的 .d.ts 文件主要是设计时文件。
• typescript 模块可以映射到您自己的 url
• 将您自己的打字稿应用程序定义为包。
• 不，您不必继续向 System.config 添加文件。

tsconfig.json 示例：

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
  },

  "exclude": [
    "node_modules",
    "wwwroot",
    "typings/main",
    "typings/main.d.ts"
  ]
}

示例 System.config 与 wwwroot/cool/app 中的应用程序：

System.config({
    defaultJSExtensions: true,
    packages: {
        'cool/app': {
            format: 'register',
            defaultExtension: 'js'
        },
    },

    map: {
        'rxjs': 'assets/scripts/rxjs',
        'angular2': 'assets/scripts/angular2'
    }
});