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自動生成的