Question

这是我的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来加载这些依赖关系，但事实并非如此。

Answer 1

Typescript只是一种语言编译器，而不是模块捆绑器。您希望使用webpack，browserify或汇总来完成该任务。

澄清webpack的常用工作流程

TS＆gt; es6＆gt; babel＆gt; webpack＆gt;束

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

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

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

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

Answer 2

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

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

Danielo确实TypeScript不是模块捆绑器。但是，基于我对TypeScript的理解，他们正在努力支持该领域的所有需求，包括目前可能不太支持的模块捆绑器。

Typescript不捆绑angular2和rxjs

2 个答案: