Syntax Fehler von Spread-Attribut

Question

Ich verwende Yeoman Generator react-webpack. Ich versuche Ausbreitung Attribute in der main.js Komponente zu verwenden:

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; 

Ich erhalte immer diese Fehlermeldung:

ERROR in ./src/components/Main.js Modul Build fehlgeschlagen: Syntaxerror: C : /dev/react/reactwebpack/src/components/Main.js: unerwartetes 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) 

Was bin ich in der webpack oder babel configs fehlt? (Die Konfigurationsdateien sind die gleichen wie beim Generator).

Answer 1

Das ist eine ES7-Funktion. Sie benötigen die Voreinstellung transform-object-rest-spread für Babel.

Der Generator, den Sie verwenden, verwendet selbst this one. Es kommt mit einem .babelrc und das ist der Ort, den Sie das zusätzliche Plugin aktivieren müssen:

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

Es muss auch, indem Sie eine npm install --save babel-plugin-transform-object-rest-spread npm installiert und wahrscheinlich zusätzlich zu Ihrer package.json Datei werden.

Dieses Plugin ist auch in der stage2-Voreinstellung von babel enthalten (babel-preset-stage-2 ist der vollständige npm-Paketname).