Browserify, Babel 6, Gulp - Неожиданный токен на операторе распространения
Я пытаюсь заставить мой 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, но он делает то же самое. И мой script работает, когда я удаляю оператор спреда.
Это файл, в котором возникает Неожиданный токен (довольно простой).
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, но я не могу заставить его работать правильно.
Может ли кто-нибудь показать мне, как правильно это сделать? Спасибо вам
Ответы
Ответ 1
Этот синтаксис представляет собой экспериментальный предложенный синтаксис для будущего, он не является частью es2015
или react
, поэтому вам нужно включить его.
npm install --save-dev babel-plugin-transform-object-rest-spread
и добавьте
"plugins": ["transform-object-rest-spread"]
рядом с существующим presets
.
В качестве альтернативы:
npm install --save-dev babel-preset-stage-3
и используйте stage-3
в ваших пресетах, чтобы включить все экспериментальные функции этапа 3.
Ответ 2
У меня была та же проблема, был установлен плагин stage-2 и был изменен файл package.json, который выглядит ниже
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
}
Ответ 3
Как примечание, некоторые текстовые редакторы (в моем случае Mac Notes) заключают контракт ...
в элемент elepsis, который не будет проверять достоверность, поэтому имейте это в виду...