Brunch.ioとReactとBabelの構文エラー

Question

私はBrunch.ioを初めて使って新しいReactアプリケーションを作成しています。 それはすべて正常に動作しているようですが、状態を設定したり、矢印機能を使用しようとすると、構文エラーが発生します。私の推測では、私はバベルのプリセットや別の設定がないということです。

誰かがこの欠けている部分が何であるか何か助けたり考えたりできますか？

コンソールエラー：

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; 

コンポーネント/ 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は、クラスのプロパティです。これは提案された進化です。あなたはBabelに、babel-plugin-transform-class-properties