如何使用 esbuild 设置全局 属性 以进行反应

Question

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

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

我的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

我已经在构建开始前写了一个 config/env 文件。
然后我的 React 应用程序只需要知道 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' });

Answer 2

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

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