Browserify、Babel 6、Gulp - スプレッドオペレータの予期しないトークン

Question

自分のプロジェクトでBrowserify/Babelify/Gulpを動作させようとしていますが、スプレッドオペレータは使用しません。

私は私の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] 

これは私の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']); 

である私は.babelrcファイルを作成しようとしましたが、それは同じことを行います。私のスクリプトは、スプレッド演算子を削除すると動作します。

これは、予期しないトークンが発生する（非常に単純な）ファイルです。

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; 

    } 
} 

私はこれでは動作しませんかわからない、私はバベルのウェブサイト上のGithubとセットアップページ上のいくつかの問題を読んで、私はそれが正常に動作することはできません。

これを正しく処理する方法を教えてもらえますか？

Answer 1

この構文は、実験的に提案された構文であり、es2015またはreactの一部ではないため、有効にする必要があります。

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

し、既存のpresetsと一緒

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

を追加します。また

：

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

、すべてのステージ3の実験的機能を有効にするために、あなたのプリセットでstage-3を使用しています。

Answer 2

私は同じ問題が、インストールの段階-2プラグインを持っていたし、ちょうどサイドノートとして

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

Answer 3

以下のように見える私のpackage.jsonファイル、（私の場合Macのノートで）いくつかのテキストエディタを変更妥当性検査に失敗すると、...がエリプシスエンティティになりますので、それにも注意してください。