Browserify, Babel 6, Gulp - Unerwartetes Token beim Spread-Operator

Ich versuche, mein Browserify / Babelify / Gulp in meinem Projekt zum Laufen zu bringen, aber der Spread-Operator wird nicht benötigt.

Ich habe diesen Fehler von meinem Gulpfile bekommen:

[SyntaxError: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js: Unexpected token (16:8) while parsing file: /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js]

Das ist meine gulpfile.js

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var buffer = require('vinyl-buffer');
var babelify = require('babelify');

gulp.task('build', function () {
  return browserify({entries: './src/client/app.js', extensions: ['.js'], debug: true})
    .transform(babelify, {presets: ['es2015', 'react']})
    .bundle()
    .on('error', function (err) {
      console.error(err);
      this.emit('end');
    })
    .pipe(source('app.min.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(uglify())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./public/js'));
});

gulp.task('default', ['build']);

Ich habe versucht, eine .babelrc-Datei zu erstellen, aber es funktioniert genauso. Und mein Skript funktioniert, wenn ich den Spread-Operator lösche.

Dies ist die Datei, in der das unerwartete Token auftritt (ganz einfach).

import utils from '../utils/consts';

const initialState = {
  itemList: [
    {name: 'Apple', type: 'Fruit'},
    {name: 'Beef', type: 'Meat'}
  ]
};

export function groceryList(state = initialState, action = {}) {

  switch(action.type) {

    case utils.ACTIONS.ITEM_SUBMIT:
      return {
        ...state,
        itemList: [
          ...state.itemList,
          {name: action.name, type: action.itemType}
        ]
      };

    default:
      return state;

  }
}

Ich weiß nicht, was hier nicht funktioniert. Ich habe einige Probleme auf Github und der Setup-Seite auf der Babel-Website gelesen, aber ich kann es nicht richtig machen.

Kann mir jemand zeigen, wie man damit richtig umgeht? Vielen Dank

Diese Syntax ist eine experimentell vorgeschlagene Syntax für die Zukunft. Sie ist nicht Teil von es2015oder reactSie müssen sie aktivieren.

npm install --save-dev babel-plugin-transform-object-rest-spread

und hinzufügen

"plugins": ["transform-object-rest-spread"]

in .babelrcneben Ihrem bestehenden presets.

Alternative:

npm install --save-dev babel-preset-stage-3

und stage-3in Ihren Voreinstellungen verwenden, um alle experimentellen Funktionen der Stufe 3 zu aktivieren.

Ich hatte das gleiche Problem, installierte das Stage-2-Plugin und änderte meine package.json-Datei, die wie folgt aussieht

"babel": {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ]
  }

Nur als Randnotiz werden einige Texteditoren (in meinem Fall Mac Notes) ...zu einer elepsis-Entität zusammengezogen, die die Validierung nicht besteht. Beachten Sie dies auch ...