无法导入JS模块：UMD模块在ES模块环境下的导入异常

问题根源 #

你用Webpack打包的是UMD格式模块，全局环境下能通过MyModule.Test访问，但ES模块（type="module"的script）需要明确的导出结构匹配，当前打包产物的ES模块导出和你的导入语句不对应，导致报错。

具体解决步骤 #

1. 调整Webpack配置，适配ES模块导出 #

修改webpack.config.js的output配置，让UMD模块同时正确暴露ES模块的导出：

module.exports = {
  // 其他入口、loader配置保持不变
  output: {
    filename: 'index_bundle.js',
    library: 'MyModule',
    libraryTarget: 'umd',
    globalObject: 'this', // 解决浏览器/Node环境全局对象冲突
    libraryExport: 'Test', // 对应src/index.js里的命名导出Test
    // Webpack 5+ 新增配置，生成更兼容ES模块的产物
    module: true,
  },
};

• 如果你的src/index.js用的是默认导出，把libraryExport改成'default'。

2. 对齐源码的导出方式 #

根据Webpack的libraryExport配置，调整src/index.js的导出：

• 命名导出（对应libraryExport: 'Test'）：

  export class Test {
    constructor() {
      // 类逻辑代码
    }
  }
  

• 默认导出（对应libraryExport: 'default'）：

  export default class Test {
    constructor() {
      // 类逻辑代码
    }
  }
  

3. 修正导入语句 #

根据导出方式调整独立index.js的导入：

• 命名导出时用命名导入：

  import { Test } from './dist/index_bundle.js';
  const testInstance = new Test();
  

• 默认导出时用默认导入：

  import Test from './dist/index_bundle.js';
  const testInstance = new Test();
  

4. 确保Babel不破坏模块结构 #

修改.babelrc，关闭Babel对ES模块的转译，让Webpack处理模块系统：

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": "> 0.25%, not dead"
    }]
  ]
}

5. 验证打包产物 #

打包后查看dist/index_bundle.js的末尾，确认UMD代码中包含ES模块的导出逻辑，比如Webpack 5+生成的产物会有类似：

export { MyModule as default };

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