webpack打包UMD模块JS库在Node.js报self未定义，应选什么模块类型？

问题根源 #

你碰到的UMD模式下Node.js环境报错self is not defined是Webpack 5的默认行为导致的：Webpack 5打包UMD格式时默认使用self作为全局对象挂载入口，而self仅存在于浏览器、Web Worker环境，Node.js环境下没有这个全局变量，因此触发报错。
而你切换到commonjs/commonjs2后无法通过浏览器script标签直接引入，是因为这两种格式仅适配CommonJS模块系统，不支持原生浏览器全局挂载的使用场景。

解决方案 #

选择UMD格式即可覆盖所有场景，只需要补全两个缺失的配置项即可解决报错：

1. 新增output.globalObject配置为'this'，自动适配不同环境的全局对象
2. 新增output.library.name配置，指定浏览器script标签引入时挂载到全局的变量名

修改后的webpack.config.js配置 #

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.js",
    library: {
      name: "你的库全局变量名", // 例：工具库叫utils就填"utils"，script引入后可直接通过window.utils调用
      type: "umd",
      // 如果你的库入口是export default导出的就保留下面这行，多命名导出或者用module.exports导出可以删除
      export: "default",
    },
    globalObject: "this", // 关键配置，解决不同环境全局对象兼容问题
  },
};

适配场景验证 #

配置完成后重新打包，即可同时支持以下所有使用场景：

• Node.js环境通过require导入
• React/Vue等前端工程化环境通过ES模块import导入
• 浏览器环境直接通过<script src="你的库地址"></script>引入，通过你配置的全局变量名调用

可选优化（多格式打包） #

如果需要更好支持现代前端工程的tree shaking能力，也可以同时输出ES模块格式，在package.json中配置对应入口即可：

{
  "main": "./dist/index.js",
  "module": "./dist/index.mjs"
}

内容的提问来源于stack exchange，提问作者h-sifat