Question

从angular1（爱好角度为btw）更新后，一直在处理angular2项目一段时间。

现在我想捆绑项目，但不确定什么是最好的捆绑器？此外，我看到一些帖子说他们将捆绑包分成多个文件（如app.bundle.js和vendors.bundle.js），其他人有1个大文件。什么是最好的方法？我总是认为很多文件都比较好，因为浏览器可以同时下载多个文件？您是否需要使用gulp任务来完成所有这些或其他任务？

另外，我如何在angular2应用程序中缩小HTML模板？

Answer 1

您可以使用Webpack或Systemjs-Builder捆绑您的应用。有大量的种子项目，您可以从中获取提示，例如： this和this，您可以在gulp任务中使用this来为您的构建内嵌模板。

Answer 2

现在我想捆绑项目，但不确定什么是最好的捆绑器？

您问题的所有答案都是主观的，但事实上Webpack提供的插件和配置设置可以满足您的需求。

我也看到一些帖子说他们将捆绑包分成多个文件（如app.bundle.js和vendors.bundle.js），其他人则有1个大文件。什么是最好的方法？

分割成多个文件绝对是最常用的方法。它允许您将应用程序代码与依赖项分开，这使得调试不再是一场噩梦。

处理此问题的Webpack配置文件部分可能如下所示：

  // our angular app
  entry: { 'vendor': './src/vendor.ts', 'main': './src/main.ts' },

  // Config for our build files
  output: {
    path: '',
    filename: '[name].bundle.js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
  },

您是否需要使用gulp任务完成所有这些或其他任务？

如果您使用Webpack，则根本不需要Gulp。我建议只使用NPM脚本。不要引用我这个，但我认为Webpack可以为Angular2项目取代Gulp。

另外，如何在angular2应用中缩小HTML模板？

Webpack有一个HTML minify plugin。

您可以像这样使用它：

loaders: [
        {
                test: /\.html$/,
                name: "mandrillTemplates",
                loader: 'raw!html-minify' // raw is another loader
        }
    ]

捆绑和缩小angular2项目，Js和Html

2 个答案: