Browserify, Babel 6, Gulp - Mã thông báo không mong muốn trên toán tử spread

Question

Tôi đang cố gắng để Browserify/Babelify/Gulp làm việc trong dự án của mình, nhưng nó sẽ không lấy toán tử lây lan.

Tôi đã nhận lỗi này từ gulpfile tôi:

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

Đây là gulpfile.js tôi

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

tôi đã cố gắng để tạo ra một tập tin .babelrc, nhưng nó làm điều tương tự. Và kịch bản của tôi hoạt động khi tôi xóa toán tử spread.

Đây là tệp xảy ra mã thông báo không mong muốn (khá đơn giản).

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; 

    } 
} 

Tôi không biết điều gì không hiệu quả, tôi đã đọc một số vấn đề trên Github và trang thiết lập trên trang web Babel, nhưng tôi không thể làm cho nó hoạt động chính xác.

Có ai có thể chỉ cho tôi cách xử lý chính xác không? Cảm ơn bạn

Answer 1

Cú pháp đó là cú pháp được đề xuất thử nghiệm cho tương lai, cú pháp này không phải là một phần của es2015 hoặc react vì vậy bạn sẽ cần phải bật cú pháp đó.

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

và thêm

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

cùng với hiện tại của bạn presets.

Hoặc:

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

và sử dụng stage-3 trong cài đặt trước của bạn để cho phép tất cả các giai đoạn-3 chức năng thực nghiệm.

Answer 2

tôi đã cùng một vấn đề, cài đặt sân khấu-2 plugin và chỉnh sửa tập tin package.json của tôi, trông giống như dưới đây

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

Answer 3

Cũng giống như một mặt lưu ý, một số soạn thảo văn bản (trong trường hợp của tôi Mac Notes) sẽ ký hợp đồng ... thành một thực thể elepsis, sẽ không xác thực được, vì vậy hãy lưu ý rằng ...