Electron项目使用Ant Design Button报错：global未定义问题排查

我帮你排查到问题所在啦！你遇到的Uncaught ReferenceError: global is not defined错误，根源是Electron的Renderer进程环境没有默认暴露global全局对象，但Ant Design部分组件依赖的draft-js（其底层依赖fbjs库）需要用到这个全局变量，所以触发了报错。

具体解决方案 #

有两种简单的修复方式，选一种就行：

方式1：修改Webpack渲染进程配置

在你的webpack.react.config.js里，给config对象添加node配置项，让Webpack在构建时模拟global全局变量：

const config = {
    target: "electron-renderer",
    devtool: "source-map",
    entry: "./src/app/renderer.tsx",
    output: {
        filename: "renderer.js",
        path: path.resolve(__dirname, "dist")
    },
    // 新增这部分配置
    node: {
        global: true,
        __dirname: false,
        __filename: false
    },
    // 原有其他配置不变
    module: { /* ... */ },
    resolve: { /* ... */ },
    plugins: [htmlPlugin]
};

方式2：在渲染进程入口手动声明全局变量

在你的渲染进程入口文件（比如src/app/renderer.tsx）的最顶部，添加一行代码，把window对象赋值给global：

// 放在文件最开头
(window as any).global = window;

为什么另一个仓库没问题？ #

你提到的electron-react-typescript仓库，大概率是用了更贴合Electron的构建工具（比如electron-webpack），这类工具会自动处理Electron环境与Node.js/Browser环境的兼容性差异，包括自动注入global这类全局变量，所以不会出现这个报错。

修改完之后重新打包运行，Ant Design的Button组件应该就能正常渲染啦！

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