TypeScript NPM 包的目标架构

Posted 2023-03-13

【中文标题】TypeScript NPM 包的目标架构

【英文标题】：Target architecture for TypeScript NPM packages

【发布时间】：2018-08-11 06:31:02

【问题描述】：

我正在使用 TypeScript 开发许多 NPM 包，我想知道支持不同目标架构的最佳方式。

如果您编译为 ES3，您将获得最广泛的支持，但还有额外的兼容性样板（大小，部分无法解析）。如果您以 esnext 为目标，则基本上没有样板文件（干净的输出代码！），但支持非常有限。

问题在于 TypeScript 编译器通常不会转换 JS 代码或来自node_modules 的任何代码。因此，如果你例如将库编译到 ES6 并且有人想在他们的浏览器应用程序中使用它（针对 ES3 或 ES5），那么他们将无法只使用该库。

这里的最佳做法是什么？我应该如何配置我的package.json 和tsconfig.json？如果图书馆用户需要做某事，这里首选的方式是什么？

非常感谢！

【问题讨论】：

如果是 TS 发出 JS，为什么这很重要？ “我应该用什么级别的 ES 兼容来编写我的 JS？”是一个与编译器无关的问题。

【参考方案1】：

我认为可以妥协。对我来说，在库中使用 es6 的主要原因 - 支持 rollup 的 tree-shaking。为此，package.json 有选项 module:

"main": "dist/alina-core.js",
"module": "dist/alina-core-es.js",

当用户使用 rollup 时，无论如何都需要经过 tree-shaking 后转译为 ES5，所以，module 指定了 ES6 版本。但是如果库用户使用旧的构建管道，他将得到main 转译的 ES5 版本。

【讨论】：

请注意，在旧版本的 webpack 中，module 字段可能会导致问题。如果您的依赖项有module 字段并且您想要获取 es5，它会获取 es6 版本。我没有检查最新版本。希望它是固定的。