babel-loader的preset報(bào)錯(cuò)問題

在webpack中配置babel-loader在執(zhí)行webpack的時(shí)候遇到的報(bào)錯(cuò)信息是這樣的：

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']才不會(huì)報(bào)錯(cuò)
          }
        }
      }
    ]
  },

這是為什么？

回答

編輯回答

艷骨

為啥要寫 '@babel/preset-env' 呢？ babel 的配置文件（babelrc，package.json 或者你的 weppack 中），presets 的定義只需要寫最后一個(gè)單詞就可以了，這都是預(yù)設(shè)的。比如 babel-preset-env，babel-preset-react，babel-preset-stage-0，對(duì)應(yīng)的就是 env，react，stage-0，不需要帶前綴。

2018年4月15日 13:55

編輯回答

眼雜

看這段報(bào)錯(cuò)英文 Couldn't find preset "@babel/preset-env" relative to directory "/git-repos/learning-react/admin-v2-fe/src"; 對(duì)的情況，你是這么寫的presets:['env'], 他會(huì)在你當(dāng)前目錄里去搜索node_modules 里有沒有 babel-preset-env 這個(gè)模塊，如果沒有他就會(huì)，在去上一級(jí)目錄繼續(xù)這么搜索，直到根目錄，應(yīng)該是這樣我想。
建議看一下npm 包管理和 webpack 別名配置那。。

2017年1月25日 09:50