在 React 和 Webpack 项目上从“babel-preset-es2015”过渡到“babel-preset-env”时出现问题答案

【问题标题】：Issue when transitioning from "babel-preset-es2015" to "babel-preset-env" on React and Webpack project在 React 和 Webpack 项目上从“babel-preset-es2015”过渡到“babel-preset-env”时出现问题
【发布时间】：2018-03-24 23:49:12
【问题描述】：

我有一个使用 babel-preset-es2015 的 React 项目，该项目使用 webpack 构建得很好，但自从我移至 babel-preset-env 后，模块构建失败。

出现此错误信息：

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

以下是我的 webpack 配置：

工作（使用 babel-preset-2015）

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              'es2015',
              'react',
              'stage-1']
          }
        }
      }
    ]
  },
  ...
};

不起作用（使用 babel-preset-env）

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              'env',
              'react',
              'stage-1']
          }
        }
      }
    ]
  },
  ...
};

package.json 依赖项：

"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0"

【问题讨论】：

这很奇怪。您是否尝试过删除node_modules 并重新创建npm install？
你更新了你的 .babelrc 文件了吗？
@Oblosys 我有，但没有帮助。
@Jaxx 我没有 .babelrc。如果我在 webpack 文件的 'options' 下有预设，我需要有一个吗？
奇怪的是，根据您的错误，即使您切换到 env，您的应用程序的某些部分仍会继续引用 es2015 预设。所以这个错误并不是真的关于 env-preset 不起作用，它更多的是一个过时的代码的干扰问题。你可以试试@Oblosys 的建议。对“es2015”的完整项目搜索也可能会发现一些有趣的东西。

标签： reactjs webpack babeljs babel-loader

【解决方案1】：

所以我添加了一个 .babelrc 文件并将加载器选项移到那里，现在看起来一切正常。仍然不确定为什么它在 webpack 模块中不起作用。

Webpack

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  ...
};

.babelrc

{
  "presets": [
    "env",
    "react",
    "stage-1"
  ]
}

【讨论】：