使用gulp和bable实现实时编译ES6代码

这篇文章最初发表在我自己折腾的博客站点上：使用gulp和bable实现实时编译ES6代码，该博客用了一位前辈开源的源码，基于thinkjs和vuejs开发，欢迎大家来逛逛。

问题描述
> 项目开发中使用了一个大而全的java框架，框架集成了前后端，前端在这个框架的基础上开发jsp页面，并未做到前后端完全分离。现在我们有些js代码使用了ES6的语法，但后来遇到了IE兼容性的问题，又不得不把代码转换到ES5，ES6的模板字符串是多么好用呀。唉~

> ### 自己尝试过哪些方法
> 目前简单配置了下babel，用到ES6的源码放在一个目录src，babel转译之后的代码放到一个目录dist，但每次改代码后转换都得手工敲命令，也挺麻烦。所以想问下对webpack比较熟的朋友，能不能通过webpack配合babel实现代码的自动编译，也就是“热更新”。但这里需要注意的是，不是打包，只是一堆js文件转译为另一堆js文件。

这个问题我首先百度了下未果，然后在segmentfault上求助如何使用webpack将es6代码热更新为es5代码？（注意不是打包），得到一位前端开发者的提醒，于是自己动手弄了下实现我的需求。基本过程如下：

用npm初始化项目，并创建代码输入和输出目录
此过程略，初始化完成后，主要是生成package.json，用来管理依赖。
创建两个目录，比如一个src是源文件目录，编写的js都放在这个目录中，另一个是dist目录，也就是babel转译后的目录，页面中也引用这个目录中的文件。

安装gulp和bable工具
1. 安装gulp

npm install --g gulp 
npm install gulp --save-dev

2. 安装babel及相关插件

npm install -g babel-cli // 注意版本为6.xx
npm install babel-cli --save-dev
npm install babel-preset-env --save-dev //babel编译模板
npm install babel-plugin-transform-remove-strict-mode // 编译时移除全局严格模式

3. 安装gulp-babel插件，注意版本为7.xx，与babel版本有关，详细见[github](https://github.com/babel/gulp-babel)

npm install gulp-babel@7 --save-dev

4. 安装实时编译插件

npm install --save-dev gulp-watch

编写相应的配置文件
1. babel配置文件.babelrc
在项目根目录下新建该文件，并编写如下内容：

{
    "presets": [ [ "env", { "modules": false } ] ], // 貌似这里的modules为false才可以识别this，在浏览器环境中有用
    "plugins": ["transform-remove-strict-mode"]
}

2. gulp配置文件gulpfile.js

 1 var gulp = require("gulp"),
 2   babel = require("gulp-babel"),
 3   watch = require("gulp-watch");
 4 
 5 gulp.task("babeljs", function() {
 6   return gulp.src("src/*.js") // 输入目录
 7   .pipe(babel())
 8   .pipe(gulp.dest("dist/")); // 输出目录
 9 });
10 gulp.task("watch", function() { // 实时监听
11   gulp.watch('src/*.js', ['babeljs']);
12 });
13 
14 gulp.task('default', ['watch', 'babeljs']);

OK，最后一步
在项目根目录下，执行gulp，然后修改src下的js文件，你就会发现会被实时转译到dist目录中。

存在的问题
写代码时如果有语法错误，gulp的实时监控就会退出，所以，这个解决方法还是不够智能。

使用gulp和bable实现实时编译ES6代码

猜你喜欢