Brunch.io 出现 React 和 Babel 语法错误

Question

我是第一次使用 Brunch.io 来构建一个新的 React 应用程序。一切似乎都很好，但是当我尝试设置状态或使用箭头函数时，出现语法错误。我的猜测是我缺少 Babel 预设或其他配置。

有人可以帮忙或知道这个丢失的部分可能是什么吗？

控制台错误：

09:27:18 - error: Compiling of app/components/index.js failed. Error: SyntaxError: app/components/index.js: Unexpect
ed token (10:15)
      |      * @return {string}    formatted list of authors
      |      */
   >  |     getAuthors = (arr) => {
      |                ^
      |         if (arr) {
      |             return arr.join('\r\n');
      |         } else {

package.json

{
  "name": "brunch-app",
  "description": "Brunch.io application",
  "private": true,
  "author": "Brunch",
  "version": "0.0.1",
  "repository": "",
  "scripts": {
    "start": "brunch watch --server",
    "build": "brunch build --production"
  },
  "dependencies": {
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "auto-reload-brunch": "^2",
    "hmr-brunch": "^0.1",
    "babel-brunch": "~6.0.0",
    "babel-preset-latest": "^6",
    "babel-preset-react": "~6.22",
    "brunch": "^2",
    "clean-css-brunch": "^2",
    "uglify-js-brunch": "^2"
  }
}

早午餐-config.js:

exports.files = {
  javascripts: {
    joinTo: 'app.js'
  },
  stylesheets: {joinTo: 'app.css'}
};

exports.plugins = {
  babel: {presets: ['es2015', 'react']}
};

exports.hot = true;

components/index.js编译失败：

import React from 'react';

class Book extends React.Component {

    state = {
        authors: [],
        books: [],
    };

    getAuthors = (arr) => {
        if (arr) {
            return arr.join('\r\n');
        } else {
            return 'Unknown author';
        }
    };

    render() {

        return (
            <li>
                {book.authors && book.authors.map((author) => (
                    <span className='book-authors'>{author}</span>
                ))}
            </li>
        );
    }
}

export default Book;

Answer 1

getAuthors 是一个 class 属性。这是提议的演变，您可以让 Babel 使用 babel-plugin-transform-class-properties

转译它

Brunch.io 出现 React 和 Babel 语法错误

Brunch.io with React and Babel Syntax Error

reactjs

ecmascript-6

syntax-error

babeljs

brunch