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

Question

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

引导程序.js

require('ignore-styles');
require('babel-register')({
ignore:[/(node-modules)/],
presets:['es2015','react-app']
});
require('./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 文件，您应该会看到一个脚本部分（如果没有，请参阅 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 run serve （这里没有简写）

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

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

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

Answer 2

为了解决下一个错误

0:0  error  Parsing error: [BABEL] {some-path}: Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "{project-path}\\node_modules\\babel-preset-react-app\\index.js")

添加对我很有用

"parser": "@typescript-eslint/parser",

进入我的 React 应用程序的 package.json 中的“eslintConfig”块。

Answer 3

错误：使用 babel-preset-react-app 要求您指定 NODE_ENV 或 BABEL_ENV

CRA（创建反应应用程序）的答案：

@origin 帖子https://github.com/facebook/create-react-app/issues/2377

＃错误：

0:0  error  Parsing error: [BABEL] {some-path}: Using `babel-preset-react-app` requires 
that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are "development", "test", and "production". Instead, received: undefined. (While processing: "{project-path}\\node_modules\\babel-preset-react-app\\index.js")

＃描述：

使用@rescripts/cli和@rescripts/rescript-use-babel-config将.babelrc文件添加到 CRA后出现问题。

对于修复错误，您应该：

打字稿：

添加了"parser": "@typescript-eslint/parser",到你的 eslint 中。

JavaScript：

将"parser": "@babel/eslint-parser"添加到你的 eslint 中。

Eslint 文档：https://eslint.org/docs/user-guide/configuring/plugins#specifying-parser

CRA 的 package.json 中的 typescript eslint 配置示例：

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest",
      "eslint:recommended"
    ],
    "globals": {
      "NodeJS": true
    },
    "parser": "@typescript-eslint/parser",
    "overrides": [
        {
            "files": ["*.ts", "*.tsx"],
            "rules": {
                "no-undef": "off",
                "no-unused-vars": "off",
                "@typescript-eslint/no-unused-vars": ["error"]
            }
        }
    ],
    "rules": {
      "no-empty": [
        "error",
        {
          "allowEmptyCatch": true
        }
      ]
    }
  }