为什么我的 babel polyfill 不起作用？答案

【问题标题】：Why does my babel poyfill is not working?为什么我的 babel polyfill 不起作用？
【发布时间】：2017-02-12 05:37:20
【问题描述】：

下面是我的 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 吗？

【问题讨论】：

我不确定您的任何依赖项是否包含该语法所需的class properties transform。尝试将其添加到您的依赖项/babel 配置中

标签： javascript reactjs ecmascript-6 webpack babel-polyfill

【解决方案1】：

您需要使用额外的 Babel 插件来支持类属性：transform-class-properties（或者，安装 stage-1 或 stage-2 预设）。

【讨论】：