Reactjs Es2016导入不工作

我的react项目一直在使用webpack和es2015，但我想更新到es2016。我认为这就像使用npm安装新的预设然后更改我的.babelrc一样简单，但当我这样做时，我所有的es2015语法都会抛出错误。由于我的一些错误，我假设es2016没有被加载

抛出的确切错误是

Uncaught SyntaxError: Unexpected token import

这是我的webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  module : {
    loaders : [
      {
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel-loader',
        query: {
          presets: ['es2016']
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader'
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        query: {
          modules: true,
          localIdentName: '[name]__[local]___[hash:base64:5]'
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  },
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

module.exports = config;

这是我的宝贝

{
  "presets" : ["es2016", "react"]
}

---

es模块是2015规范的一部分，因此您也需要包括es2015预设。es2016预设仅包括

变换求幂运算符

插件。

要使用es2016预设，您需要将其添加到预设中。根据ES2016：

ES2016：仅将ES2016中的内容编译为ES2015

因此，如果您像这样更新

.babelrc

，它将正确传输：

{
  "presets" : ["es2015", "es2016", "react"]
}

或者你可以加上。它将包括es2015、es2016和es2017预设

另一件事：您正在

.babelrc

文件和webpack loader配置中设置预设。你只需要在一个地方设置它