javascript - standalone - babelify

Browserify, Babel 6, Gulp: token inesperado en el operador de propagación

Question

Estoy tratando de hacer que mi Browserify / Babelify / Gulp funcione en mi proyecto, pero no tomará el operador de propagación.

Recibí este error de mi gulpfile:

[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]

Este es mi 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'']);

Intenté crear un archivo .babelrc, pero hace lo mismo. Y mi script funciona cuando elimino el operador de propagación.

Este es el archivo donde se produce el token Inesperado (bastante simple).

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;

  }
}

No sé qué no funciona en esto, leí algunos problemas en Github y la página de configuración en el sitio web de Babel, pero no puedo hacer que funcione correctamente.

¿Alguien puede mostrarme cómo manejar esto correctamente? Gracias

Answer 1

Esa sintaxis es una sintaxis experimental propuesta para el futuro, no es parte de es2015 ni react por lo que deberá habilitarla.

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

y añadir

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

en .babelrc junto con tus presets existentes.

Alternativamente:

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

y use stage-3 en sus presets para habilitar todas las funciones experimentales de stage-3.

Answer 2

Solo como una nota al margen, algunos editores de texto (en mi caso, Mac Notes) se contraerán ... en una entidad elepsis, que fallará la validación, así que tenga en cuenta eso también ...

Answer 3

Tuve el mismo problema, instalé el complemento de la etapa 2 y modifiqué mi archivo package.json, que se ve a continuación

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