模塊構建失敗：SyntaxError: Unexpected token (10:40) 反應固定數據表

Question

我們有一個帶有這個OurController項目的OurController應用程序。 OurController工作正常。 從示例中添加以下代碼會破壞整個應用程序，瀏覽器中不會呈現任何頁面：

const TextCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);

文件的開頭是

var FixedDataTable = require('fixed-data-table');
var React = require('react');

const Table = FixedDataTable.Table;
const Column = FixedDataTable.Column;
const Cell = FixedDataTable.Cell;

const TextCell = ({rowIndex, data, col, ...props}) => (
  <Cell {...props}>
    {data.getObjectAt(rowIndex)[col]}
  </Cell>
);

class OurDataTable extends React.Component {

一旦我評論出來，一切都很好，但我想盡可能地遵循教程

錯誤就像

Module build failed: SyntaxError: Unexpected token (10:40)
const TextCell = ({rowIndex, data, col, {issue is here}...props}) => (

帶有指向...props的箭頭，似乎它不理解... （箭頭指向第一個點）

該指南是fixed-data-table這個片段：

https://github.com/facebook/fixed-data-table/blob/master/examples/ObjectDataExample.js

我知道整個文件通常很重要，但我保證代碼在添加TextCell之前按預期工作。 我們有一些 babel loader 但我沒有看到固定數據表要求更多：

var webpack = require('webpack');

module.exports = {
  //devtool: 'inline-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './client/main.js'
  ],
  output: {
    path: require("path").resolve('./public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015', 'react-hmre']
        }
      }
    ]
  }
};

一個快速服務器配置同樣並且正在工作（熱重載等）

我們使用了 ES6 並且像這樣工作

class OurDataTable extends React.Component {

等等

Answer 1

不確定，但我認為，問題在於擴展運算符... ，您需要配置Babel以使用transform-object-rest-spread plugin 。

按照這個鏈接安裝它： https : //babeljs.io/docs/plugins/transform-object-rest-spread/