Browserify,Babel 6,Gulp - 传播运算符上的意外标记
Browserify, Babel 6, Gulp - Unexpected token on spread operator
我正在尝试让我的 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 网站上的设置页面上阅读了一些问题,但我无法使其正常工作。
谁能告诉我如何正确处理这个问题?谢谢
该语法是未来的实验提议语法,它不是 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 阶段实验性功能。
我遇到了同样的问题,安装了 stage-2 插件并修改了我的 package.json 文件,如下所示
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
}
作为旁注,一些文本编辑器(在我的例子中是 Mac 注释)会将 ...
收缩为一个 elepsis 实体,这将无法通过验证,所以也要注意这一点。 .
我正在尝试让我的 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 网站上的设置页面上阅读了一些问题,但我无法使其正常工作。
谁能告诉我如何正确处理这个问题?谢谢
该语法是未来的实验提议语法,它不是 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 阶段实验性功能。
我遇到了同样的问题,安装了 stage-2 插件并修改了我的 package.json 文件,如下所示
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
}
作为旁注,一些文本编辑器(在我的例子中是 Mac 注释)会将 ...
收缩为一个 elepsis 实体,这将无法通过验证,所以也要注意这一点。 .