前言,react后台项目进入到了接口阶段,需要设置webpack代理,还有改端口(因为node服务器端和react都是用3000端口)

我们eject出webpack.config.js,eject前要把git修改的提交完,这个真的醉,弄出一大堆东西出来,我就想要一个webpack.config.js不能直接给?

完事后就出了标题那个错误

Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` env

其实这个无伤大雅,只是看的很不爽,能正常运行,而且我看了下源码,按道理是没问题的,可能是vscode抽风了

但,我们总不可能顶着这个error一直编码的吧

我们溯源,首先是start.js

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

这两个值已经赋值了,那个error哪里我们找到源码在node_module的路径

babel-preset-react-app\index.js

我们看看这个文件里有什么

'use strict';

const create = require('./create');

module.exports = function (api, opts) {
  // This is similar to how `env` works in Babel:
  // https://babeljs.io/docs/usage/babelrc/#env-option
  // We are not using `env` because it’s ignored in versions > babel-core@6.10.4:
  // https://github.com/babel/babel/issues/4539
  // https://github.com/facebook/create-react-app/issues/720
  // It’s also nice that we can enforce `NODE_ENV` being specified.
  const env = process.env.BABEL_ENV || process.env.NODE_ENV;
  return create(api, opts, env);
};

是上面那两个值,按理说我们已经赋值了,这个错误虽然有点无效但我们启动后已经执行了start.js

再看看create.js

module.exports = function (api, opts, env) {

var isEnvDevelopment = env === 'development';
  var isEnvProduction = env === 'production';
  var isEnvTest = env === 'test';

if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
    throw new Error(
      '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: ' +
        JSON.stringify(env) +
        '.'
    );
  }

我们在这里找到了错误的来源,index调用了create的这个函数,赋值了env变量

既然他说这个值是undefined,我们就加一层保险使他一直有值

const env = process.env.BABEL_ENV || process.env.NODE_ENV || 'development';

在最后面加上这个,如果前面两个不是undefined,执行的时候和原来相比不会有任何影响

再重启vscode,那个错误就没有了

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐