为什么 Angular 构建创建带有"es5"和"es2015"而不是"es6"(或根本没有后缀)的文件?



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

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

然后使用 cat 命令,我们正在连接运行时.js, 来自 dist/angular 应用程序的polyfills.js、scripts.jsmain.js文件 文件夹到预览文件夹中的 AngularApp.js 文件中。

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

  • 主-ES5.js
  • 主ES2015.js
  • 填充物-ES5.js
  • Polyfills-ES2015.js
  • 运行时-ES5.js
  • 运行时-ES2015.js

我搜索了每个带有术语 es5 和 es2015 的文件并将其更改为 es6,但它仍然生成相同的 es5 和es2015文件名。我在这里做错了什么?

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版本。

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

一些历史:

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

它们是一回事。

第 6 版 - ECMAScript 2015

  • 第 6ECMAScript ->ES6
  • Script 2015 ->ES2015

同一事物的不同名称。Angular只是选择将其命名为es2015。

相关内容

  • 没有找到相关文章

最新更新