6

我创建了一个示例 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

该应用程序本身编译得很好，但在浏览器中，它无法解决其余/何时模块的依赖关系。

我已经添加了

 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 中每个模块的每个文件以使其工作吗？

4

1 回答 1

2

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

  • 外部 javascript 库的 .d.ts 文件主要是设计时文件。
  • 打字稿模块可以映射到您自己的网址
  • 将您自己的打字稿应用程序定义为包。
  • 不，您不必继续将文件添加到 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'
    }
});
于 2016-03-18T14:06:33.140 回答