为什么我的 babel polyfill 不工作？

Question

下面是我的 webpack 配置：

var Path = require('path');

module.exports = {
  entry: {
        create: ['babel-polyfill', Path.resolve(__dirname, "./src/create.js")],
  }, 
  output: {
    path: Path.resolve(__dirname, "../../public/crm/js/"),
    filename: '[name].js'
  },
  module: {
    loaders: [
        { 
            test: /\.js$/, 
            exclude: /node_modules/, 
            loader: 'babel-loader?presets[]=es2015,presets[]=react'
        }
    ]
 }
}

我也 npm 安装了这些模块：

"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-polyfill": "^6.16.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-react": "^6.16.0"

这是我的 create.js 文件：

import "babel-polyfill";
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Select extends Component {

   //some code

  onKeyDown = (e) => {
    const {values} = this.props
    const idx = values.indexOf(this.state.selection)
    if (e.keyCode === 38 && idx > 0) { /* up */
      this.setState({
        selection: values[idx - 1]
      })
    } else if (e.keyCode === 40 && idx < values.length -1) { /* down */
      this.setState({
        selection: values[idx + 1]
      })  
    }
    this.fireOnSelect()
  }

   //some code

}

这是我从控制台收到的错误消息：

ERROR in ./src/create.js
Module build failed: SyntaxError: Unexpected token (36:12)

  34 |   }
  35 |
> 36 |   onKeyDown = (e) => {
     |             ^
  37 |     const {values} = this.props
  38 |     const idx = values.indexOf(this.state.selection)
  39 |     if (e.keyCode === 38 && idx > 0)

我是不是做错了什么？我没有正确设置 babel polypill 吗？

Answer 1

您需要使用额外的 Babel 插件来支持 class 属性：transform-class-properties (alternatively, install the stage-1 or stage-2 预设）。

为什么我的 babel polyfill 不工作？

Why does my babel poyfill is not working?

javascript

ecmascript-6

reactjs

webpack

babel-polyfill