Browserify, Babel 6, Gulp - Unexpected token on spread operator

问题

I\'m trying to get my Browserify/Babelify/Gulp working in my project, but it won\'t take the spread operator.

I got this error from my 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]

This is my 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\']);

I tried to create a .babelrc file, but it do the same thing. And my script works when i delete the spread operator.

This is the file where the Unexpected token occurs (quite 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;

  }
}

I don\'t know what doesn\'t work in this, i read some issues on Github and the setup page on Babel website, but i can\'t make it work correctly.

Can anyone show me how to handle this correctly? Thank you

回答1:

That syntax is an experimental proposed syntax for the future, it is not part of es2015 or react so you'll need to enable it.

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

and add

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

into .babelrc alongside your existing presets.

Alternatively:

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

and use stage-3 in your presets to enable all stage-3 experimental functionality.

回答2:

I had the same issue, installed stage-2 plugin and modified my package.json file, which looks like below

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

回答3:

Just as a side note, some text editors (in my case Mac Notes) will contract ... into an elepsis entity, which will fail validation, so be aware of that too...

来源：https://stackoverflow.com/questions/33745118/browserify-babel-6-gulp-unexpected-token-on-spread-operator

标签

javascript

gulp

ecmascript-6

browserify

babeljs