如何获取一个文件作为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.js main.bundle.js polyfills.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屋！