node 6.9.x已经支持99%的ES2015的特性,但是ES2017中的async和await,import是不支持,但是要想使用,则需要将ES2017的代码,降级.
网上很多例子,都是把代码降级到ES5,结果,就很难读了.其实只要降级到node 6.9.x支持的部分就可以了.像class,=>等就可以直接有了,这样降级后的代码,可读性依然非常好
下面配置如下:
第一步:安装全局库
npm install babel gulp -g
第二步:安装本地依赖库
npm install babel babel-core babel-runtime gulp-babel gulp gulp-plumber --save-dev
npm install --save-dev babel-preset-eslatest-node6 babel-plugin-transform-es2015-destructuring babel-plugin-transform-es2015-parameters babel-plugin-transform-object-rest-spread
npm install gulp-file-sync gulp-sourcemaps --save-dev
第三步:编写.babelrc
//----------------------------------------------------------
{
"presets": ["eslatest-node6"],
"plugins": [
]
}
---------------------------------------------------------------
第四步:gulpfile.babel.js
---------------------------------------------------------------
'use
strict';
import
gulp from 'gulp';
import
babel from 'gulp-babel';
import
sourcemaps from 'gulp-sourcemaps';
import
fileSync from 'gulp-file-sync';
import
plumber from 'gulp-plumber';
gulp.task('default',
() => {
gulp.src('lib/**/*.js')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(babel())
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/lib'));
});
gulp.task('static',
() => {
fileSync('static','build/lib/static', {recursive: true});
});
gulp.task('watch',
['default'], ()=>{
gulp.watch(['lib/**/*.js'], ['default']);
gulp.watch(['static/*.*'], ()=> {
fileSync('static','build/lib/static', {recursive: true});
});
});
---------------------------------------------------------------
最后 这里定义的代码,都是放到lib目录下面,而降级后的代码,则放到build/lib目录下的.build/lib是由gulp自动生成的