Question

我正在写React。我不想将es6编译为es5。浏览器已经支持es6。

似乎JS缩小并不那么成熟。但没关系。我只需要捆绑JS文件。

我想使用Object static methods功能。

webpack版本为3.10.0。

运行./node_modules/.bin/webpack -d时出现错误。

Hash: 84a44d953a9cf1e8e1f5
Version: webpack 3.10.0
Time: 257ms
                Asset     Size  Chunks             Chunk Names
./../public/bundle.js  3.53 kB       0  [emitted]  main
   [0] ./src/App.jsx 636 bytes {0} [built] [failed] [1 error]

ERROR in ./src/App.jsx
Module build failed: SyntaxError: Unexpected token (7:8)

   5 | class App extends React.Component {
   6 | 
>  7 |   state = {
     |         ^
   8 |     name: "React"
   9 |   }
  10 |

这里是代码：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {

  state = {
    name: "React"
  }

  render(){
    return(
      <div>Hello, I'm {this.state.name}</div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById("main"))

这是webpack配置：

var webpack = require('webpack')

module.exports = {
  entry: './src/App.jsx',
  output: {
    filename: './../public/bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query: {
          presets: ['react'],
        }
      }
    ]
  }
}

这是否意味着webpack 3.0还不支持es6？或者我错过了什么？

谢谢你的时间！

更新：

根据@Xlee，webpack.config.js应为：

...
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        query: {
          plugins: ['transform-class-properties'],
          presets: ['react'],
        }
      }
    ]
  }
...

Answer 1

我想使用Object静态方法功能。

实际上你想要使用的功能不是ES6，它被称为class fields proposal。

只需删除一个带有npm install --save-dev babel-plugin-transform-class-properties的新babel插件，然后相应地更新babelrc（推荐）/ webpack（babel loader）。

此处的详细信息：https://babeljs.io/docs/plugins/transform-class-properties/#top

Answer 2

你应该在构造函数中传递你的状态：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "React"
        }
    }
}

webpack只是捆绑es6语法

2 个答案: