如何将Node.js模块打包为浏览器可导入的ES6模块（支持script type=module）？

这个需求完全可以实现，之前没拿到预期效果，本质是默认的打包配置没有匹配浏览器原生ES模块的输出要求，不是根本做不到的事。

常见的失败原因 #

• 打包工具默认输出格式不匹配：默认配置下Parcel、Webpack往往会输出IIFE、UMD或CommonJS格式的代码，这类格式根本无法被<script type="module">的原生import语法识别，加载时会直接抛出语法错误
• 没有适配npm包的浏览器运行环境：很多Node.js生态的npm包默认入口指向Node.js专属版本，没有做别名替换的话，打包产物会混入fs/path/process这类浏览器不存在的API，运行时直接报错
• 导出结构被改写：如果打包时配置了全局挂载导出，最终产物的导出会变成绑定到全局对象的形式，自然没法通过ES模块的命名导入语法拿到你写的api变量

可直接落地的实现方案 #

Parcel 打包配置 #

不需要安装额外插件，只要在项目根目录的package.json里补充以下targets配置，明确输出要求：

{
  "targets": {
    "default": {
      "context": "browser",
      "outputFormat": "esmodule"
    }
  }
}

之后执行原来的打包命令parcel build index.js，生成的产物就已经是符合要求的单文件ES模块，可以直接被<script type="module">标签导入使用。

Webpack 打包配置 #

核心是开启ES模块输出支持，修改webpack.config.js的对应配置段：

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'SomeModule.min.js',
    library: {
      type: 'module'
    }
  },
  experiments: {
    outputModule: true
  }
}

如果依赖的npm包存在Node.js专属API，只要配置对应的浏览器兼容polyfill别名，就能把所有依赖完整打进单个JS文件，不需要额外拆分外部依赖。

效果验证方式 #

打开生成的打包产物文件，确认三点就说明符合要求：

• 整段代码没有被IIFE闭包整体包裹
• 不存在exports.xxx这类CommonJS语法
• 文件末尾保留了ES模块的导出语句，对应你入口文件写的api导出

满足以上三点，直接放到浏览器里用<script type="module">导入就能正常调用。

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