Babel - HackMD

Babel 是一個編譯工具，主要用於將 ES6+ 版本的程式碼轉換為向後兼容的 JavaScript 語法

以便能夠運行在當前和舊版本的瀏覽器或其他環境中

ES6 Destructuring assignment

 const personInfo = {
  name: 'horse',
  age: 19,
  phoneNumber: '0955333456',
};
 
const { name, age, phoneNumber } = personInfo;

ES6 Arrow Function

 const numbers = [1, 2, 3];
let total = 0;
 
numbers.forEach(n => total += n);

直接用 babel 官方的線上編譯功能來查看編譯前後的程式碼

babel 官方的 Usage Guide

不過未來還並不只有會用到 babel 來編譯 js

像是 css 也有瀏覽器兼容性的編譯手段 (Autoprefixer)

或是要壓縮 js 的程式碼並混淆成雜亂的 code (UglifyJS)

所以要有管理這些編譯手段的打包工具

後續的章節會講解另外兩種打包工具，gulp 及 webpack

不過在那之前還有一個重要的東西要先講，就是 Polyfill

Polyfill

polyfill 這項技術指的是

擴充舊瀏覽器上不支持的 html css js 技術

在這邊我只提擴充 js 的部分

babel 提供 ES6+ 語法上的編譯，但還是有相當多新穎的技術需要額外擴充進去

像剛剛 ES6 介紹到的 Promise

接下來介紹打包工具之一的 gulp

下一章： gulp

	const personInfo = {
	name: 'horse',
	age: 19,
	phoneNumber: '0955333456',
	};

	const { name, age, phoneNumber } = personInfo;