Browserify，Babel 6，Gulp - 传播操作符上的意外令牌 [英] Browserify, Babel 6, Gulp - Unexpected token on spread operator

问题描述

我试图让我的Browserify / Babelify / Gulp在我的项目中工作，但它不会采取传播操作员。

我的gulpfile中有这个错误：

  [SyntaxError： /Users/mboutin2/Desktop/Todo-tutorial/src/reducers/grocery-list-reducers.js：解析文件时出现意外的令牌（16：8）：/ 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错误）{
 console.error（err）; 
 this.emit（'end'）; 
}）
 .pipe（source（'app.min.js'） ）
 .pipe（buffer（））
 .pipe（sourcemaps.init（{loadMaps：true}））
 .pipe（uglify（））
 .pipe（sourcemaps。写（'./'））
 .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： '肉'} 
] 
}; 
 
 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} 
] 
}; 
 
默认值：
返回状态; 
 
} 
} 
  

我不知道是什么在这里工作，我在Github上看到一些问题和Babel网站上的设置页面，但是我无法使其正常工作。

任何人都可以告诉我如何正确处理？谢谢

解决方案

这个语法是未来的一个实验建议语法，它不是 es2015的一部分或反应，所以你需要启用它。

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

并添加

 plugins：[transform-object-rest-spread] 
  

与现有的预设。

或者：

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

，并在您的预设中使用 stage-2 2个实验功能。

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

解决方案

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

alongside your existing presets.

Alternatively:

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

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

这篇关于Browserify，Babel 6，Gulp - 传播操作符上的意外令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！