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放在＆＃34; typings＆＃34;目录，并已使用

bower install rest

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

我已经设置了我的gulp脚本，将bower_components中的两个目录（＆＃34; rest＆＃34;及其依赖＆＃34;当＆＃34;）复制到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中列出每个软件包的内部文件结构吗？我看到＆＃34;当＆＃34;模块假定在＆＃34; ./ lib＆＃34;中找到自己的依赖项，其中＆＃34; rest＆＃34;有一个完全不同的结构。

所以，我的问题是：

在如何将通过bower（或npm）管理的javascript包导入Angular2的客户端时，我误解了什么？
我是否真的需要列出System.paths中每个模块的每个文件才能使其正常工作？

Answer 1

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

.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'
    }
});

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

1 个答案: