关于编写兼容Node.js与前端框架的npm模块的技术疑问

1. 如何将CommonJS模块转译为可在浏览器中使用的ES6模块？ #

可通过两种常用工具链实现转换：

• Babel转译：配置@babel/preset-env并设置合适的模块转换规则，将CommonJS的require/module.exports转译为ES6的import/export。示例配置文件.babelrc：

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

  执行转译命令：babel src --out-dir dist --extensions ".js"，即可得到ES6模块格式的文件。
• 打包工具转换：用Rollup或Webpack直接处理CommonJS模块，输出ES模块格式。比如Rollup配合@rollup/plugin-commonjs插件，配置rollup.config.js：

  import commonjs from '@rollup/plugin-commonjs';
  import resolve from '@rollup/plugin-node-resolve';
  
  export default {
    input: 'src/index.js',
    output: {
      file: 'dist/index.esm.js',
      format: 'es'
    },
    plugins: [resolve(), commonjs()]
  };
  

  运行rollup -c即可生成浏览器兼容的ES模块文件。

2. 该转换是否需由客户端的模块打包工具处理？ #

分两种场景：

• 模块侧提前处理：发布npm模块时，在package.json中同时配置main（指向CommonJS入口）和module（指向ES模块入口），同时提供两种格式的代码。客户端打包工具会自动优先选用ES模块，无需用户额外处理转换。
• 客户端侧处理：如果模块仅提供CommonJS格式，Webpack、Vite等客户端打包工具会自动识别并转译为浏览器兼容的模块格式，无需用户手动操作。但这种方式会增加客户端打包的工作量，建议模块侧提前输出双格式更友好。

3. 如何在Node.js中以CommonJS模块的方式引入ES6模块？ #

有三种可行方案：

• 动态import()：在CommonJS模块中使用异步的import()函数加载ES模块，示例代码：

  // CommonJS文件
  async function useFlatMap() {
    const { default: flatMap } = await import('lodash/flatMap');
    const result = flatMap([1, 2], n => [n, n * 2]);
    console.log(result);
  }
  useFlatMap();
  

• 借助加载器工具：安装esm模块加载器，启动Node时添加参数node -r esm your-file.js，即可在CommonJS中直接用require()引入ES模块。
• 选用模块的CommonJS版本：像lodash这类库，发布到npm的是编译后的代码，同时包含ES和CommonJS格式，直接执行require('lodash/flatMap')即可引入，无需额外处理。

内容的提问来源于stack exchange，提问作者Makis