Question

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

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

在终端

上运行以下命令安装babel-preset-env

{
  "presets": ["env"]
}

然后在项目中创建.babelrc文件并编写以下JSON

{{1}}

有关更多信息，请点击以下链接 babel-preset-env

Answer 2

es2015不包含点差属性，你可以添加一个插件来转换它们

查看此link并将此预设添加到预设属性

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

2 个答案: