使用Webpack、exports-loader及遗留JavaScript创建npm包遇问题求助

看起来你遇到了一个典型的npm包打包适配问题——本地用exports-loader直接导入遗留JS没问题，但做成npm包分发就失效了，大概率是你的npm包Webpack配置没处理好遗留代码的模块导出逻辑，我来帮你梳理下解决方案：

1. 确保npm包的Webpack配置正确处理遗留JS文件 #

你在本地项目里用exports-loader能正常工作，是因为本地Webpack帮你把BrowserPrint.fat.js里的全局对象转换成了模块导出，但你的npm包自己的Webpack配置里可能没加这个规则，导致打包时BrowserPrint没有被正确注入到模块作用域里。

你需要在npm包的webpack.config.js中添加对BrowserPrint.fat.js的loader规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /BrowserPrint\.fat\.js$/, // 匹配你的遗留JS文件
        use: {
          loader: 'exports-loader',
          options: {
            exports: 'BrowserPrint' // 指定要导出的全局变量名
          }
        }
      }
    ]
  }
};

这样Webpack打包npm包时，会自动把遗留JS里的BrowserPrint全局对象转换成模块的导出项，你的printEan函数就能正常访问它了。

2. 配置Webpack Output为通用模块格式 #

如果你的npm包需要支持不同的模块系统（比如CommonJS、ES Module、AMD），一定要把Webpack的output设置成UMD格式，避免其他项目导入时出现兼容性问题：

module.exports = {
  // ...其他配置
  output: {
    filename: 'your-package-bundle.js',
    library: 'YourPackage', // 可选：全局变量名，用于非模块环境
    libraryTarget: 'umd',
    umdNamedDefine: true,
    globalObject: 'this' // 避免在浏览器和Node环境下的全局对象冲突
  }
};

3. 检查package.json的入口配置 #

别忘记在npm包的package.json里把main字段指向Webpack打包后的输出文件，比如：

{
  "main": "dist/your-package-bundle.js",
  // ...其他字段
}

这样其他项目通过import或require导入你的包时，才能找到正确的入口文件。

4. 本地测试npm包的小技巧 #

不用每次修改都发布npm包，你可以用npm link命令把本地包链接到测试项目中：

1. 在你的npm包目录下运行npm link
2. 在测试项目目录下运行npm link your-package-name
   这样就能直接测试打包后的包是否正常工作，快速排查配置问题。

额外注意点 #

如果你的遗留JS代码还依赖其他全局变量，可能需要配合expose-loader把这些变量暴露到模块作用域，但更推荐的方式是尽可能把遗留代码转换成模块化的形式，减少全局依赖，这样npm包的兼容性会更好。

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