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

Question

我正在开发一个应用程序，它将 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 环境变量。有效值为“开发”、“测试”和“生产”。

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 run serve（这里没有简写）

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

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

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