這是在講 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 語法被轉換囉~

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

0%