同时支持 ESM, CJS, Browser 的 Package 的创建指南

在现代 JavaScript 开发中，模块系统是必不可少的。它允许您将代码组织成更小、更易于管理的块，并以模块化的方式重用它们。有两种主要的模块系统：CommonJS (CJS) 和 ECMAScript 模块 (ESM)。

CJS 是 Node.js 使用的模块系统，而 ESM 是浏览器使用的模块系统。然而，在过去几年里，ESM 已经开始在 Node.js 中变得越来越流行，而 CJS 也开始在浏览器中变得越来越流行。

这使得创建同时支持 ESM 和 CJS 的软件包变得更加重要。这样，您的软件包就可以在 Node.js 和浏览器中使用。

第一步：创建新项目

首先，我们需要创建一个新的项目。您可以使用以下命令：

npm init -y

这将创建一个新的 package.json 文件，其中包含有关您的软件包的一些基本信息。

第二步：安装必要的依赖项

接下来，我们需要安装一些必要的依赖项。这些依赖项将帮助我们构建和打包我们的软件包。

npm install --save-dev rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-typescript

• rollup：用于构建我们的软件包。
• @rollup/plugin-commonjs：将 CJS 模块转换为 ESM 模块。
• @rollup/plugin-node-resolve：允许 Rollup 解析 Node.js 模块。
• @rollup/plugin-typescript：允许 Rollup 编译 TypeScript 代码。

第三步：编写代码

现在，我们可以编写我们的代码了。我们将创建一个简单的函数，它将两个数字相加并返回结果。

// src/index.ts
function add(a: number, b: number): number {
  return a + b;
}

export default add;

我们将代码放在 src/index.ts 文件中。

第四步：配置 Rollup

接下来，我们需要配置 Rollup。我们将创建一个 rollup.config.js 文件，其中包含 Rollup 的配置。

// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',
    },
    {
      file: 'dist/index.umd.js',
      format: 'umd',
      name: 'my-package',
    },
  ],
  plugins: [
    typescript(),
    commonjs(),
    nodeResolve(),
  ],
};

在这个配置文件中，我们指定了我们的输入文件（src/index.ts）、输出文件（dist/index.cjs.js、dist/index.esm.js 和 dist/index.umd.js）以及要使用的插件（typescript()、commonjs() 和 nodeResolve()）。

第五步：构建项目

现在，我们可以构建我们的项目了。我们可以使用以下命令：

rollup -c

这将使用我们指定的配置构建项目。

第六步：测试项目

最后，我们可以测试我们的项目了。我们可以使用以下命令在 Node.js 中测试项目：

node dist/index.cjs.js

我们也可以使用以下命令在浏览器中测试项目：

<script src="dist/index.umd.js"></script>
<script>
  console.log(myPackage.add(1, 2));
</script>

如果一切顺利，您应该会看到以下输出：

3

结论

这就是如何创建一个同时支持 ESM、CJS、浏览器，并且支持 tree-shaking 和 TypeScript 的软件包。希望本指南对您有所帮助。