在React和Webpack项目上从“babel-preset-es2015”转换为“babel-preset-env”时出现问题

时间:2017-10-12 22:23:31

标签: reactjs webpack babel babel-loader

我有一个使用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)

以下是我的网站配置:

WORKS(使用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"

1 个答案:

答案 0 :(得分:1)

所以我添加了一个.babelrc文件并在那里移动了加载器选项,现在看起来效果很好。仍然不确定为什么它在webpack模块中不起作用。

<强>的WebPack

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

<强> .babelrc

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