babel-loader的preset报错问题

Question

在webpack中配置babel-loader在执行webpack的时候遇到的报错信息是这样的：

webpack
Hash: cc5165ee1c0d373cffce
Version: webpack 3.10.0
Time: 600ms
     Asset       Size  Chunks             Chunk Names
    app.js       4 kB       0  [emitted]  main
index.html  322 bytes          [emitted]
   [0] ./src/app.js 1.53 kB {0} [built] [failed] [1 error]

ERROR in ./src/app.js
Module build failed: Error: Couldn't find preset "@babel/preset-env" relative to directory "/git-repos/learning-react/admin-v2-fe/src"
    at /git-repos/learning-react/admin-v2-fe/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
    at Array.map (<anonymous>)
    at OptionManager.resolvePresets (/git-repos/learning-react/admin-v2-fe/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
    at OptionManager.mergePresets (/git-repos/learning-react/admin-v2-fe/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
    at OptionManager.mergeOptions (/git-repos/learning-react/admin-v2-fe/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
    at OptionManager.init (/git-repos/learning-react/admin-v2-fe/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/git-repos/learning-react/admin-v2-fe/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/git-repos/learning-react/admin-v2-fe/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/git-repos/learning-react/admin-v2-fe/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/git-repos/learning-react/admin-v2-fe/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/git-repos/learning-react/admin-v2-fe/node_modules/babel-loader/lib/index.js:175:20)
Child html-webpack-plugin for "index.html":

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']  // <-- 要把这里官方文档的写法改为['env']才不会报错
          }
        }
      }
    ]
  },

这是为什么？

Answer 1

看这段 报错英文 Couldn't find preset "@babel/preset-env" relative to directory "/git-repos/learning-react/admin-v2-fe/src"; 对的情况，你是这么写的presets:['env'], 他会在 你当前目录里去搜索node_modules 里有没有 babel-preset-env 这个模块， 如果没有他就会， 在去上一级目录继续这么搜索，直到根目录， 应该是这样 我想。
建议 看一下npm 包管理 和 webpack 别名配置那。。

Answer 2

为啥要写 '@babel/preset-env' 呢？ babel 的配置文件（babelrc，package.json 或者你的 weppack 中），presets 的定义只需要写最后一个单词就可以了，这都是预设的。比如 babel-preset-env，babel-preset-react，babel-preset-stage-0，对应的就是 env，react，stage-0，不需要带前缀。