javascript - spread 属性的语法错误

Question

我正在使用 yeoman 生成器 react-webpack .我正在尝试在 Main.js 组件中使用传播属性:

require('normalize.css');
require('styles/App.css');

import React from 'react';

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

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

let yeomanImage = require('../images/yeoman.png');

class AppComponent extends React.Component {
  render() {
    return (
      <div className="index">
        <img src={yeomanImage} alt="Yeoman Generator" />
        <div className="notice">Please edit <code>src/components/Main.js</code> to get started!</div>
      </div>
    );
  }
}

AppComponent.defaultProps = {
};

export default AppComponent;

我一直收到这个错误:

./src/components/Main.js 中的错误模块构建失败:SyntaxError: C:/dev/react/reactwebpack/src/components/Main.js: 意外 token (8:41)

let yeomanImage = require('../images/yeoman.png');
const ImageCell = ({rowIndex, data, col, ...props}) => (
<ExampleImage src={data.getObjectAt(rowIndex)[col]}/>);

at Parser.pp.raise (C:\dev\react\react-webpack\node_modules\babylon\index.js:1378:13)

我在 webpack 或 babel 配置中缺少什么？ (配置文件与生成器的相同)。

Answer 1

这是 ES7 的一个特性。你需要 transform-object-rest-spread为 babel 预设。

您正在使用的生成器本身正在使用 this one .它带有 .babelrc这就是您需要启用额外插件的地方:

"plugins": ["...other plugin", "transform-object-rest-spread"]

它还需要安装 npm 并可能添加到您的 package.json通过执行 npm install --save babel-plugin-transform-object-rest-spread 文件.

该插件包含在 babel 的 stage2 中也预设了(babel-preset-stage-2 是完整的 npm 包名称)。