为什么 Angular 构建创建的文件带有“es5”和“es2015”而不是“es6”（或根本没有后缀）？

Question

我最近下载了Angular CLI(@angular/cli 9.0.1)。然后我继续创建一个新应用程序，以便我可以创建一个新的 Angular 元素，将其打包，然后在另一个应用程序中使用它。

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

然后使用cat命令，我们串接runtime.js， polyfills.js，scripts.js中，并main.js从位于dist /角app文件夹的文件到预览文件夹内的文件angularapp.js。

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 文件捆绑到单个文件中。

您可以添加一个构建步骤来将文件连接在一起。

concat-build.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": "./concat-builds.js",
   "build": "ng build --prod --output-hashing=none && npm run concat"
}

不要对 ES5 和 ES2015 构建感到困惑，因为 Angular 团队根据模块的加载方式（不是专门针对 JavaScript 版本）拆分包。

支持模块的浏览器会加载 ES2015 版本而不是 ES5 版本，但都建议在 Html 中。

如果您只想使用单个文件，那么您将被迫使用较旧的 ES5 版本，并应按如下方式提供：

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

建议提供如下两个文件，浏览器会加载相应的版本：

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

请注意：

较旧的浏览器将忽略该type="module"版本，而较新的浏览器将跳过该nomodule版本。

Answer 2

ES2015 与 ES6 相同。ECMAScript 6 于 2015 年发布。

一些历史：

https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c