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

75

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

Mike Boutin
quelle

Antworten:

167

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.

loganfsmyth
quelle
@ MikeBoutin loganfsmyth Könnten Sie bitte angeben, wo es als Voreinstellung angegeben werden soll? Ich habe das gleiche Problem, obwohl ich babelify via cli benutze. Danke
Battle_Slug
Über CLI benötigen Sie eine .babelrc-Datei und die Voreinstellungen befinden sich auf der Plugins-Seite auf der babeljs-Website
Mike Boutin
2
Derzeit ist es Stufe 3! : D
Kirk Strobeck
npm install --save-dev babel-preset-stage-3 und presets: ["stage-3"]tat es für mich.
Theisof
21

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"
    ]
  }
Devnegikec
quelle
3

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 ...

user1775718
quelle
Das ist nicht mein Texteditor. Es ist nur irgendwo, wo ich gelegentlich Codeblöcke ablege. : D
user1775718
2
Es ist erwähnenswert, dass verschiedene Produkte, einschließlich Microsoft-Produkte und Dinge wie Slack, häufig ihre eigenen speziellen Formatierungszeichen (die oft ausgeblendet sind) einfügen und / oder bestimmte Zeichen für das Erscheinungsbild konvertieren. Das kann sehr schwierig zu erkennen sein und Probleme verursachen ...
user1775718