使用gulp和bable實現實時編譯ES6程式碼

yangtoude發表於2018-08-31
編譯

這篇文章最初發表在我自己折騰的部落格站點上：使用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的實時監控就會退出，所以，這個解決方法還是不夠智慧。

相關文章