如何以及何时使用“ng build”生成的 lib 文件夹的 esm5 和 esm2015 目录？

Posted 2023-03-07

【中文标题】如何以及何时使用“ng build”生成的 lib 文件夹的 esm5 和 esm2015 目录？

【英文标题】：How and when are the esm5 and esm2015 directories of a "ng build"-generated lib folder used?

【发布时间】：2019-05-21 21:38:56

【问题描述】：

在ng build simple-lib 生成的文件夹中，我看到一个比我的其他节点模块更复杂的结构。我看到的不是导出和导入其他成员的 index.js，而是 bundles、esm2015、esm5 和 public_api.d.ts。

我在 esm5 和 esm2015 文件夹中都看到了 simple-lib 的编译版本。我想知道如何使用 esm .js 文件以及何时使用 esm2015 而不是 esm5。据我了解，esm2015 允许更小的捆绑包和摇树，但我不确定何时选择使用哪个模块。我希望生成一个可以在节点项目中使用的库，如果有任何帮助来理解是否以及如何实现这一点，我将不胜感激。谢谢。

$ tree simple-lib/
simple-lib/
├── bundles
│   ├── simple-lib.umd.js
│   ├── simple-lib.umd.js.map
│   ├── simple-lib.umd.min.js
│   └── simple-lib.umd.min.js.map
├── esm2015
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── esm5
│   ├── lib
│   │   ├── simple-lib.component.js
│   │   ├── simple-lib.module.js
│   │   └── simple-lib.service.js
│   ├── public_api.js
│   └── simple-lib.js
├── fesm2015
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── fesm5
│   ├── simple-lib.js
│   └── simple-lib.js.map
├── lib
│   ├── simple-lib.component.d.ts
│   ├── simple-lib.module.d.ts
│   └── simple-lib.service.d.ts
├── package.json
├── public_api.d.ts
├── simple-lib.d.ts
└── simple-lib.metadata.json

【参考方案1】：

在更新我的角度版本时，我想我可能已经找到了答案。将使用的库取决于请求应用程序的浏览器 - esm5 构建将用于需要更多 polyfill 的旧浏览器，而 esm2015 库将用于需要更少 polyfill 的新浏览器 em>

“CLI 的构建命令现在会自动创建一个现代 ES2015 构建，其中包含最少的 polyfills 和一个兼容旧浏览器的 ES5 构建，并根据浏览器加载适当的文件。您可以通过设置目标来选择退出此更改到 tsconfig.json 中的 es5。在 angular.io 上了解更多信息。”

来自https://update.angular.io/#7.1:9.0

【参考方案2】：

根据“Angular 包格式”规范 -

在当今的 javascript 环境中，开发人员将在 许多不同的方式。例如，有些可能使用 SystemJS，有些可能 使用 Webpack。尽管如此，其他人可能会在 Node 中或可能在 浏览器作为 UMD 包或通过全局变量访问。

从此链接了解更多信息 - https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview