這是在講 Gulp 不是飲料是任務自動化工具這件事:安裝 Babel 篇

前言

接下來將會安裝 Bebal 這個套件工具,這個套件工具可以幫助我們將 ES6 編譯成瀏覽器可以執行的 JavaScript

ES6

首先 ES6 是 ECMAScript 的縮寫,而數字代表的是版本號, ES6 則是 2015 年 6 月發布,所以又稱為 ES 2015,如果想瞭解更多可以看這一篇文章

ECMA

安裝 gulp-babel

首先官方文件中提供兩個版本的 bebal,基本上使用上沒有太大差異,所以我是選擇安裝 Babel 7

1
2
3
4
5
// Babel 7
npm install --save gulp-babel @babel/core @babel/preset-env

// Babel 6
npm install --save gulp-babel@7 babel-core babel-preset-env

使用方式

使用的方式也是很簡單,但是我們要先建立一個 gulp 任務

1
2
3
4
gulp.task('babel', () => {
return gulp.src('./src/js/**/*.js')
.pipe(gulp.dest('./public/js'));
});

並且建立 js 資料夾跟檔案

js

接下來只需要依照官方文件撰寫任務即可

1
2
3
4
5
6
7
gulp.task('babel', () => {
return gulp.src('./src/js/**/*.js')
.pipe($.babel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('./public/js'));
});

最後在 JS 中寫入一些 ES6 的語法,並輸入 gulp babel

1
2
3
4
5
6
7
let a = () => console.log('小明好棒');

const b = 1234;

setTimeout(() => {
console.log('123 站著穿');
},5000);

編譯完成後我們就可以看到 ES6 語法被轉換囉~

左邊是編譯後,右邊是編譯前

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ