javascript - 为什么 Angular 构建创建的文件包含 'es5' 和 'es2015' 而不是 'es6'(或根本没有后缀)？

Question

我最近下载了Angular CLI (@angular/cli 9.0.1)。然后我开始创建一个新的应用程序，这样我就可以创建一个新的 Angular Element，将它打包，然后在另一个应用程序中使用它。

在关注了几个博客之后，我遇到的每个博客的最后一步都是关于从 dist/文件夹下生成的文件创建单个 JS 文件。例如:https://blog.bitsrc.io/using-angular-elements-why-and-how-part-1-35f7fd4f0457

Then using the cat command, we are concatenating the runtime.js, polyfills.js, scripts.js, and main.js files from the dist/angular-app folder into a angularapp.js file inside the preview folder.

运行 ng build angular-app --prod --output-hashing=none相反，似乎产生了名为:

main-es5.js

main-es2015.js

polyfills-es5.js

polyfills-es2015.js

运行时-es5.js

运行时-es2015.js

我搜索了每个包含 条款的文件es5 和 es2015 并将其更改为 es6 ，但它仍然产生相同的 es5 和 es2015 文件名。我在这里做错了什么？

Answer 1

Angular 不会将 JavaScript 文件捆绑到一个文件中。
您可以添加构建步骤以将文件连接在一起。
连接构建.js :

var concat = require('concat');
const es5 = ['./dist/app/runtime-es5.js','./dist/app/polyfills-es5.js','./dist/app/main-es5.js'];
const es2015= ['./dist/app/runtime-es2015.js','./dist/app/polyfills-es2015.js','./dist/app/main-es2015.js'];
concat(es5, './dist/app/elements-es5.js');
concat(es2015, './dist/app/elements-es2015.js');

包.json :

"scripts": {
   "concat": "node ./concat-builds.js",
   "build": "ng build --prod --output-hashing=none && npm run concat"
}

不要对 ES5 和 ES2015 构建感到困惑，因为 Angular 团队根据模块的加载方式(而不是特定于 JavaScript 版本)拆分包。
支持模块的 Web 浏览器将加载 ES2015 版本而不是 ES5 版本，但是 两个建议在 Html 中。
如果您只想使用单个文件，那么您将被迫使用旧的 ES5 版本，并且应该按如下方式提供:

<script src="elements-es5.js">

建议按以下方式提供这两个文件，浏览器将加载相应的版本:

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

请注意:

Older browsers will ignore the type="module" version, and newer browsers will skip the nomodule version.