如何使用 esbuild 设置 React 的全局属性

Question

根据文档，使用 define 是设置构建环境属性的建议方法。

当我运行我的应用程序时，出现进程未定义错误。

我的 esconfig 如下：

        await build({
            entryPoints: ['./src/index.tsx'],
            outdir: './build',
            bundle: true,
            incremental: true,
            metafile: true,
            target: 'es6',
            loader: { '.png': 'file' },
            minify: !dev,
            sourcemap: 'inline',
            define: { 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') },
            plugins: [
                sassPlugin(),
                svg(),
                copy({
                    resolveFrom: 'cwd',
                    assets: {
                        from: ['./public/*'],
                        to: ['./build2/*'],
                    },
                }),
                copy({
                    resolveFrom: 'cwd',
                    assets: {
                        from: ['./public/images/*'],
                        to: ['./build2/images/*'],
                    },
                }),
            ],
            watch: dev
                ? {
                        onRebuild: (error) => {
                            if (error) {
                                console.error(error);
                            } else {
                                console.log('rebuild done');
                            }
                        },
                  }
                : false,
        });

我也欢迎其他设置全局属性来控制配置的方法。

Answer 1

您收到 process is not Defined 错误，因为您实际上没有在 define 选项中定义 process，而是定义了 process.env。 NODE_ENV。

这可能违反直觉，但这就是 define 选项的使用方式。它实际上并没有定义变量，只是将所有看起来像 define key 的标记替换为相应的值。

Answer 2

我在构建开始之前编写了一个配置/环境文件。
然后我的反应应用程序只需要知道 env 文件所在的位置。

const config: IEnv = {
    ENV: process.env.NODE_ENV ? process.env.NODE_ENV : 'development',
    USE_EMU: process.env.USE_EMU === '1' ? true : false,
    USE_DEV: process.env.USE_DEV === '1' ? true : false,
    VERSION: process.env.VERSION ? process.env.VERSION : 'dev',
};
fs.writeFileSync('src/env.json', JSON.stringify(config), { encoding: 'utf8' });