配置babel时遇报错:

Error: [BABEL] /Users/maomao/Documents/demo/h5/mm_webpack/src/aaa.js: Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment variables. Valid values are "development", "test", and "production".

ERROR in ./src/aaa.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/maomao/Documents/demo/h5/mm_webpack/src/aaa.js: 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: "/Users/maomao/Documents/demo/h5/mm_webpack/node_modules/babel-preset-react-app/index.js")
    at module.exports (/Users/maomao/Documents/demo/h5/mm_webpack/node_modules/babel-preset-react-app/create.js:58:11)
    at module.exports (/Users/maomao/Documents/demo/h5/mm_webpack/node_modules/babel-preset-react-app/index.js:19:10)
    at 
webpack 5.21.2 compiled with 1 error in 815 ms

原因是最新的babel已经不是这样配置的了。

最新配置如下:

1. 安装:

npm i babel-loader @babel/core @babel/runtime @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime -D

2.新增.babelrc文件(根目录下),配置参数:

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-transform-runtime",
        "@babel/plugin-proposal-class-properties"
    ]
}

3. 新增webpack配置:

module.exports = {
  module: {//模块
    rules: [//规则,多个loader
      {
        test: /\.js$/,
        use: {
          //用 babel-loader 把es6转es5
          loader: "babel-loader",
        }
      }
    ]
  }
}