es2016导入不工作答案

【问题标题】：Es2016 import not workinges2016导入不工作
【发布时间】：2017-01-11 21:31:00
【问题描述】：

我的 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;

这是我的.babelrc

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

【问题讨论】：

标签： reactjs webpack babeljs

【解决方案1】：

es 模块是 2015 规范的一部分，因此您也需要包含 es2015 预设。 es2016预设只包含transform-exponentiation-operator插件。

【讨论】：

【解决方案2】：

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

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

因此，如果您像这样更新.babelrc，它将正确转换：

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

或者您可以添加latest preset。它将包括 es2015、es2016 和 es2017 预设。

另一件事：您在 .babelrc 文件和 webpack 加载器配置中设置预设。您只需将其设置在一处即可。

【讨论】：