利用gulp+babel轉es6

時間 2019-11-11

標籤利用 gulp+babel gulp babel es6 欄目 JavaScript 简体版

原文原文鏈接

參考資料⇧

前言⇧

最近在學習es6過程當中發現,雖然es6出來已經有一段時間了，可是各大瀏覽器並非徹底支持(chrome，firefox支持大部分，IE不支持),做爲一個前端愛好者，瀏覽器兼容性永遠是優先考慮的，因此呢，內事不決問度娘嘛！搜索以後發現有兩種解決辦法，第一種呢？用WebStorm自帶的File Watcher功能+Babel實現自動轉換ECMAScript 6代碼爲ES5代碼(不推薦，由於很卡)，第二種考慮gulp，利用gulp+babel轉es6,心情很激動，遂寫下心得，權當作個見證！javascript

知識儲備⇧

ES6

ECMAScript 6.0（如下簡稱 ES6）是 JavaScript 語言的下一代標準，已經在 2015 年 6 月正式發佈了。它的目標，是使得 JavaScript 語言能夠用來編寫複雜的大型應用程序，成爲企業級開發語言。css

標準的制定者有計劃，之後每一年發佈一次標準，使用年份做爲版本。由於 ES6 的第一個版本是在 2015 年發佈的，因此又稱ECMAScript 2015（簡稱 ES2015）。html

2016 年 6 月，小幅修訂的《ECMAScript 2016 標準》（簡稱 ES2016）如期發佈。因爲變更很是小（只新增了數組實例的includes方法和指數運算符），所以 ES2016 與 ES2015 基本上是同一個標準，都被看做是 ES6。根據計劃，2017 年 6 月將發佈 ES2017。前端

gulp

gulp.js 是一種基於流的，代碼優於配置的新一代構建工具。具體可見gulpjava

node.js/npm

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。node

Node.js 的包管理器 npm，是全球最大的開源庫生態系統。es6

具體可見node.js中文網 web

Babel

Babel是一個普遍使用的轉碼器，能夠將ES6代碼轉爲ES5代碼，從而在現有環境執行。具體可見Babelchrome

搭建步驟⇧

安裝node.js/npmnpm

進入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的環境已經搭建完畢。