打字稿没有捆绑 angular2 和 rxjs答案

【问题标题】：Typescript is not bundling angular2 and rxjs打字稿没有捆绑 angular2 和 rxjs
【发布时间】：2017-02-08 09:21:11
【问题描述】：

这是我的tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outFile": "./js/app.js",
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types" : [ "node", "core-js" ]
  },
  "include": [
    "./ts/**/*.ts"
  ],
  "exclude": [
    "**/*.spec.ts"
  ]
}

这是我的system.config.js（基本上什么都没有）

System.import('main');

我正在做的是，我想将所有内容捆绑到一个 JS 文件中，以便我可以将其用于生产。 TypeScript 为我完成了大部分步骤。它将我所有的脚本捆绑到一个app.js 文件中。

但是，我得到了

http://localhost/@angular/platform-browser-dynamic 404 (Not Found)

在我的浏览器控制台上。

在深入了解app.js 之后，我发现所有@angular 和Rxjs 代码都不在捆绑文件中。因此 SystemJs 不知道如何查找它们并以默认方式请求脚本文件。

我的理解是，在tsconfig.json 中，"moduleResolution": "node", 行已经告诉 TypeScript 通过“节点方式”加载 @angular 和 Rxjs，这应该意味着转到 node_module 来加载这些依赖项，但事实并非如此。

【问题讨论】：

标签： angular typescript node-modules

【解决方案1】：

Typescript 只是一个语言编译器，而不是一个模块捆绑器。您想为该任务使用 webpack 、 browserify 或 rollup 。

为了阐明 webpack 的常用工作流程

TS > es6 > babel > webpack > 捆绑

我不知道 systemjs 是如何工作的，但是如果您需要捆绑额外的东西，您不想使用 typescript 的捆绑功能。您将不得不依赖另一个模块捆绑器来完成该任务，并让 typescript 做它最擅长的事情：编译 typescript 代码。

一个 webpack 规则示例如下。请注意，webpack 以相反的顺序应用正在使用的 loader，因此首先执行 ts-loader

module: {
        rules: [
            {
                test: /\.tsx?$/,

                use: [{loader:'babel-loader', options: { presets: ['es2015'], plugins: ['add-module-exports'] }},'ts-loader'],
                exclude: /node_modules/,
            },
        ]
    }

【讨论】：

如果这是真的，我们应该如何使用 TypeScript 和 SystemJs？这意味着，TypeScript "module": "system" 输出的文件不能在生产环境中独立使用。它需要一些其他方式将包从node_modules 捆绑成 SystemJs 格式。如果我的陈述属实，那么该任务的常用工具是什么？
还有一个问题，如果TypeScript和SystemJs分开做bundle，SystemJs怎么知道需要捆绑哪些包？假设我在 node_modules 中安装了 lodash，但我的所有 TypeScript 都没有使用它。 SystemJs 捆绑包也会包含它吗？

【解决方案2】：

最后我没有直接解决这个问题。我注意到使用Angular CLI 可以更好地处理Angular2，这是一种构建Angular2 项目的官方方式。而且我不再使用 SystemJS。

使用 SystemJS 的小问题是 Webpack 不支持。这意味着它不能在 Angular CLI 中使用。

Danielo 确实认为 TypeScript 不是模块捆绑器。但是，根据我对 TypeScript 的理解，它们正在支持该领域的所有需求，包括成为目前可能不太支持的模块捆绑器。

【讨论】：