gulp+gulp-better-rollup+rollup搭建ES6开发环境Gulp就不多说了。常用的js模块打包工具主要有webpack、rollup和browserify。Gulp通常需要使用这三者之一来合并和打包ES6模块代码来构建ES6开发环境。因此，Gulp搭建ES6开发环境的方案有很多，例如：webpack-stream、rollup-stream、browserify等，本文介绍使用gulp-better-rollup的搭建过程。gulp-better-rollup支持将rollup更深入地集成到Gulps管道链中。GitHub地址：https://github.com/JofunLiang/gulp-translation-es6-demo搭建基本的ES6语法翻译环境首先安装gulp工具，命令如下：$npminstall--save-devgulpinstallgulp-better-rollup插件，因为gulp-better-rollup需要rollup作为依赖，所以还要安装rollup模块和rollup-plugin-babel（rollup和babel之间的无缝集成插件）：$npminstall--save-devgulp-better-rolluprolluprollup-plugin-babel安装babel核心插件：$npminstall--save-dev@babel/core@babel/preset-env安装完成后配置.babelrc文件和gulpfile。js文件，并把这两个文件放在项目根目录下。创建一个新的.babelrc配置文件如下：{"presets":[["@babel/env",{"targets":{"browsers":"last2versions,>1%,ie>=9"},"modules":false}]]}创建一个新的gulpfile.js文件如下：constgulp=require("gulp");constrollup=require("gulp-better-rollup");constbabel=require("rollup-plugin-babel");gulp.task("babel",()=>{returngulp.src("src/**/*.js").pipe(rollup({插件:[babel()]},{格式:"iife"})).pipe(gulp.dest("dist"))})gulp.task("watch",()=>{gulp.watch("src/**/*.js",gulp.series("babel"))})gulp.task("default",gulp.series(["babel","watch"]))使用ES6语法创建一个新的src目录下的js文件，然后运行gulp默认任务，检查dist文件是否编译成功。使用兼容上述构建过程的polyfill，成功将ES6语法翻译成ES5语法，但只是转换后的语法，新的API（如：Set、Map、Promise等）还没有翻译。关于polyfill兼容性，可以直接在页面中导入ployfill.js或ployfill.min.js文件。这种方法比较简单，本文不再赘述。下面是构建中的实现方法。安装@babel/plugin-transform-runtime、@babel/runtime-corejs2和core-js@2（注意：core-js的版本要对应@babel/runtime的版本，如：@babel/runtime-corejs2对应于core-js@2)。@babel/plugin-transform-runtime的作用主要是避免全局变量的污染和编译输出的重复。@babel/runtime（这里是@babel/runtime-corejs2）将运行时编译实现到你的构建中。$npminstall--save-dev@babel/plugin-transform-runtime@babel/runtime-corejs2core-js@2修改.babelrc文件：{"presets":[["@babel/env",{"targets":{"browsers":"last2versions,>1%,ie>=9"},"modules":false}]],"plugins":[["@babel/plugin-transform-runtime",{"corejs":2}]]}同时修改gulpfile.js文件，配置rollup-plugin-babel的runtimeHelpers属性如下：constgulp=require("gulp");constrollup=require("gulp-better-rollup");constbabel=require("rollup-plugin-babel");gulp.task("babel",()=>{returngulp.src("src/**/*.js").pipe(rollup({插件:[babel({runtimeHelpers:true})]},{format:"iife"})).pipe(gulp.dest("dist"))})gulp.task("watch",()=>{gulp.watch("src/**/*.js",gulp.series("babel"))})gulp.task("default",gulp.series(["babel","watch"]))然后安装rollup-plugin-node-resolve和rollup-pluginn-commonjs，这两个插件的主要功能是在node_modules下注入基于commonjs模块标准的模块代码。这里的主要功能是加载polyfill模块。$npminstall--save-devrollup-plugin-node-resolverollup-plugin-commonjs修改gulpfile.js文件如下：constgulp=require("gulp");constrollup=require("gulp-better-rollup");constbabel=require("rollup-plugin-babel");constresolve=require("rollup-plugin-node-resolve");constcommonjs=require("rollup-plugin-commonjs");gulp.task("babel",()=>{returngulp.src("src/**/*.js").pipe(rollup({plugins:[commonjs(),resolve(),babel({runtimeHelpers:true})]},{format:"iife"})).pipe(gulp.dest("dist"))})gulp.task("watch",()=>{gulp.watch("src/**/*.js",gulp.series("babel"))})gulp.task("default",gulp.series(["babel","watch"]))使用sourcemaps和compression注意压缩使用rollup-plugin-uglify插件，为了提高打包速度，我们把模块文件放在src/js/modules文件夹下，改gulp.src("src/js/*.js")togulp.src("src/js/*.js")只打包主文件，不打包依赖模块。安装gulp-sourcemaps和rollup-plugin-uglify插件：npminstall--save-devgulp-sourcemapsrollup-plugin-uglify修改gulpfile.js文件如下：constgulp=require("gulp");constrollup=require("gulp-better-rollup");constbabel=require("rollup-plugin-babel");constresolve=require("rollup-plugin-node-resolve");constcommonjs=require("rollup-plugin-commonjs");constuglify=require("rollup-plugin-uglify");constsourcemaps=require("gulp-sourcemaps");gulp.task("babel",()=>{returngulp.src("src/js/*.js").pipe(sourcemaps.init()).pipe(rollup({plugins:[commonjs(),resolve(),babel({runtimeHelpers:true}),uglify.uglify()]},{格式：“iife”})).pipe(sourcemaps.write('./')).pipe(gulp.dest("dist/js"))})gulp.task("watch",()=>{gulp.watch("src/**/*.js",gulp.series("babel"))})gulp.task("default",gulp.series(["babel","watch"]))
