如何提供 `babel-preset-react-app` 环境变量？

Posted 2023-02-22

【中文标题】如何提供 `babel-preset-react-app` 环境变量？

【英文标题】：How to provide `babel-preset-react-app` env variables?

【发布时间】：2018-10-16 01:57:27

【问题描述】：

我正在开发一个应用程序，它将 create-react-app 与快速服务器（使用服务器渲染）连接起来。我指的是this tutorial。要从服务器渲染文件，代码是

bootstrap.js

require('ignore-styles');
require('babel-register')(
ignore:[/(node-modules)/],
presets:['es2015','react-app']
);
require('./index');

index.js

import express from 'express';
// we'll talk about this in a minute:
import serverRenderer from './middleware/renderer';


const PORT = 3000;
const path = require('path');
// initialize the application and create the routes
const app = express();
const router = express.Router();
// root (/) should always serve our server rendered page
router.use('^/$', serverRenderer);
// other static resources should just be served as they are
router.use(express.static(
    path.resolve(__dirname, '..', 'build'),
     maxAge: '30d' ,
));
// tell the app to use the above rules
app.use(router);
// start the app
app.listen(PORT, (error) => 
    if (error) 
        return console.log('something bad happened', error);
    

    console.log("listening on " + PORT + "...");
);

运行命令时

node bootstrap.js

我收到错误提示

错误：使用babel-preset-react-app 需要您指定NODE_ENV 或BABEL_ENV 环境变量。有效值为“开发”、“测试”和“生产”。

【问题讨论】：

另见：babel-preset-react-app not picking up environment variables

【参考方案1】：

这里有几个选项。我将描述最简单的选项。

最简单的方法是像这样运行您的节点 bootstrap.js：

NODE_ENV=production BABEL_ENV=production node bootstrap.js

但这太长了，每次都记不住，所以你可以使用 package.json 脚本。

如果您打开 package.json 文件，您应该会看到脚本部分（如果没有，see the doc）。在该脚本部分，您可以创建自己的脚本。

我主要使用 2 个脚本，一个用于开发，一个用于生产。所以在你的情况下是这样的：

"scripts": 
   "start": "NODE_ENV=development BABEL_ENV=development node bootstrap.js",
   "serve": "NODE_ENV=production BABEL_ENV=production node bootstrap.js"

现在您可以像这样运行您的节点应用程序：

开发中

node run start 或 node start（因为 node start 是 node run start 的别名）

在生产中

node run serve（这里没有简写）

如果您仍然认为您的 package.json 变得太大，您可以将其抽象为一些 .js 文件。并相应地将您的脚本更改为：

"scripts": 
   "start": "node scripts/start.js"
   "serve": "node scripts/serve.js"

在这些脚本文件中，您可以在运行应用程序之前定义这两个环境变量。

【讨论】：

在这两种情况下，我都收到错误“NODE_ENV”不是内部或外部命令、可运行程序或批处理文件。

哦，我猜你用的是windows？然后，您应该首先为每个环境设置这些环境，例如SET NODE_ENV=development & BABEL_ENV=development，然后您应该能够运行node bootstrap.js。但最好的方法是将这些变量直接抽象到 start.js 文件中。通过手动或使用 dotenv 包进行。使用 dotenv 包，您可以创建一个 .env 文件来存储这些环境变量。但这不是 NODE_ENV 和 BABEL_ENV 变量的最佳实践。

你认为最好的方法是什么？和 start.js 文件？你的意思是我将在哪里存储脚本？

是的。您创建一个 start.js 文件，在其中设置 NODE_ENV 和 BABEL_ENV 环境，接下来您需要在 start.js 中使用 require('./bootstrap.js') bootstrap.js。但是在需要 bootstrap.js 之前设置环境变量。您不将其添加到 bootstrap.js 的原因是 deveopment、test 和 production 状态。 React 将在生产模式下禁用调试等。

process.env.NODE_ENV = "开发"; process.env.BABEL_ENV="开发";需要('./bootstrap');