How can I publish an NPM module with both commonjs and es6 versions?

当您想要同时发布CommonJS和ES6版本的NPM模块时，可以通过以下步骤来完成：

1. 项目结构设置

首先，设置合适的项目结构。一般建议将源码放在一个专门的目录下，例如 src，并将构建后的代码分别放在 lib（CommonJS）和 es（ES6）目录中。

shell
- src
  - index.js
- lib
- es
- package.json

2. 编写ES6源码

在 src 目录中使用ES6语法编写模块。

javascript
// src/index.js
export function add(a, b) {
  return a + b;
}

3. 使用构建工具

选择一个合适的构建工具，比如 Babel，来转译源代码。使用Babel，您可以将ES6代码转译为CommonJS格式，并分别输出到不同的目录。

安装必要的Babel依赖：

bash
npm install --save-dev @babel/core @babel/cli @babel/preset-env

然后添加Babel配置文件 .babelrc：

json
{
  "presets": [
    ["@babel/preset-env", {
      "modules": "auto",
      "targets": {
        "esmodules": true
      }
    }]
  ]
}

配置 package.json 中的脚本，分别构建ES6和CommonJS版本：

json
"scripts": {
  "build:cjs": "babel src --out-dir lib --presets=@babel/env",
  "build:esm": "BABEL_ENV=esmodules babel src --out-dir es --presets=@babel/env",
  "build": "npm run build:cjs && npm run build:esm"
}

4. 设置 package.json

在 package.json 文件中，指定不同版本的入口点：

json
{
  "main": "lib/index.js",
  "module": "es/index.js",
  "scripts": {
    "build": "..."
  },
  ...
}

• main: 指向CommonJS入口文件（针对Node.js或旧版工具）。
• module: 指向ES6模块入口文件（针对支持ES6模块的现代工具和环境）。

5. 发布到NPM

构建完成后，确保代码测试无误，然后就可以发布到NPM了：

bash
npm publish

这样设置后，用户在使用您的包时，可以根据他们的环境自动选择合适的版本。

示例项目

您可以查看一些流行的开源项目来学习他们是如何组织代码和构建的，例如 lodash-es 或其他类似的库。

通过这样的方法，您可以确保提供的NPM模块既可以支持老旧的CommonJS环境，也可以充分利用现代JavaScript环境的优势。