目錄
參考資料⇧
前言⇧
最近在學習es6過程中發現,雖然es6出來已經有一段時間了，但是各大瀏覽器並不是完全支持(chrome，firefox支持大部分，IE不支持),作為一個前端愛好者，瀏覽器兼容性永遠是優先考慮的，所以呢，內事不決問度娘嘛！搜索之后發現有兩種解決辦法，第一種呢？用WebStorm自帶的File Watcher功能+Babel實現自動轉換ECMAScript 6代碼為ES5代碼(不推薦，因為很卡)，第二種考慮gulp，利用gulp+babel轉es6,心情很激動，遂寫下心得，權當做個見證！
知識儲備⇧
- ES6
ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標准，已經在 2015 年 6 月正式發布了。它的目標，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序，成為企業級開發語言。
標准的制定者有計划，以后每年發布一次標准，使用年份作為版本。因為 ES6 的第一個版本是在 2015 年發布的，所以又稱ECMAScript 2015（簡稱 ES2015）。
2016 年 6 月，小幅修訂的《ECMAScript 2016 標准》（簡稱 ES2016）如期發布。由於變動非常小（只新增了數組實例的includes方法和指數運算符），因此 ES2016 與 ES2015 基本上是同一個標准，都被看作是 ES6。根據計划，2017 年 6 月將發布 ES2017。
- gulp
- node.js/npm
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
具體可見node.js中文網
- Babel
Babel是一個廣泛使用的轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。具體可見Babel
搭建步驟⇧
-
安裝node.js/npm
進入node.js中文網，點擊導航欄的下載，根據系統對應下載即可(npm會隨同node.js一同下載)。
下載成功后，以window系統為例：win鍵+r輸入cmd回車，調出命令行,執行如下命令：
node -v 下載成功后會出現nodejs版本號
npm -v 下載成功后會出現npm版本號
-
了解常用npm命令 npm使用手冊
-
安裝cnpm
安裝命令: npm install cnpm -g --registry=https://registry.npm.taobao.org
下載成功后可以執行cnpm -v查看版本
npm安裝插件是從國外服務器下載，受網絡的影響，經常會產生下載緩慢或異常的問題。cnpm的出現就很好的解決了這個問題，cnpm是一個完整的npmjs.org的鏡像,可以以此代替官方版本，同步頻率為10分鍾一次(cnmp命令與npm一致，只需將npm替換為cnpm)。cnmp官網
-
全局安裝gulp
安裝命令: cnpm install gulp -g
查看是否正確安裝:gulp -v
-
新建項目(以我的項目為例)
在桌面新建了一個名為test的項目
- 使用cmd進入命令行,cd到test項目(cd Desktop\test ),執行gulp命令，會出現
Local gulp not found in ~\Desktop\test Try running:npm install gulp- 使用IDE打開(本人是webstorm)
-
cmd執行cnpm init命令配置package.json文件
如果你和我一樣都是小白的話，一路enter就可以了! 結束時會提示你Is this ok? 輸入yes即可，然后回到IDE中，你會發現項目中已經生成了package.json文件。(package.json是基於nodejs項目必不可少的配置文件，它是存放在項目根目錄的普通json文件。具體看這里)
-
本地安裝gulp,執行如下命令
-
cnpm install --save-dev
-
cnpm install gulp --save-dev
cmd到test目錄下執行gulp命令，會出現
-
-
在項目根目錄創建一個名為gulpfile.js的文件,根據gulp中文網的提示,書寫如下代碼
var gulp = require('gulp');
gulp.task('default', function() {
// 將你的默認的任務代碼放在這
console.log('ok'); //實驗代碼
});
-
cmd到test目錄下執行gulp命令,會出現
此時標志着gulp安裝完成
-
安裝gulp-babel插件, 回到cmd到test目錄下，執行:
cnpm install --save-dev gulp-babel babel-preset-es2015
-
回到IDE,重置gulpfile.js文件,書寫如下代碼
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () => {
return gulp.src('es6/*.js')
.pipe(babel({
presets: ['es2015']
}))
.pipe(gulp.dest('build'));
});
至此，gulp+Babel轉es6的環境已經搭建完畢。
小試身手⇧
- 更改webStorm編輯器的js書寫環境
File => Setting => languages & Frameworks => javascript =>
- 新建es6文件夾,在es6文件夾下創建es6標准下的test.js文件，書寫如下代碼
let [a,b] = [1,2];
console.log(a,b);
-
cmd到test目錄下執行gulp命令
-
回到IDE,test文件生成了一個叫build的文件夾並且里面有一個let.js的文件，build/let.js這就是我們轉成的es5標准的js文件。
完