javascript - 提供满足 esm、commonjs 和 bundlers 的 module、main 和 browser 字段

Question

我有许多已发布的 npm 包，我已经升级它们以提供 commonjs 和 esm 构建。一些包可能同时适用于 Node 和浏览器。所有使用 webpack 或 rollup 编译的包。所有这些都是用 typescript 编写的，并转译到 dist 目录中。

我创建了一个如下所示的 commonjs index.js 文件:

 'use strict'
  
  if (process.env.NODE_ENV === 'production') {
    module.exports = require('./react-abortable-fetch.cjs.production.min.js')
  } else {
    module.exports = require('./react-abortable-fetch.cjs.development.js')
  }

我将 package.json main 字段设置为上面的 index.js 文件。

我还为每个包生成一个 .esm.js 文件，并将 browser 和 module 字段设置为 esm .js 文件并将 type 文件设置为 module。

最终结果是这样的:

  "type": "module",
  "main": "dist/index.js",
  "browser": "dist/react-abortable-fetch.esm.js",
  "module": "dist/react-abortable-fetch.esm.js",
  "types": "dist/index.d.ts",

这种方法的问题是只有 esm 包可以使用它(除非我错了)。

配置 package.json 文件的最佳方式是什么，以便尚未实现飞跃的包(而且相当多)仍然可以使用该包？

Answer 1

想法是利用 Node.js conditional exports根据导入模块的方式自定义导入行为(require 或 import)。

为了让 CommonJS 和 ESM 有两个不同的接口(interface)，您可以:

• 同时转换为 CommonJS 和 ESM(允许在同一应用程序中意外地为您的库使用 import 和 require，这可能会导致不需要的和不可预测的行为)
• 将实现作为 ESM 和 CommonJS 包装器(不可能，因为当 ECMAScript 模块具有顶级 await 时，您不能require)
• 将实现作为 CommonJS 和 ESM 包装器(最佳实际解决方案)

因此您必须将 CommonJS 设置为 TypeScript 转译目标，然后创建一个 ESM 包装器(最好在专用文件夹中)。最后，将 CommonJS 和 ESM 入口点映射到 package.json 中的相应文件:

"exports": {
  "require": "./index.js",
  "import": "./esm/index.js"
}

我在这里发布了一个最小的工作项目:https://github.com/Guerric-P/demo-commonjs-esm

为了使用 TypeScript 中的库，除了每个 JavaScript 文件之外，您还需要一个 .d.ts 文件。