如何获取一个文件作为angular cli的输出 [英] How to get one file as output of angular cli

问题描述

我正在开发 ng2 应用程序，我使用 @angular/cli 来构建它.作为输出，它发出几个 js 文件，如 .inline.js、.vendor.js 等.

I'm working on ng2 application and I use @angular/cli to build it. As output it emits several js files like .inline.js, .vendor.js etc.

问题是——如何将 angular-cli 设置为只发出一个文件，即捆绑 vendor.js、inline.js 等一个大文件?

The question is -- how to set up angular-cli to emit only one file as a result, i.e. bundle vendor.js, inline.js etc. into one big file?

我知道它可以通过使用额外的打包器来完成，但通过 ng-cli 实现它会很好

I understand that it could be done by using additional bundler but it would be nice to achieve it via ng-cli

PS 我不会在这个应用中使用延迟加载，绝对不会.

PS I don't use lazy loading in this app and definitely won't.

PPS 之后只连接文件不是一种选择，因为:

PPS Just concat files afterwards is not an option because:

• 它不适用于文件名中的哈希，还需要更新 html
• 它引入了一个不必要的额外构建步骤

目前看来，转向纯 webpack 将是最简单和最好的选择

As for now it looks like moving to pure webpack would be the easiest and best option

更新

有可能避免 vendor.js 将 --vendor-chunk 设置为 true但结果我仍然得到几个文件:inline.bundle.jsmain.bundle.jspolyfills.bundle.js

there is possibility to avoid vendor.js setting --vendor-chunk to true but as a result I still get several files: inline.bundle.js main.bundle.js polyfills.bundle.js

推荐答案

Angular CLI 本身不支持这个.

Angular CLI natively doesn't support this.

还有其他解决方案，包括在 Angular CLI 完成其工作后使用其他工具进一步处理，但这会阻碍或删除 Angular 提供的开箱即用的调试功能.

There are other solutions, including further processing with other tooling after Angular CLI finishes doing its thing, but this will hinder or remove the debugging capabilities Angular provides out-of-the-box.

由于 ng eject 命令也被弃用，重新配置 webpack 的选项不再像以前那样有吸引力.但是，这在技术上仍然是可能的.

As the ng eject command is also being deprecated, the option to reconfigure webpack is not as attractive as it used to be. However, that is still technically a possibility.

我找到的最佳解决方案是 ngx-build-plus 插件，可以在 https://github.com/manfredsteyer/ngx-build-plus 或通过 ng add ngx-build-plus Angular-CLI 添加到项目中命令当前.安装后，它会为构建提供额外的配置选项，包括可以添加到 ng build 或 ng serve 的 --single-bundle true 标志代码>命令.

The best solution I have found is the ngx-build-plus plugin, which can be found at https://github.com/manfredsteyer/ngx-build-plus or added to a project via the ng add ngx-build-plus Angular-CLI command currently. Once installed, it provides additional configuration options for building, including the --single-bundle true flag that can be added to an ng build or ng serve command.

使用该标志，创建了一个 main.js 文件和一个 main.js.map 文件，它们已经在 HTML 中被引用，并且它会像这样开箱即用地正确运行，具有完整的源映射和调试.

With that flag, a main.js file and a main.js.map file are created, already referenced in the HTML, and it'll just run like that properly out of the box, with full source mapping and debugging.

这篇关于如何获取一个文件作为angular cli的输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！