1.gulp配置:
var gulp = require('gulp') var fs = require("fs") var babelify = require('babelify') var browserify = require('browserify') var rename=require('gulp-rename') var uglifyjs = require('gulp-uglifyjs') gulp.task('es2015', () => { browserify("./src/main.js") .transform(["babelify", { babelrc: false, presets: ['es2015', 'es2016', 'es2017', 'stage-0'], plugins: ['transform-decorators-legacy'] }]) .bundle() .pipe(fs.createWriteStream("bundle.js")); }) gulp.task('uglifyjs',()=>{ gulp.src('./bundle.js') .pipe(uglifyjs()) .pipe(rename('bundle.min.js')) .pipe(gulp.dest('./dist')) }) gulp.task('default', () => { gulp.watch('./src/**/*.js', () => { gulp.run('es2015') }) })
这里编译es6的要点工具是babel和browserify,browserify是一个打包module模块的工具,能够将import之类的module打包进来到文件中。另外browserify还配置了babel模块来编译es6,这样就可以高度实现对es6的编译和打包。
前端工程师、程序员