Rails Webpacker 和 stage-2 类转换属性不起作用

Question

我正在一个新的 Rails 应用程序上试用 Webpacker 以熟悉它，但我无法让它编译我的 javascript 代码。

代码如下：

import React, { Component, PropTypes } from 'react'
import DayPicker, { DateUtils } from 'react-day-picker'
import 'react-day-picker/lib/style.css'

export default class Example extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedDays: []
    }
  }

  handleDayClick = (day, selected) => {
    console.log(day)
  }

  render() {
    return (
      <p>Test</p>
    )
  }
}

20:05:21 hot.1  | ERROR in ./app/javascript/packs/components/example/example.jsx
20:05:21 hot.1  | Module build failed: SyntaxError: Missing class properties transform.
20:05:21 hot.1  |
20:05:21 hot.1  |   11 |   }
20:05:21 hot.1  |   12 |
20:05:21 hot.1  | > 13 |   handleDayClick = (day, selected) => {
20:05:21 hot.1  |      |   ^

---

这是一个全新的 Rails 应用程序，使用来自 github 的最新 Webpacker gem。

我的.babelrc：

{
  "presets": ["env", "es2015", "react", "stage-2"]
}

我的 devDependencies 是：

"devDependencies": {
  "babel-preset-es2015": "^6.24.0",
  "babel-preset-stage-2": "^6.22.0",
  "webpack-dev-server": "^2.4.2"
}

根据这个 Babel REPL 链接，这应该可以工作。 https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&experimental=true&loose=false&spec=false&code=class%20PostInfo%20extends%20React.Component%20%7B%0A%09handleOptionsButtonClick%20%3D%20(e)%20%3D%3E%20%7B%0A%20%20%20%20this.setState(%7BshowOptionsModal%3A%20true%7D)%3B%0A%20%20%7D%0A%7D

有什么想法吗？

Answer 1

为了解决这个问题，我必须将预设添加到各个加载器文件中，特别是。

// config/webpack/loaders/babel.js
module.exports = {
  test: /\.js(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      'es2015',
      'stage-2'
    ]
  }
}

// config/webpack/loaders/react.js
module.exports = {
  test: /\.(js|jsx)?(\.erb)?$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      'es2015',
      'react',
      'stage-2'
    ]
  }
}

现在我可以使用漂亮的速记箭头类函数了。

Answer 2

您的评论最有启发性：这是一个类中的方法声明；不应该有等号或粗箭头。它应该是这样的：

handleDayClick (day, selected) {
    console.log(day)
}

看看constructor 和render 方法的外观；这就是反应组件中所有方法的外观。

天哪！