使用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

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的實時監控就會退出，所以，這個解決方法還是不夠智能。