无法使用 Webpack 和 React 编译 ES7 功能答案

【问题标题】：Can't compile ES7 features with Webpack and React无法使用 Webpack 和 React 编译 ES7 功能
【发布时间】：2016-03-02 10:58:04
【问题描述】：

我正在尝试编译我的 React 应用程序以支持 ES7 装饰器，因为我正在使用 autobind-decorator 但 webpack 说路由器有一个“意外令牌”，这是应用程序的入口文件。我尝试了各种版本的 babel 相关 npms，使用“state-0”和“transform-runtime”，它们都导致相同的错误。任何人的帮助将不胜感激:)

main.js

webpack.config

package.json

【问题讨论】：

致对我的问题投反对票的人。你能告诉我你为什么这样做，所以我以后不会犯同样的错误。我不介意被否决，但很高兴知道为什么。我有一种感觉，它可能是屏幕截图而不是使用降价。非常感谢

标签： reactjs webpack

【解决方案1】：

此错误的原因是您的 webpack.config.js 文件中的加载程序配置不正确。您需要在加载器配置的query 字段下提供presets：

loaders: [
  {
    test: /\.jsx?$/,
    loader: 'babel',
    query: {
      presets: ['es2015', 'react', 'stage-1']
    }
  }
]

【讨论】：

【解决方案2】：

根据the README of babel-loader，您应该在配置中使用query 字段，如下所示：

module: {
  loaders: [
    {
      test: /\.jsx?$/,
      include: // ....
      loader: 'babel',
      query: {
        presets: [/*presets list*/],
        plugins: [/*plugins list*/]
      }
    }
  ]
}

【讨论】：