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 库的形状。它们主要在设计时帮助您（代码完成、类型检查等）。你不需要在你的打字稿中导入它们。通过使用 tsconfig.json 文件中的排除选项，可以将它们从打字稿编译过程中排除。您不需要在 System.config 中包含外部 javascript 库，只需在 index.html 中引用脚本即可。您可以将 System.config 中的 angular2 之类的打字稿模块映射到其他网址，并将您自己的打字稿应用程序声明为包。所以：

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

Bower 组件的 Angular2、SystemJS 路径

Angular2, SystemJS paths for bower components

systemjs

angular