Bower 组件的 Angular2、SystemJS 路径

Question

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

/// <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

应用程序本身可以正常编译，但在浏览器中，它无法解析 rest/when 模块依赖关系。

我已经添加了

 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 已弃用，请使用 typings安装声明文件 (.d.ts)。声明文件，如果安装正确，可以在您的 typings 目录中找到。声明文件描述了外部 JavaScript 库的形状。它们主要在设计时帮助您(代码完成、类型检查等)。你不需要在你的 typescript 中导入它们。通过使用 tsconfig.json 文件中的 exclude 选项，可以将它们排除在 typescript 编译过程之外。您不需要在 System.config 中包含外部 javascript 库，只需在 index.html 中引用脚本即可。您可以将 System.config 中的 angular2 之类的 typescript 模块映射到其他网址，并将您自己的 typescript 应用程序声明为包。 所以:

• 外部 javascript 库的 .d.ts 文件主要是设计时文件。
• typescript 模块可以映射到您自己的 url
• 将您自己的 typescript 应用程序定义为包。
• 不，您不必继续向 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"
  ]
}

在 wwwroot/cool/app 中带有应用程序的 System.config 示例:

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

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