ReactJS:webpack:无法使用扩展语法进行编译 [英] ReactJS: webpack: Failed to compile with spread syntax

问题描述

我想告诉你我的问题.

我的环境:

Node: 8.9.1
npm: 5.6.0
yarn: 1.3.2

package.json

package.json

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "copy-webpack-plugin": "^4.1.1",
...
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.2"
  },

webpack.config.js

webpack.config.js

...
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              presets: ['react', 'env']
            }
          }
        },
...

它总是编译失败，例如{...}

./src/flux/components/BaseComponent.js中的

ERROR模块构建失败: 语法错误:D:/APPs/src/flux/components/BaseComponent.js:意外 令牌(36:29)

ERROR in ./src/flux/components/BaseComponent.js Module build failed: SyntaxError: D:/APPs/src/flux/components/BaseComponent.js: Unexpected token (36:29)

 34 |     let {search} = this.state;
  35 |     search.includeActive = !search.includeActive;
> 36 |     this.setState({category : {...this.state.category, name : name}});

     |

但是，在没有webpack的情况下，它可以很好地工作. 请帮我解决这个问题！ 非常感谢大家！ :)

However, It work well without webpack. Please, help me to solve this problem! Thank you so much to all of you! :)

推荐答案

要使用传播语法，您需要配置babel loader，您有两个选择

In order to use spread syntax, you need to configure you babel loader, You have a couple of option

首先:使用插件"transform-object-rest-spread"

使用

npm install --save-dev babel-plugin-transform-object-rest-spread

并使用它

   options: {
       cacheDirectory: true,
       presets: ['react', 'env']
       plugins: ['transform-object-rest-spread']
   }

第二:使用stage-0预设，使用

npm install --save-dev babel-preset-stage-0

并像使用它

options: {
   cacheDirectory: true,
   presets: ['react', 'env', 'stage-0']
}

检查 此babel文档

Check this babel-documentation

这篇关于ReactJS:webpack:无法使用扩展语法进行编译的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！