Browserify,Babel 6,Gulp-点差运算符上的意外令牌


75

我正在尝试使我的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和Babel网站上的设置页面上读了一些问题,但我无法使其正常运行。

谁能告诉我如何正确处理此问题?谢谢

Answers:


167

这句法是未来的一个实验提出的语法,它不是一部分es2015或者react所以你需要启用它。

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

并添加

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

.babelrc在保留现有presets

或者:

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

和使用 stage-3在您的预设中以启用所有第3阶段实验功能。


@MikeBoutin loganfsmyth您能否指定将其指定为预设的位置?我有同样的问题,尽管我通过cli使用babelify。谢谢
Battle_Slug 2015年

通过CLI,您需要一个.babelrc文件,这些预设位于babeljs网站上的插件页面中
Mike Boutin

2
目前处于第3阶段!:D
Kirk Strobeck '16

npm install --save-dev babel-preset-stage-3 presets: ["stage-3"]为我做。
theisof

21

我遇到了同样的问题,安装了Stage-2插件并修改了package.json文件,如下所示

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

3

就像一个旁注,一些文本编辑器(在我的情况下为Mac Notes)将收缩...为elepsis实体,这将使验证失败,因此也请注意这一点...


那不是我的文本编辑器。这只是我偶尔转储代码块的地方。:D
user1775718 '16

2
值得指出的是,包括Microsoft产品和Slack之类的各种产品通常会插入自己的特殊格式字符(通常是隐藏的)和/或将某些字符转换为外观。这可能真的很棘手,并可能导致您出现问题...
user1775718
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.