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 和 Babel 网站上的设置页面上阅读了一些问题，但我无法使其正常工作。

谁能告诉我如何正确处理这个问题？谢谢

Answer 1

该语法是未来的实验提议语法，它不是 es2015 或 react 的一部分，因此您需要启用它。

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

并添加

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

与您现有的 presets.

并列 .babelrc

或者：

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

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

Answer 2

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

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

Answer 3

作为旁注，一些文本编辑器（在我的例子中是 Mac 注释）会将 ... 收缩为一个 elepsis 实体，这将无法通过验证，所以也要注意这一点。 .

Browserify，Babel 6，Gulp - 传播运算符上的意外标记

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

javascript

gulp

ecmascript-6

browserify

babeljs