迁移项目至TypeScript时，无法识别Webpack DefinePlugin定义的__DEVELOPMENT__变量

我之前也踩过这个坑，Webpack DefinePlugin定义的全局变量在TypeScript里找不到，大概率是声明文件的写法或者TS配置没到位，你可以按下面的步骤逐一排查：

1. 修正全局声明文件的写法 #

先检查你的globals.d.ts，如果里面加了export语句，会导致它被当作模块而非全局声明文件，直接失效。正确的写法应该是：

declare const __DEVELOPMENT__: boolean;

如果你的globals.d.ts里必须包含import/export（比如引入了其他类型），那需要用declare global包裹声明，并添加export {}来标记它为模块：

declare global {
  const __DEVELOPMENT__: boolean;
}

export {};

2. 确保TS配置能识别到声明文件 #

打开tsconfig.json，检查include数组是否包含了globals.d.ts的路径：

{
  "compilerOptions": {
    // 其他编译配置...
  },
  "include": [
    "./src/**/*",
    "./globals.d.ts" // 手动指定声明文件路径，或者用"./**/*.d.ts"匹配所有声明文件
  ]
}

如果你的声明文件放在专门的类型目录（比如src/types），可以把路径改成"./src/types/**/*.d.ts"。另外，要是你配置了typeRoots，记得把自定义类型目录加进去：

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

3. 确认Webpack DefinePlugin的配置正确性 #

你的配置看起来没问题，但要注意DefinePlugin是直接替换代码中的变量，确保__DEVELOPMENT__被正确替换为布尔值：

new webpack.DefinePlugin({
  __DEVELOPMENT__: env.NODE_ENV === 'development', // 这里直接返回布尔值，Webpack会把代码里的__DEVELOPMENT__替换成true/false
})

这里不需要额外用JSON.stringify，布尔值直接替换即可生效。

4. 重启TS服务和Webpack #

有时候编辑器的TS服务会缓存旧的类型信息，修改完配置后，按Ctrl+Shift+P（Windows/macOS）输入TypeScript: Restart TS Server重启服务，同时重启Webpack开发服务器，确保所有配置都生效。

如果还是不行，可以检查下tsconfig.json的exclude数组，有没有意外排除了globals.d.ts所在的目录。

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