从SystemJS转换到Webpack与Angular 2 2.4

Question

从SystemJS转换到Webpack与Angular 2 2.4

3

我使用了SystemJS，就像Angular在他们的文档中一样。现在我想要为开发和生产部署打包东西，所以我开始遵循Angular网站上Webpack教程：https://angular.io/docs/ts/latest/guide/webpack.html#!#common-configuration 我完成了教程，但是我在许多文件中都遇到了以下构建错误：

Build:找不到名称“Set”。 Build:找不到名称“Promise”。 Build:找不到名称“Map”。

有些教程的部分我不确定，我认为它们可能是这个问题和/或其他问题的根源。

我最大的担忧之一是，在最初构建我的应用程序时（在使用Webpack之前），我偏离了文档。为了避免在我的应用程序文件夹中混乱，我将以下代码添加到systemjs.config.js文件中，以便将转译后的JavaScript文件发送到dist文件夹：

map: {
        app: 'Angular2_Apps/Tasks/dist',
        ...
     }

我还在我的tsconfig.json文件的“compilerOptions”中添加了以下代码：

"outDir": "dist",

现在我的转译后的JavaScript文件已经放到我创建的dist文件夹中，为了组织目的，我希望将它们保留在那里。我需要更改Webpack文件来适应这一点吗？

- Bryan

如果你只是想不将编译后的JavaScript捆绑在一起，那么你只需要坚持使用systemJS或切换到rollup，因为Webpack用于捆绑你的代码，它会变得有点重。此外，如果你想使用Webpack，只需使用一个入门包，你可以根据自己的需要进行修改。 https://github.com/AngularClass/angular2-webpack-starter - PaladiN

我想将我的HTML文件捆绑在一起，最终也包括我的CSS文件。有没有使用SystemJS直接完成这个任务的方法？或者Webpack是更好的选择？ - Bryan

我也使用 Webpack 来打包我的所有 html、css 和 js，并且我对它感到满意。我稍后会将它们打包成更小的块，但对于 开发 阶段来说，这对我来说是可以接受的。一开始我使用的是 systemJS，但我无法将 vendor 代码打包成单个文件，所以我转向了 Webpack，但我不确定 systemJS 是否打包了所有的 html 和 css 文件，如果你最终要切换到 webpack 或者更好地打包成小尺寸，你可以切换到 rollup。 - PaladiN

1

@Brett，试试使用 angular-cli。它在幕后使用webpack。 - Timathon

@Timathon Angular CLI稳定性如何？我注意到GitHub页面上说它仍在积极开发中，现在处于Beta版。它是否足够可靠以供使用？ - Bryan

@Brett，我对实际的生产项目了解不多。请到angular-cli的gitter频道获取更多信息。 - Timathon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter Salomonsen · Accepted Answer

Webpack无法帮助您摆脱Angular最重的组件，即JIT编译器。

因此，为了避免将JIT编译器发送到生产环境中，您需要使用Ahead Of Time编译。您可以在这里找到一个食谱：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

这样，您将获得一个小而快速的启动应用程序——因为HTML模板源和Angular编译器不是包的一部分。此外，只有一个文件。

我在这个存储库中使用编译后的AOT-bundle提供了一个具有Material Design的Angular2应用程序的完整示例：

https://github.com/fintechneo/angular2-templates

在未来，ng cli 应该能够为您生成 AOT 包，但目前 ng build --prod --aot 功能仍处于试验阶段，并且创建的包比直接遵循 AOT 手册创建的包要大。此外，使用 ng cli 生成的包似乎比使用 AOT 手册示例生成的包具有更长的加载/启动时间。