浏览器化、Babel 6、Gulp - 扩展运算符出现意外标记

Question

我正在尝试让Browserify/Babelify/Gulp在我的项目中工作，但它无法使用spread运算符。

我的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 文件，但它仍然出现相同的问题。当我删除这个 spread 运算符时，我的脚本正常运行。

这是发生意外标记的文件（非常简单）。

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网站上的设置页面，但我无法正确运行它。

有人可以向我展示如何正确处理吗？谢谢

- Mike Boutin

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在您的预设中启用所有第三阶段实验功能。

- loganfsmyth

---

@MikeBoutin loganfsmyth，你能具体说明在哪里指定它作为预设吗？我也遇到了同样的问题，尽管我是通过cli使用babelify。谢谢。 - Battle_Slug

通过CLI，您需要一个.babelrc文件，并且预设在babeljs网站的插件页面上。 - Mike Boutin

目前它是第三阶段！ :D - Kirk Strobeck

npm install --save-dev babel-preset-stage-3 和 presets: ["stage-3"] 对我来说已经足够了。 - theisof

Answer 2

我遇到了同样的问题，安装了stage-2插件并修改了我的package.json文件，它看起来像下面这样

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

- Devnegikec

Answer 3

顺带一提，一些文本编辑器（例如我的 Mac Notes）将 ... 转换为省略号实体，这将导致验证失败，所以请注意此问题...

- user1775718

---

那不是我的文本编辑器。它只是我偶尔倾倒代码块的地方。 :D - user1775718

值得指出的是，包括微软产品和类似 Slack 的各种产品通常会插入自己特殊的格式字符（通常是隐藏的）和/或转换某些字符以获得更好的显示效果。这可能非常棘手，很难发现并可能导致问题。 - user1775718