webpack打包UMD库后浏览器调用导出函数报错undefined如何解决

问题原因及解决步骤 #

报错是因为webpack UMD打包配置缺失、文件引用路径错误两个核心原因，导致类库没有正确挂载到window对象上，按以下步骤修改即可：

1. 修改webpack配置

webpack 5 构建UMD格式类库时，默认的全局挂载对象是self，无法兼容普通浏览器script标签加载场景，需要在webpack.config.js的output节点补充2项配置：

• 新增globalObject: 'this'，指定UMD格式挂载的全局对象，兼容浏览器环境下挂载到window
• 新增umdNamedDefine: true，规范UMD模块命名，避免环境兼容问题
  修改后的完整配置如下：

const path = require('path');

module.exports = {
  mode: "development",
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'dinero-calc.js',
    globalObject: 'this', // 新增配置
    umdNamedDefine: true, // 新增配置
    library: {
        name: "dineroNumbers",
        type: "umd",
    },
  },
 };

2. 修正index.html的脚本引用路径

webpack打包后的产物默认输出在dist目录下，如果你把index.html放在项目根目录，script标签的src需要对应到dist目录的文件：

<script src="./dist/dinero-calc.js"></script>

3. 重新打包测试

重新执行npm run build后刷新页面，即可在控制台看到正确输出98400。

可选优化项 #

• 把package.json中的main字段修改为"main": "./dist/dinero-calc.js"，方便其他项目npm安装你的类库时正确找到入口文件
• 可以删除devDependencies中无用的dinero依赖，你已经在dependencies中安装了正确的dinero.js，两个包重复安装属于冗余配置

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