為什么 Angular build 創建的文件帶有“es5”和“es2015”而不是“es6”（或者根本沒有后綴）？

Question

我最近下載了Angular CLI (@angular/cli 9.0.1)。 然后我繼續創建一個新的應用程序，以便我可以創建一個新的 Angular 元素，package 它，並在另一個應用程序中使用它。

在關注了幾篇博客之后，我遇到的每篇博客的最后一步都在談論從 dist/ 文件夾下生成的文件創建單個 JS 文件。 例如： https://blog.bitsrc.io/using-angular-elements-why-and-how-part-1-35f7fd4f0457

然后使用 cat 命令，我們將 dist/angular-app 文件夾中的runtime.js 、 polyfills.js 、 scripts.js和main.js文件連接到預覽文件夾內的 angularapp.js 文件中。

運行ng build angular-app --prod --output-hashing=none似乎會生成名為：

• main-es5.js
• main-es2015.js
• polyfills-es5.js
• polyfills-es2015.js
• 運行時-es5.js
• runtime-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');

package.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">

請注意：

較舊的瀏覽器會忽略type="module"版本，較新的瀏覽器會跳過nomodule版本。

Answer 2

ES2015 與 ES6 相同。 ECMAScript 6 於 2015 年發布。

一些歷史：

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

Answer 3

它們是同一回事。

第 6 版 - ECMAScript 2015

• 第6版E CMA S腳本 -> ES6
• E CMA S腳本2015 -> ES2015

同一事物的不同名稱。 Angular 只是選擇將其稱為 es2015。