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

时间:2024-04-20 13:07:21

这篇文章最初发表在我自己折腾的博客站点上:使用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@ --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

 var gulp = require("gulp"),
babel = require("gulp-babel"),
watch = require("gulp-watch"); gulp.task("babeljs", function() {
return gulp.src("src/*.js") // 输入目录
.pipe(babel())
.pipe(gulp.dest("dist/")); // 输出目录
});
gulp.task("watch", function() { // 实时监听
gulp.watch('src/*.js', ['babeljs']);
}); gulp.task('default', ['watch', 'babeljs']);

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

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