Javascript Browserify、Babel 6、Gulp - 点差运算符上的意外令牌
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33745118/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Browserify, Babel 6, Gulp - Unexpected token on spread operator
提问by Mike Boutin
I'm trying to get my Browserify/Babelify/Gulp working in my project, but it won't take the spread operator.
我试图让我的 Browserify/Babelify/Gulp 在我的项目中工作，但它不会采用传播运算符。
I got this error from my gulpfile:
我从我的 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
这是我的 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.
我试图创建一个 .babelrc 文件，但它做同样的事情。当我删除传播运算符时，我的脚本可以工作。
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.
我不知道什么不起作用，我在 Github 和 Babel 网站上的设置页面上阅读了一些问题，但我无法使其正常工作。
Can anyone show me how to handle this correctly? Thank you
谁能告诉我如何正确处理这个问题？谢谢
回答by loganfsmyth
That syntax is an experimental proposed syntax for the future, it is not part of es2015or reactso you'll need to enable it.
这句法是未来的一个实验提出的语法，它不是一部分es2015或者react所以你需要启用它。
npm install --save-dev babel-plugin-transform-object-rest-spread
and add
并添加
"plugins": ["transform-object-rest-spread"]
into .babelrcalongside your existing presets.
为.babelrc在保留现有presets。
Alternatively:
或者：
npm install --save-dev babel-preset-stage-3
and use stage-3in your presets to enable all stage-3 experimental functionality.
并stage-3在您的预设中使用以启用所有第 3 阶段实验功能。
回答by Devnegikec
I had the same issue, installed stage-2 plugin and modified my package.json file, which looks like below
我遇到了同样的问题，安装了 stage-2 插件并修改了我的 package.json 文件，如下所示
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
}
回答by user1775718
Just as a side note, some text editors (in my case Mac Notes) will contract ...into an elepsis entity, which will fail validation, so be aware of that too...
...顺便提一下，一些文本编辑器（在我的例子中是 Mac Notes）会收缩成一个 elepsis 实体，这将无法通过验证，所以也要注意这一点......
