babel-preset-es2015 编译解构赋值语法失败

Question

我正在使用 babel 编译一些 es6 代码，当我尝试解构赋值时，它适用于数组，但不适用于对象解构。问题代码如下。

test(){
  var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
  console.log(a);
  console.log(rest);
}

错误日志：

ERROR in ./src/js/index.js
Module build failed: SyntaxError: Unexpected token (11:13)

   9 | test(){
  10 | 
> 11 |   var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
     |              ^
  12 | 
  13 |   console.log(a);
  14 |   console.log(rest);

 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/js/index.js
webpack: Failed to compile.

我的webpack.config.js

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

module.exports = { 
  entry: "./src/js/index.js",
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/dist',
    filename: "bundle.js"
  },  

  module:{
    loaders: [
      {   
        test: /\.js?$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query:{
          presets:['react', 'es2015']
        },
      },  
      {   
        test: /\.css$/,
        loader: 'style-loader!css-loader',
      }   
    ]   
  },  

}

有人解决过同样的问题吗？希望对你有帮助，非常感谢。

Answer 1

es2015不包含spread属性，可以加插件改造

看看这个 link 并将这个预设添加到您的预设中属性

Answer 2

在终端

上按照运行命令安装babel-preset-env

npm install babel-preset-env --save-dev

然后在你的项目中创建.babelrc 文件并写入以下内容JSON

{
  "presets": ["env"]
}

有关更多信息，请关注以下 link babel-preset-env

babel-preset-es2015 编译解构赋值语法失败

babel-preset-es2015 Failed to compile destructuring assignment syntax

destructuring

variable-assignment