如何配置Webpack跳过外部CDN全局变量编译，解决TS2304找不到名称报错

根因说明 #

你遇到的TS2304报错是TypeScript类型检查阶段抛出的错误，不是Webpack打包阶段的错误，仅配置Webpack externals不会生效，需要同时处理TS类型声明，按需配置Webpack变量替换即可解决。

方案1：仅解决类型报错，无需修改Webpack #

在项目src目录下新建global.d.ts全局类型声明文件，添加如下内容：

// 声明全局变量存在，TS编译时不会再报找不到变量的错误
declare var CUSTOM_WINDOW_VARIABLE: any;

// 可选：扩展window接口类型，后续写window.CUSTOM_WINDOW_VARIABLE时也会有正确的类型提示
interface Window {
  CUSTOM_WINDOW_VARIABLE: typeof CUSTOM_WINDOW_VARIABLE;
}

之后检查tsconfig.json的include配置，确保包含了该声明文件的路径，示例配置：

{
  "include": ["src/**/*", "src/global.d.ts"]
}

配置完成后直接在代码中使用CUSTOM_WINDOW_VARIABLE即可，不会再报TS错误。

方案2：需要Webpack自动替换全局变量为window属性 #

如果希望Webpack构建时自动把代码里所有的CUSTOM_WINDOW_VARIABLE替换为window.CUSTOM_WINDOW_VARIABLE，可以配合使用Webpack内置的DefinePlugin插件，修改webpack.config.js配置：

const webpack = require('webpack');

module.exports = {
  // 原有其他配置
  plugins: [
    new webpack.DefinePlugin({
      CUSTOM_WINDOW_VARIABLE: 'window.CUSTOM_WINDOW_VARIABLE'
    })
  ],
  // 原有externals配置可以删除，DefinePlugin已经完成变量替换，不需要external处理
}

该方案仍需要配合方案1中的类型声明文件使用，否则TypeScript仍然会抛出找不到变量的报错。

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