Question

我正在使用yeoman generator react-webpack。我试图在Main.js组件中使用spread属性：

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：意外的令牌（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)

我在网络包或babel配置中缺少什么？（配置文件与生成器的文件相同）。

Answer 1

这是ES7的一项功能。你需要为babel预设transform-object-rest-spread。

您正在使用的生成器本身使用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包名称。）

spread属性的语法错误

1 个答案: