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

Question

我正在开发一个应用程序，它将 create-react-app 与 Express 服务器连接(使用服务器渲染)。我指的是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

我收到错误

Error: Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment variables. Valid values are "development", "test", and "production".

Answer 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 runserve(这里没有简写)

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

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

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