Question

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

问题是 - 如何将angular-cli设置为仅发出一个文件，即将vendor.js，inline.js等捆绑到一个大文件中？

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

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

PPS之后的concat文件不是一个选项，因为：

它不能与文件名中的哈希一起使用，也需要更新html
它引入了一个不必要的额外构建步骤

至于现在看来，移动到纯webpack将是最简单和最好的选择

更新

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

Answer 1

我没有在angular-cli中看到构建成一个bundle的任何功能，但是，使用nodejs脚本或使用其中一个可用的连接库（例如concat-files {{3）应该相当容易。 }}

然后安装concat-files：在项目中添加与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');
});

在package.json下scripts下添加新脚本build：

"scripts":{
    "build": "ng build && node concat.js"
}

然后运行它npm run build它将运行角度cli构建首先运行concat.js脚本，它将连接生成的包

Answer 2

Angular CLI本机不支持此功能。

还有其他解决方案，包括在Angular CLI完成其工作后使用其他工具进行进一步处理，但这将阻碍或消除Angular提供的现成的调试功能。

由于ng eject命令也已被弃用，因此重新配置Webpack的选项不再像以前那样吸引人。但是，从技术上讲，这仍然是可能的。

我的解决方案：

我找到的最好的解决方案是ngx-build-plus插件，可以在https://github.com/manfredsteyer/ngx-build-plus上找到它，或者通过{Angular-CLI命令当前添加到ng add ngx-build-plus）添加到项目中。安装后，它将提供其他用于构建的配置选项，包括可以添加到--single-bundle true或ng build命令的ng serve标志。

使用该标志，将创建一个main.js文件和一个main.js.map文件，这些文件已在HTML中进行了引用，并且可以像开箱即用那样正常运行，并具有完整的源映射和调试功能。

Answer 3

1-使用ng build --prod --output-hashing=none，它创建的文件没有现金破坏程序（随机哈希）。

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

Answer 4

在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",

2：运行捆绑过程

npm run bundle

3：手动替换在index.html中自动添加的脚本

<script src="bundle-es2015.js" type="module"></script>
<script src="bundle-es5.js" nomodule defer></script>

要克服手动步骤，我正在使用以下解决方法：

1：在与placeholder.html相同的文件夹中创建一个空index.html

2：复制index.html文件并将其重命名为index.prod.html

2：用静态index.prod.html和stylesheet修改scripts

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>app-name</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>
</head>
<body>

<app-root></app-root>

<script src="bundle-es2015.js" type="module"></script>
<script src="bundle-es5.js" nomodule defer></script>

</body>
</html>

4：将index.html添加到angular.json的资产数组中

"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"
            },
            ...
          ],

Answer 5

我在项目中使用了自定义脚本，该脚本在ng build之后运行。

脚本执行以下操作：

扫描dist/index.html文件中的所有<link>和<script>标签。
将<link> / <script>标记引用的所有文件组合到各自的捆绑包中。
从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对我来说效果很好。

如何获得一个文件作为角度cli的输出

5 个答案:

我的解决方案：