webpack 5+ 动态导入导出属性隐藏 仅可通过default访问的问题咨询

这是webpack 5对ES模块与CommonJS模块互操作逻辑调整后的正常特性，属于官方默认配置变更导致的行为差异，不是用法错误，也不是file-saver的导出写法问题。

核心原因 #

webpack 4版本的output.importInterop配置默认值为webpack，该模式下会对CommonJS格式导出的模块做兼容处理：自动将CommonJS导出的所有属性平铺挂载到动态导入返回的模块对象根层级，因此可以直接通过module.method访问导出属性。

webpack 5将该配置的默认值修改为node，完全对齐Node.js原生的ES模块导入CommonJS模块的规则：CommonJS模块的全部导出内容只会被挂载到导入对象的default属性下，不会再自动平铺属性到根层级，因此只能通过module.default.method的形式访问。

可选用的解决方案 #

• 方案1：修改webpack配置，还原webpack 4的兼容逻辑
  在webpack.config.js的output配置项中添加如下配置即可，无需修改业务代码：

  module.exports = {
    output: {
      // 其他output配置...
      importInterop: "webpack"
    }
  }
  

• 方案2：业务代码适配原生ES模块规范
  动态导入后先提取default属性再访问对应方法，对齐标准ES模块行为，无需修改构建配置：

  // 以file-saver为例
  import('file-saver').then(({ default: { saveAs } }) => {
    // 直接使用saveAs方法即可
  })
  

• 方案3：自定义模块调整导出格式
  如果是自己开发的业务模块，将CommonJS格式的module.exports导出改为ES模块标准的export语法导出，动态导入后即可直接从模块对象根层级访问导出属性：

  // 原CommonJS写法
  // module.exports = { methodA, methodB }
  // 改为ES模块写法
  export const methodA = xxx
  export const methodB = xxx
  

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