問題描述
我正在嘗試讓我的 Browserify/Babelify/Gulp 在我的項目中工作，但它不會使用擴展運算符.
I'm trying to get my Browserify/Babelify/Gulp working in my project, but it won't take the spread operator.
我從我的 gulpfile 中得到了這個錯誤:
I got this error from my 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
This is my 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 文件，但它做同樣的事情.當我刪除傳播運算符時，我的腳本就可以工作了.
I tried to create a .babelrc file, but it do the same thing. And my script works when i delete the spread operator.
這是出現 Unexpected token 的文件(很簡單).
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;
}
}
我不知道這有什么問題，我在 Github 和 Babel 網站上的設置頁面上閱讀了一些問題，但我無法使其正常工作.
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.
誰能告訴我如何正確處理這個問題?謝謝
Can anyone show me how to handle this correctly? Thank you
推薦答案
該語法是未來的實驗性提議語法，它不屬于 es2015 或 react所以你需要啟用它.
That syntax is an experimental proposed syntax for the future, it is not part of es2015 or react so you'll need to enable it.
npm install --save-dev babel-plugin-transform-object-rest-spread
并添加
"plugins": ["transform-object-rest-spread"]
進入 .babelrc 以及你現有的 presets.
into .babelrc alongside your existing presets.
或者:
npm install --save-dev babel-preset-stage-3
并在您的預設中使用 stage-3 來啟用所有 stage-3 實驗功能.
and use stage-3 in your presets to enable all stage-3 experimental functionality.
這篇關于Browserify，Babel 6，Gulp - 傳播運算符上的意外令牌的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！