意外令牌{与Webpack 4和@ babel / preset-env一起使用

时间:2018-12-19 12:50:08

标签: ecmascript-6 babel webpack-4 babel-preset-env

这是我的.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

这是错误的出处。 \ client \ src \ components \ AddBook.js:

const { handleSubmit, pristine, reset, submitting } = this.props;

错误消息

   11 |   }
   12 |
 > 13 |   const { handleSubmit, pristine, reset, submitting } = this.props;
      |         ^
   14 |
   15 |   const handleSubmit = (allValues) => {
   16 |     console.log('formData:', allValues);

我认为@babel/preset-env处理了所有最新的JavaScript语法。是什么使代码中断? 完整的仓库位于https://github.com/ElAnonimo/booklist

1 个答案:

答案 0 :(得分:1)

您的.babelrc没有明确定义应该为其移植代码的浏览器/版本

根据需要调整以下示例.babelrc

{"presets": [
    [ "@babel/preset-env", {
      "targets": {
        "browsers": ["last 1 version", "ie >= 11"]
      },
      "@babel/preset-react"
    ]
]}
  

https://babeljs.io/docs/en/babel-preset-env#targets

另外,在使用webpack时,您需要明确告知babel-loader,以尊重.babelrc及其位置。

loader: 'babel-loader',
options: {
  babelrc: path.join(process.cwd(), './babelrc')
}

,假设.babelrc位于项目的根目录中。