Webpack如何正确打包定义并使用require值的代码

PureScript 0.14.9 编译器生成的CommonJS代码存在标识符冲突：同一作用域内，既调用CommonJS规范内置的require函数加载依赖，又通过var声明了同名require变量存储自身导出的Unit类型值。Webpack做静态依赖分析时，会被作用域内的同名变量声明误导，判定该作用域内的require是用户自定义变量，不对开头的CommonJS依赖加载语句做打包替换，最终代码运行在浏览器环境时，因不存在原生require方法抛出运行时错误。

不需要修改第三方依赖源码，通过调整Webpack配置即可解决，按优先级排序：

方案1：配置模块解析规则（Webpack 5 推荐，无额外依赖） #

Webpack 5 支持通过parser配置强制指定模块内CommonJS相关内置标识符的解析规则，忽略局部同名声明的干扰，配置如下：

// webpack.config.js
module.exports = {
  // 其他原有配置保持不变
  module: {
    rules: [
      {
        test: /\.js$/,
        // 匹配所有PureScript编译生成的JS文件，根据依赖安装方式调整路径：spago管理的依赖一般在node_modules/.spago目录，手动安装的purescript前缀包匹配node_modules/purescript-*即可
        include: [/node_modules[\\/]\.spago/, /node_modules[\\/]purescript-/],
        parser: {
          javascript: {
            // 强制该规则匹配的模块内，CommonJS require函数固定使用require标识符，忽略局部var require的重声明
            commonjsRequire: "require",
            commonjsExports: "exports",
            commonjsModule: "module"
          }
        }
      }
    ]
  }
}

方案2：源码替换适配（兼容Webpack 4/5，无额外依赖） #

如果使用Webpack 4 没有上述parser配置项，可以通过自定义简易loader，在Webpack加载文件的阶段自动替换冲突的变量名，逻辑等价于手动重命名第三方代码里的冲突变量，不会影响原有业务逻辑：

// webpack.config.js
module.exports = {
  // 其他原有配置保持不变
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [/node_modules[\\/]\.spago/, /node_modules[\\/]purescript-/],
        use: [
          {
            loader: (sourceCode) => {
              // 将PureScript生成的冲突变量重命名为无冲突的标识符
              return sourceCode
                .replace(/var require = /g, "var __ps_internal_require = ")
                .replace(/require: require/g, "require: __ps_internal_require")
            }
          }
        ]
      }
    ]
  }
}

如果Webpack配置调整后仍存在兼容问题，可选择以下方案：

• 升级PureScript编译器版本：0.15及以上版本的编译器已经修复该命名冲突问题，生成的CommonJS代码不会再重名声明require变量，若第三方依赖支持高版本编译器，重新编译依赖即可从根源解决问题。
• 依赖预编译处理：在Webpack构建前的预处理阶段，通过esbuild、swc等工具批量处理PureScript生成的JS文件，替换冲突变量名后再传入Webpack打包流程。
• 更换打包工具：esbuild、Rollup等打包工具对CommonJS的解析逻辑不会被局部var require声明干扰，可直接正常打包该类代码，无需额外适配。

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