Webpack打包外部Konva时自动追加.default致引用异常如何解决

使用TypeScript开发Chrome扩展，通过Webpack打包生成最终JavaScript文件，需要直接依赖浏览器全局环境已注入的Konva实例。

业务TypeScript代码如下：

import Konva from "Konva";

for(const shp in Konva.shapes) {
   // 执行业务逻辑
}

使用的webpack.config.js配置如下：

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: '/content/init.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    externals: {
        "Konva": "Konva"
    },
    output: {
        filename: 'dist.min.js',
        path: path.resolve(__dirname, './dist')
    },
}

打包后将dist.min.js通过<script>标签注入页面，检查产物发现Konva引用被替换为如下形式：

for(const t in s.default.shapes){ // 等价于访问Konva.default.shapes
    // 执行业务逻辑
}

变量s确实指向全局Konva实例，但预期输出应该是直接访问s.shapes：

for(const t in s.shapes) { // 等价于访问Konva.shapes
    // 执行业务逻辑
}

全局Konva对象本身不存在default属性，s.default为undefined直接导致代码运行报错。已尝试调整externalsType配置、使用IgnorePlugin均未解决问题，需要找到禁用该自动追加.default转换的方法。

该转换行为来自TypeScript的默认导入兼容逻辑：开启esModuleInterop配置时，import Konva from "Konva"这类默认导入语句会被ts-loader编译为带__importDefault包装的代码，自动尝试读取导入对象的default属性，用于适配ESModule与CommonJS模块的导入差异。全局注入的Konva库本身没有default字段，因此会出现访问undefined的异常。

任选以下一种方案即可：

• 方案1：修改导入语法（侵入性最小，无需改配置）
  将默认导入改为命名空间导入，跳过TS的默认导入包装逻辑：

  // 替换原有import Konva from "Konva";
  import * as Konva from "Konva";
  
  for(const shp in Konva.shapes) {
     // 原有业务逻辑无需改动
  }
  

• 方案2：调整TypeScript编译配置
  如果不想修改业务代码的导入语句，直接修改项目根目录的tsconfig.json，关闭两个默认导入兼容配置即可：

  {
    "compilerOptions": {
      "esModuleInterop": false,
      "allowSyntheticDefaultImports": false
      // 其余原有配置保持不变
    }
  }
  

• 方案3：调整Webpack externals配置
  将externals从字符串写法改为对象写法，明确指定各模块规范下的Konva引用路径，避免webpack的模块默认解析逻辑干扰：

  // webpack.config.js中修改externals字段
  externals: {
    Konva: {
      root: 'Konva',
      commonjs: 'Konva',
      commonjs2: 'Konva',
      amd: 'Konva'
    }
  }
  

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