迁移至es2015模块后，如何配置WebPack生成合成默认导入？

刚好我之前处理过几乎一模一样的问题，给你梳理下核心原因和解决办法：你说得完全对——allowSyntheticDefaultImports确实只是TypeScript类型检查层面的配置，它只会让TS允许你写ES风格的默认导入语法，但不会修改最终生成的JS代码。而当你导入的是CommonJS规范的模块（比如用module.exports导出的模块），TS默认不会把它映射成ES模块的默认导出，这就导致了运行时拿到undefined的问题。

下面是具体的解决方案：

1. 开启TypeScript的esModuleInterop选项 #

这是最关键的一步。esModuleInterop可不是单纯的类型检查配置，它会让TypeScript生成额外的辅助代码，专门处理CommonJS/AMD/UMD模块与ES模块的互操作性。开启后，TS会自动把import X from 'module'转换成能正确获取CommonJS模块module.exports值的代码。

在你的tsconfig.json里修改配置：

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true, // 这个选项会被esModuleInterop自动启用，可写可不写
    "module": "esnext", // 确保模块目标设为ES模块，配合Webpack处理
    "target": "es2015",
    // 其他原有配置...
  }
}

小提示：esModuleInterop会自动开启allowSyntheticDefaultImports，所以你甚至可以删掉后者的配置，只保留esModuleInterop就行。

2. 确保awesome-typescript-loader读取正确配置 #

如果你是在Webpack配置里直接给loader传递编译选项，要确保esModuleInterop也被包含进去。比如：

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader',
        options: {
          compilerOptions: {
            esModuleInterop: true,
            allowSyntheticDefaultImports: true
          }
        }
      }
    ]
  }
};

不过更推荐直接通过tsconfig.json统一管理配置，这样TS编译器和loader能共享同一套规则，避免出现配置不一致的问题。

3. 特殊场景的临时 workaround（可选） #

如果个别第三方模块还是出现导入undefined的情况，你可以手动做一层转换：

// 针对顽固的CommonJS模块，手动获取导出值
import * as module from 'some-problematic-module';
const moduleDefault = (module as any).default || module;

但这只是临时方案，优先用esModuleInterop的方案更优雅、更通用。

最后别忘了重启Webpack开发服务器，有时候缓存会导致新配置不生效哦！

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