如何获取一个文件作为angular cli的输出_Angular_Angular Cli

如何获取一个文件作为angular cli的输出

angular

如何获取一个文件作为angular cli的输出,angular,angular-cli,Angular,Angular Cli,我正在开发ng2应用程序，我使用@angular/cli构建它。作为输出，它会发出几个js文件，如.inline.js，.vendor.js等问题是——如何将angular cli设置为只发送一个文件，即将vendor.js、inline.js等捆绑到一个大文件中我知道这可以通过使用额外的bundler来实现，但最好通过ng cli来实现 PS我不会在这个应用程序中使用延迟加载，也绝对不会 PPS Just concat files After不是一个选项，因为：它不适用于文件名中的哈希

我正在开发ng2应用程序，我使用

@angular/cli

构建它。作为输出，它会发出几个js文件，如

.inline.js

，

.vendor.js

等

问题是——如何将angular cli设置为只发送一个文件，即将

vendor.js

、

inline.js

等捆绑到一个大文件中

我知道这可以通过使用额外的bundler来实现，但最好通过ng cli来实现

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

PPS Just concat files After不是一个选项，因为：

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

就目前而言，转向纯网页包似乎是最简单、最好的选择

更新

有可能避免将

vendor.js

设置为

--vendor chunk

为

true

但结果我还是得到了几个文件：

inline.bundle.js

main.bundle.js

polyfills.bundle.js

我在angular cli中没有看到任何内置到一个bundle中的功能，但是，使用nodejs脚本或使用可用的concat库（如

concat文件）应该相当容易
然后安装concat文件：
在项目中添加与dist文件夹级别相同的concat.js文件
var concat = require('concat-files');
concat([
    './dist/inline.bundle.js',
    './dist/vendor.bundle.js',
    './dist/vendor.bundle.js'
], './dist/app.js', function(err) {
    if (err) throw err
    console.log('done');
});

在scripts
下的package.json
中添加新脚本build
：
"scripts":{
    "build": "ng build && node concat.js"
}

然后运行它npm run build
它将首先运行angular cli build运行concat.js脚本，该脚本将连接生成的bundle
1-使用ng build--prod--output hashing=none
，该脚本将创建没有cash-buster（随机散列）的文件
2-使用cat
将它们捆绑到一个文件中
"build":"ng build --prod --output-hashing=none",
"package":" cat dist/angular-project/{polyfills,runtime,main}.js > ./package.js",
"bundle":"npm run build && npm run package"

然后像这样使用它：
npm run bundle

Angular CLI本机不支持此操作
还有其他解决方案，包括Angular CLI完成其工作后使用其他工具进行进一步处理，但这将阻碍或消除Angular提供的现成调试功能
由于ng eject
命令也被弃用，重新配置网页包的选项不再像以前那样吸引人。然而，从技术上讲，这仍然是一种可能性
我的解决方案：
我找到的最佳解决方案是ngx build plus
插件，该插件可以在项目中找到，也可以通过ng add ngx build plus
命令添加到项目中。安装后，它提供了用于构建的其他配置选项，包括可添加到ng build
或ng serve
命令的--single bundle true
标志
有了这个标志，就创建了一个main.js文件和一个main.js.map文件，它们已经在HTML中被引用了，它就可以像这样开箱即用地正常运行，并进行完整的源代码映射和调试。
我在我的项目中用一个自定义脚本解决了这个问题，该脚本在ng build
之后运行
该脚本执行以下操作：

扫描dist/index.html
文件中的所有
和
标记
将
/
标记引用的所有文件合并到各自的捆绑包中
从index.html文件中删除所有这些元素，并附加一个引用捆绑包的新元素

例如，此index.html文件
<html>
    <head>
        <link rel="stylesheet" src="/dist/styles.css">
        <link rel="stylesheet" src="/dist/foo.css">
        <link rel="stylesheet" src="/dist/bar.css">
    </head>
    <body>
        <script src="/dist/main.js">
        <script src="/dist/inline.js">
        <script src="/dist/scripts.js">
        <script src="/dist/foo.js">
        <script src="/dist/bar.js">
    </body>
</html>



…将变成这样：
<html>
    <head>
        <link rel="stylesheet" src="/dist/bundle.css">
    </head>
    <body>
        <script src="/dist/bundle.js">
    </body>
</html>



使用Angular 8对我来说效果非常好。
在Windows上，您可以使用type
而不是cat
，并遵循@Milad提出的类似方法：
1：扩展package.json中的脚本
"build-prod": "ng build --prod --output-hashing=none",
"package-es5": "cd dist/app-name && type runtime-es5.js polyfills-es5.js main-es5.js > bundle-es5.js",
"package-es2015": "cd dist/app-name && type runtime-es2015.js polyfills-es2015.js main-es2015.js > bundle-es2015.js",
"bundle": "npm run build-prod app-name && npm run package-es5 && npm run package-es2015",

"app-name": {
  "architect": {
    "build": {
      "options": {
        "assets": [
          "projects/app-name/src/index.html",
          ...
        ],

2：运行捆绑过程
npm run bundle

3：手动替换在index.html
中自动添加的脚本
<script src="bundle-es2015.js" type="module"></script>
<script src="bundle-es5.js" nomodule defer></script>

4：将index.html
添加到angular.json

"build-prod": "ng build --prod --output-hashing=none",
"package-es5": "cd dist/app-name && type runtime-es5.js polyfills-es5.js main-es5.js > bundle-es5.js",
"package-es2015": "cd dist/app-name && type runtime-es2015.js polyfills-es2015.js main-es2015.js > bundle-es2015.js",
"bundle": "npm run build-prod app-name && npm run package-es5 && npm run package-es2015",

"app-name": {
  "architect": {
    "build": {
      "options": {
        "assets": [
          "projects/app-name/src/index.html",
          ...
        ],

5：修改angular.json
中的索引项，指向placeholder.html
并将index.html
替换为index.prod.html

"app-name": {
  "architect": {
    "build": {
      "configurations": {
        "production": {
          "index": "projects/app-name/src/placeholder.html",
          "fileReplacements": [
            {
              "replace": "projects/app-name/src/index.html",
              "with": "projects/app-name/src/index.prod.html"
            },
            ...
          ],          

好问题。我通常使用gulp进一步绑定（连接）vendor.js/inline.js。但如果能将所有这些都与angular cli捆绑在一起，那就太好了。但是，如果您使用延迟加载，那么当然您必须将单独绑定的块分开。@VSO和Leo您使用的CLI版本是什么？@Lucho当ng CLI v1是实际版本时，会问这个问题，就像它在最新版本是v6.2.7之后没有太大变化一样。仍然只有--vendor chunk和--common chunk选项可以减少发出的文件量，但仍然会有多个选项file@Leo我问的原因只是缩小了如何解决这一涵盖v1的ng4的问题，而问题是具体的ng2，其中cli以某种方式发展。我也在研究这个问题，但正如您所说，对于这种类型的conf，它并没有改变。不过，我正在研究的解决方案可能不涉及其他cli。这将连接捆绑包，但不会将它们链接到index.html。有没有办法轻松创建从index.html到结果“app.js”的链接文件？您是否可以对您的答案添加更多解释，以便其他人可以从中学习？您还需要将index.html中的引用替换到新的包中。js@KLajdPaja您可以改用类型：type\\dist\\angular project\\main.js\\dist\\angular project\\runtime.js\\dist\\angular project\\polyfills.js>.dist\\package.js
Im当前正在使用它，但包括“-single bundle true”，它现在正在生成2个js文件，main.js和scripts.js（实际上是3个文件，包括poly）