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

前言

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

ES6

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

ECMA

安裝 gulp-babel

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

// 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 任務

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

並且建立 js 資料夾跟檔案

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

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

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

let a = () => console.log('小明好棒');

const b = 1234;

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

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

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

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

前言

ES6

安裝 gulp-babel

使用方式

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

分享這篇文章

留言

前言

ES6

安裝 gulp-babel

使用方式

你的支持會直接轉換成更多技術筆記

Terminal

相關文章

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：將 Gulp deploy(部屬) Heroku

這是在講 Gulp 不是飲料是任務自動化工具這件事：一個段落

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：加入 ejs 篇

這是在講 Gulp 不是飲料是任務自動化工具這件事之番外篇：加入 pug/jade 篇

分享這篇文章

留言