# JavaScript - ES6 語法、Babel 轉譯器
###### tags: `Tag(程式基礎)`

### ES5 VS ES6

- <font color="99b898">**ECMAScript 5 ( ES5 )**</font>：ECMAScript 的第五版，於 2009 年發佈。
- <font color="99b898">**ECMAScript 6 ( ES6 )**</font>：ECMAScript 的第六版，於 2015 年發佈。

>[參考資料](https://ithelp.ithome.com.tw/articles/10206587) 淺談JS版本差異！ES5、ES6

## let, const 跟 var 的比較跟應用

變數宣告新用法： let、const ( ==區塊作用域 block scope== )
>相較於 ES5 的變數宣告只有 var， ==ES6 多了 let 跟 const 可以用，重點多了作用域的不同。==

每個變數在宣告時，都只會==在執行環境內建立記憶體，這個就是他的作用域==
:::warning

>[參考資料](https://medium.com/when-you-feel-like-quitting-think-about-why-you/javascript-3-%E7%AF%84%E7%96%87-scope-%E6%9A%AB%E6%99%82%E6%AD%BB%E5%8D%80-tdz-%E5%AE%A3%E5%91%8A%E8%AE%8A%E6%95%B8-5adcf6302852) JavaScript #3 — 範疇(Scope)、暫時死區(TDZ)

>[參考資料](https://medium.com/@realdennis/%E9%96%92%E8%81%8A-var%E8%88%87let%E7%9A%84%E6%87%B6%E4%BA%BA%E5%8C%85-javascript-b5a3f40ee28d/) 用 1 分鐘簡單地了解 — JavaScript中 var 與 let 的主要差別

>[參考資料](https://wcc723.github.io/javascript/2017/12/20/javascript-es6-let-const/) ES6 開始的新生活 let, const

**不同點 1： ==作用域==**
var、let、const 三者的變數作用範圍：
<font color="0a97b0">**var：function scope**</font>
<font color="0a97b0">**let、const：block scope {}**</font>

// ES6 syntax
for(let i = 0; i < 5; i++) {
    console.log(i); // 0,1,2,3,4
}
console.log(i); // undefined 作用域僅限於塊 {}

================================================

// ES5 syntax
for(var i = 0; i < 5; i++) {
    console.log(i); // 0,1,2,3,4
}
console.log(i); // 0,1,2,3,4,5

function varMing () {
  var ming = '小明';
  if (true) {
    var ming = '杰哥';  
    // 這裡的 ming 和if外的ming指向同一個記憶體盒子
    // 重新賦值後ming的值被更新為'杰哥'
  }
  console.log(ming);  // '杰哥'
}
varMing();// '杰哥'
======================================================

function letMing () {
  let ming = '小明';
  if (true) {
    let ming = '杰哥';  
    // 這裡的 ming 是不同的，只有在這個 if block { } 才有作用
  }
  
  console.log(ming);  // '小明'
}
letMing();// '小明'

**不同點2：==在同個區塊 { } 上 var 可以重複宣告，但 let /const 會出錯==**

###### `重複宣告的差異`

{
  let medium = 'good!';
  ...
  let medium = 20;
  //SyntaxError: Identifier 'medium' has already been declared
}

================v.s================

{
  var already = 'no';
  var already = 'yes';
  console.log(already); //yes
}

(let 不能重複宣告變數，==但可以重新賦值(使用=指定運算子))==
const 宣告變數後 ==不可以使用指定(賦值)運算子 = 重新賦值==

var x = 1
console.log(x)  // 1
x = 5  //使用=指定運算子 重新賦值
console.log(x)  // 5

let y = 2
console.log(y)  // 2
y = 10 //使用=指定運算子 重新賦值
console.log(y)  // 10

const z = 1
z = 3 //TypeError: Assignment to constant variable.

**不同點3： ==var 跟 let / const hoisting 的表現不同==**

>[參考資料](https://ithelp.ithome.com.tw/articles/10213188) ES6 小筆記】變數宣告 - let、const 哪裡好？跟 var 說掰掰

:::

### <font color="ea907a">**const**</font>

>[參考資料](http://www.tastones.com/zh-tw/tutorial/javascript/javascript-es6-features/) JavaScript ES6 功能

const針對是常數的定義，==常數在一宣告時就必定要指定給值==，不然會產生錯誤。

如果你宣告的常數是一個==物件或陣列類型==，像這種參照類型的值，==裡面的值是可以作改變的。==

// Changing object property value
const PERSON = {name: "Peter", age: 28};
console.log(PERSON.age); // 28
PERSON.age = 30;
console.log(PERSON.age); // 30

// Changing array element
const COLORS = ["red", "green", "blue"];
console.log(COLORS[0]); // red
COLORS[0] = "yellow";
console.log(COLORS[0]); // yellow


:::warning

>[參考資料](https://w3c.hexschool.com/blog/530adff5) ECMAScript6 入門：var、let、const 差異

當 `const`被宣告為物件、常數時，可以加上==freeze==方法來凍結。

const obj = {
  url: 'http://wualnz.com'
}
obj.url = 'http://helloWorld.com'


`obj.url`重新定義為`http://helloWorld.com`時，成功被修改了。

當使用陣列、或物件時，有沒有什麼辦法不被修改？
有，使用 `freeze`（凍結）

const obj = {
  url: 'http://wualnz.com'
}
Object.freeze(obj)
obj.url = 'http://helloWorld.com'


當加上`Object.freeze(obj)`後，便無法再更改`obj.url`了
:::
### <font color="ea907a">**let**</font>

>[參考資料](https://kuro.tw/posts/2019/02/23/%E8%AB%87%E8%AB%87-JavaScript-%E7%9A%84-setTimeout-%E8%88%87-setInterval/) 談談 JavaScript 的 setTimeout 與 setInterval

**for圓括號中的let變數仍然是在區塊作用域**
由於區塊作用域造成的結果，在==每次的for迴圈執行時==，用==let宣告的變數都會重新綁定(re-bind)一次==。這是在for語句中的var與let的差異

###### `var 會直接將 i 宣告成全域變數，不斷透過 for 迴圈累加，在 setTimeout 實際執行時只會拿到 10 這個數字。`

###### ` setTimeout (單位為毫秒) `

for (var i = 0; i < 10; i++) {
  console.log(i);
  setTimeout(function () {
    console.log('這執行第' + i + '次');
  }, 1000);
}

###### `console.log() 會在「一秒鐘之後」同時印出「十次 這執行第 10 次」`
###### `由於 JavaScript 切分變數有效範圍 (scope) 的最小單位為 function，所以當 1000ms 過去` ==`變數 i 的值早已是 for 迴圈更新完畢的 i ，而不是迴圈內當下的那個 i`==

###### `let 是屬於 block {} 變數`

for (let i = 0; i < 10; i++) {
  console.log(i);
  setTimeout(function () {
    console.log('這執行第' + i + '次');
  }, 1000);
}


>[參考資料](https://wcc723.github.io/javascript/2017/12/20/javascript-es6-let-const/) ES6 開始的新生活 let, const

>[參考資料](https://anthonychao.site/article/2019-12-05-let_const_var/) let, const 跟 var 的比較跟應用

---

## Template Literals 模板字串符

>[參考資料](https://medium.com/@realdennis/javascript-%E8%A8%AD%E8%A8%88%E4%B8%80%E5%80%8B%E6%8E%A5%E5%8F%97%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E5%87%BD%E6%95%B8-20f2ce452c4e) 不用括號也能呼叫？ 設計一個接受模板字符串的函數吧！ JavaScript

模板字串符（template literal）是 ES6 中新增的一個相當方便實用的功能，==取代以往在 JS 中用 " " 或 ' ' 及 + 輸出字串與變數的功能==

語法就是使用==反引號包起來== ，==變數使用 ${ } 包起來==即可
###### 反引號如下

` `

可以很輕易的做到
<font color="ea907a">**輸出多行文字（字串需要換行）**</font>
<font color="ea907a">**字串中插入變數**</font>
<font color="ea907a">**字串中使用方法、函式**</font>

###### 範例一

var father = {name:'Dio',age:100};
var friend = {name:'Mista',age:19}
// 以前字串是這樣
console.log('我的爸爸叫做' + father.name + ',我的朋友叫做'+ friend.name);
// 模板字符串允許你這麼做：
console.log(`我的爸爸叫做${father.name},我的朋友叫做 ${friend.name}`);


###### 範例二


>[參考資料](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Template_literals#%E6%A8%99%E7%B1%A4%E6%A8%A3%E6%9D%BF%E5%AD%97%E9%9D%A2%E5%80%BC) MDN

---

## Destructuring 解構

>[參考資料](https://learningsky.io/destructuring-assignment/) 【 JavaScript ES6 】解構賦值

解構賦值==可以用在陣列或物件==，可以提取特定的值成獨立變數。

#### Array Destructuring ==陣列的解構賦值==
###### `原始寫法`

const nums = [1, 2, 3]

const first = nums[0]
const second = nums[1]
const third = nums[2]

console.log(`first: ${first}, second: ${second}, third: ${third}`)


###### `解構寫法`

const nums = [1, 2, 3]

const [first, second, third] = nums

console.log(`first: ${first}, second: ${second}, third: ${third}`)


###### `陣列解構設預設值`

const nums = [1, 2, 3]

const [first, second, third, fourth = 5] = nums

console.log(`first: ${first}, second: ${second}, third: ${third}, fourth: ${fourth}`)


###### `陣列解構忽略元素`
透過`,` 來==忽略陣列元素==

const nums = [1, 2, 3, 5, 6]

const [, second, , , five] = nums

console.log(`second: ${second}, five: ${five}`)


###### `剩餘部份變成另一個陣列元素`
透過 `...` 將原始陣列==最後的剩餘部份變為另一個陣列元素==

const nums = [1, 2, 3]

const [first, ...others] = nums

console.log(`first: ${first}, others: ${others}`)


#### 互換數值

###### `原始寫法`

let a = 10
let b = 24

console.log(`a: ${a}, b: ${b}`);

let tmp = a
a = b
b = tmp

console.log(`a: ${a}, b: ${b}`)


###### `改良寫法`
可直接==將變數值當成 Key 來使用==

let a = 10
let b = 24

console.log(`a: ${a}, b: ${b}`);

[b, a] = [a, b]

console.log(`a: ${a}, b: ${b}`)


#### 陣列與迴圈

###### `解構`
透過==迴圈方式依序取出陣列中各數值==再使用==陣列解構來取得各數值中的 firstName 、 lastName 與 isEmployee==

const usersInfo = [
    ['Renee', 'Li', true],
    ['Jen', 'Chen', false],
]

for (const [firstName, lastName, isEmployee] of usersInfo) {
    console.log(`firstName: ${firstName}, lastName: ${lastName}, isEmployee: ${isEmployee}`)
}


#### ==物件解構==

###### `原始寫法`

const point = {
  x: 10,
  y: 24
}

const x = point.x
const y = point['y']

console.log(`x: ${x}, y: ${y}`)


###### `解構寫法`
解構==取物件的 Key==

const point = {
  x: 10,
  y: 24
}

const { x, y } = point

console.log(`x: ${x}, y: ${y}`)


#### 物件解構設預設值
使用==物件解構並設定初值==

const point = {
  x: 10,
  y: 24
}

const { x, y, z = 168 } = point

console.log(`x: ${x}, y: ${y}, z: ${z}`)


###### `物件中包含另一個物件`

const myObject = {
  props: {
    match: 'Hello World'
  }
}

const {
  props: {
    match
  },
} = myObject
console.log(match)


###### `物件解構指定新名稱`
==取出物件中對應的 Key 值後再將此 Key 重新名命為 : 之後的名稱==

const point = {
  x: 10,
  y: 24
}

const { x: poinxX, y: poinxY, z = 168 } = point
console.log(`poinxX: ${poinxX}, poinxY: ${poinxY}, z: ${z}`)


#### 解構函式參數

###### `原始寫法`

function computeArea(side) {
  const { length, width } = side
  return length * width
}

console.log(`面積為: ${computeArea({ length: 10, width: 24 })}`)


###### `解構寫法`
函式參數==透過物件解構取得對應的 Key 值==

function computeArea({ length, width }) {
  return length * width
}

console.log(`面積為: ${computeArea({ length: 10, width: 24 })}`)


#### 物件與迴圈

###### `解構`
透過==迴圈方式依序取出陣列中各數值==再使用==物件解構來取得各數值中的 firstName 、 lastName 與 isEmployee==

const usersInfo = [
    { firstName: 'Tom', lastName: 'Li', isEmployee: true },
    { firstName: 'Andy', lastName: 'Wei', isEmployee: false }
]

for (const { firstName, lastName, isEmployee } of usersInfo) {
    console.log(`firstName: ${firstName}, lastName: ${lastName}, isEmployee: ${isEmployee}`)
}


>[參考資料](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/destructuring.html)解構賦值

## Spread Operator 展開運算子

>[參考資料](https://pjchender.blogspot.com/search/label/es6) 展開運算子

==展開運算子(Spread Operator)與其餘參數(Rest parameters)== 是ECMAScript 6中的其中一種新特性
語法的內容：
<font color="ea907a">**符號是三個點(...)**</font>
<font color="ea907a">**都與陣列有關**</font>

**展開運算子**的 `... `後面必定是==接一個陣列或物件==

###### `基本用法`

//陣列
let number = [1,2,3,4,5];
console.log(...number);  // 1,2,3,4,5


//字串
let str = 'kanboo'
console.log(...str);  // "k","a","n","b","o","o"


###### `將二個Array合併(新舊寫法比較)`

//===========過去寫法===========
let groupA = ['爸爸', '媽媽'];
let groupB = ['老大','老二','老么'];

const groupAll = groupA.concat(groupB);
console.log(groupAll);
// ["爸爸", "媽媽", "老大", "老二", "老么"];


//===========新的寫法===========
let groupA = ['爸爸', '媽媽'];
let groupB = ['老大','老二','老么'];

const groupAll = [...groupA, ...groupB];  //拆解完後，再用陣列[]包起來，產生新的陣列
console.log(groupAll);
// ["爸爸", "媽媽", "老大", "老二", "老么"];

也可以用來==把陣列展開，傳入函式之中==，例如下面加總函式的範例：
###### `將 陣列展開 傳入函式`

function sum(a, b, c) {
  return a + b + c;
}

var args = [1, 2, 3];
console.log(sum(...args)); // 6


###### `淺層複製`
陣列與物件相同都有著傳參考的特性，所以當把==陣列賦予到另一個值上==時，==修改其中一個另一個也會跟著變動==。
###### 傳址：更動groupB 會 影響groupA

// 由於傳參考的關係，所以將一個陣列傳到另一個上時
// 兩個的值其實是一樣的
let groupA = ['老大','老二','老么'];
let groupB = groupA;
groupB.push('小花');

//輸出
console.log(groupA); // ['老大','老二','老么','小花'];
console.log(groupB); // ['老大','老二','老么','小花'];


###### 展開運算子 它是一個一個將值寫入，所以他也有`淺層的複製(shallow copy)` 。
###### 淺層複製：更動groupB 不會 影響groupA

// 這個屬於淺拷貝，所以不會影響到另一個物件
let groupA = ['老大','老二','老么'];
let groupB = [...groupA];
groupB.push('小花');

//輸出
console.log(groupA); // ['老大','老二','老么'];
console.log(groupB); // ['老大','老二','老么','小花'];


###### `範例`

// 同樣道理，arguments 不是真正的陣列，也可以透過 ... 來轉成純陣列
var originCash = 1000;
function updateEasyCard() {
  let arg = [...arguments]
  let sum = arg.reduce(function (accumulator, currentValue) {
    // 分別為前一個回傳值, 當前值
    return accumulator + currentValue;  // 與前一個值相加
  }, 0);
  // 如果使用 arguments 則會出現 `arguments.reduce is not a function`
  console.log('我有 ' + sum + ' 元');
}

updateEasyCard(0); // 我有 0 元
// arguments = [];

updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500); // 我有 718 元
// arguments = [10, 50, 100, 50, 5, 1, 1, 1, 500];


>[參考資料](https://wcc723.github.io/javascript/2017/12/24/javascript-spread-operator/) JavaScript 展開與其餘

### ==其餘參數(Rest Operator)==
將一個不確定數量的參數==集合在一個陣列中==
###### `範例1`
可傳入不固定的參數，1個 or 多個 皆可..

function sum(...numbers) {
  var result = 0;
  numbers.forEach(function (number) {
    result += number;
  });
  return result;
}

//傳入一個值
console.log(sum(1)); // 1
//傳入多個值
console.log(sum(1, 2, 3, 4, 5)); // 15


###### `範例2`
如果function有先定義別的參數，就會將傳入的參數值先給定義好的參數，剩下的就全部塞入其餘參數。

function restArray(x, y, ...others) {
  console.log("x",x);  // x： 1
  console.log("y",y);  // y： 2
  console.log("others",others);  // others： [3, 4, 5]
}

//拆解陣列
restArray(1, 2, 3, 4, 5);


其餘參數(Rest parameters)有一個限制，**就是這個參數一定是==函式的「最後一個」==。**

你如果放在其餘的參數前，就會==產生錯誤==。
###### `反過來寫就會Error`

function restArray(...others, x, y) {
  console.log("x",x);
  console.log("y",y);
  console.log("others",others);
}

//拆解陣列
restArray(1, 2, 3, 4, 5); //error SyntaxError: Rest parameter must be last formal parameter


>[參考資料](https://kanboo.github.io/2018/01/26/ES6-SpreadOperator-RestOperator/) ES6-展開運算子(Spread Operator)、其餘參數(Rest Operator)

## `Arrow Function` 箭頭函式

>[參考資料](https://kanboo.github.io/2018/01/23/ES6-Arrowfunctions/) ES6-箭頭函式 (Arrow functions)

簡短的語法

一般使用==箭頭函式==與 function 的用法大致一致，可以傳入參數、也有大括號包起來，除此之外箭頭函式也有更簡短的寫法如下：

// 正常寫法
var callSomeone = (someone) => {
    return someone + '你好嗎？'
}
console.log(callSomeone('hello'))

// 縮寫，單一行陳述不需要 {}
var callSomeone = (someone) => someone + '感謝～'
console.log(callSomeone('衷心'))

// 只有一個參數可以不加括號
var callSomeone = someone => someone + '再見！'
console.log(callSomeone('珍重'))

// 沒有參數時，一定要有括號
var callSomeone = () => '期待' + '再相逢Q'
console.log(callSomeone('期待'))


上述有個小地方也要注意一下，在大括號內的 `{}` 是需要==自行加入 return，如果沒有傳入值則會出現 undefined==。

var callSomeone = (someone) => { someone + '我很好ww' }
console.log(callSomeone('hello')) // undefined


### 綁定的 this 不同

>[參考資料](https://blog.niclin.tw/2019/09/30/arrow-function-in-javascript/) 箭頭函式 (Arrow functions)

:::warning

* this 是被綁定的，apply, call, bind 在 Arrow function 中是無法改變 this 的
* 不能用在 constructor因為， this 是在物件下建立的
* 沒有一般函式有的隱藏arguments物件。
* 箭頭函式不能當作 generators 使用，使用yield會產生錯誤。

:::

// 普通寫法
const currentLanguage = (user) => {
    return user.locale
}

// 縮寫，還幫你寫好 return
const currentLanguage = (user) => user.locale

// 一個參數時可以不加 () 括號
const currentLanguage = user => user.locale

// 沒參數時一定要有 () 括號
const currentLanguage = () => "zh-TW"

// 寫大括號時一定要有 return
const currentLanguage = user =>  { return user.locale }

let str = [
    'Hello',
    'Johnson',
    'How are you?',
    'Fine, thank you'
];

// Function
console.log(str.map(function (obj) {
    return obj.length;
}));
// [ 5, 7, 12, 15 ]

//===================>>

// Arrow function
console.log(str.map(str => str.length));
// [ 5, 7, 12, 15 ]


### 沒有 arguments 參數
箭頭函數裡沒有argument物件，可使用 其餘參數(Rest Operator) 替代

const other = (...others) => others;
console.log(other(10, 20, 30, 40, 50)) // [10, 20, 30, 40, 50]

### apply, call, bind 無效
this 在 Arrow function 中是被綁定的，所以套用 apply, call, bind 的方法時是無法修改 this。
>[參考資料](https://blog.techbridge.cc/2019/02/23/javascript-this/) 淺談 JavaScript 頭號難題 this：絕對不完整，但保證好懂

---

## ES6模組的輸出與輸入

>[參考資料](https://blog.typeart.cc/%E6%B7%BA%E8%AB%87JavaScript%20ES6%E7%9A%84import%E8%88%87import%7B%7D%E5%8F%8Aexport%E5%8F%8Aexport%20default%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F/) 淺談JavaScript ES6的import與import{}及export及export default使用方式

### 多個輸出名稱

模組輸出可以使用==export==關鍵字，在想要輸出(也就是變為公開部份)加在前面，物件、類別、函式與原始資料(變數與常數)都可以輸出，例如以下的範例:

export const aString = 'test'

export function aFunction(){
  console.log('function test')
}

export const aObject = {a: 1}

export class aClass {
  constructor(name, age){
    this.name = name
    this.age = age
  }
}

上面稱之為多個輸出名稱的情況，有兩種方式可以進行輸入，一種是每個要輸入的名稱都需要定在在花括號(=={}==)之中，例如以下的範例:

import {aString, aObject, aFunction, aClass} from './lib.js'

console.log(aString)
console.log(aObject)

另一種是使用萬用字元(==*==)，代表要輸入所有的輸出定義的值，不過你==需要加上一個模組名稱==，例如下面程式碼中的myModule，這是為了防止命名空間的衝突之用的，之後的程式碼中都需要用這個模組名稱來存取輸出模組中的值，這個作法不常使用:

import  * as myModule from './lib.js'

console.log(myModule.aString)
console.log(myModule.aObject)

myModule.aFunction()
const newObj = new myModule.aClass('Inori', 16)
console.log(newObj)

### 單一輸出名稱
這個要輸出成為模組的程式碼檔案中，只會有一個輸出的變數/常數、函式、類別或物件，通常會加上==default==關鍵詞。如果要使用有回傳值的函式，通常也是用單一輸出的方式。例如以下的範例:

function aFunction(param){
  return param * param
}

export default aFunction

對單一輸出的模組就不需要用花括號，這代表只輸入以default值定義的輸出語句:

import aFunction from './lib2.js'

console.log(aFunction(5))

這是最特別的，可以在輸入時改變輸入值的名稱，這樣可以讓作輸入檔案中，確保不會有名稱衝突的情況:

import square from './lib2.js'

console.log(square(5))

### 輸出語法

export var x = 42;                      // export a named variable
export function foo() {};               // export a named function

export default 42;                      // export the default export
export default function foo() {};       // export the default export as a function

export { encrypt };                     // export an existing variable
export { decrypt as dec };              // export a variable as a new name
export { encrypt as en } from 'crypto'; // export an export from another module
export * from 'crypto';                 // export all exports from another module

### 輸入語法

import 'jquery';                        // import a module without any import bindings
import $ from 'jquery';                 // import the default export of a module
import { $ } from 'jquery';             // import a named export of a module
import { $ as jQuery } from 'jquery';   // import a named export to a different name
import * as crypto from 'crypto';    // import an entire module instance object

### `export` vs `export default`
最大的差別就是：同一份js檔案，==export可以有無限多個==，==export default只能有一個==！
**使用default的話，你得把要export的所有東西寫進一個{}裡面**

export const a = 123;
export const myFunc = ()=>{console.log('this is myFunc')}
//...可以有一大堆export

//------上面是export，下面是export default的分隔線------

const test = () => '這個test function要從default匯出的';

export default {
    b: 'b',
  	test,
  	test2: () => 'test2 function'
}

你也可以在一份文件裡同時使用export與export default

### 為什麼還要有default呢？

主要是在另一份js檔要import時是否需要寫`{}`

==若是用`export default`，在別的js檔import時不必`{}`==

### `import vs import {}`

**==import中需不需要寫{}，則是看引入的文件是否有使用到default==**

---
## [Babel](https://babeljs.io/)

>[參考資料](https://medium.com/i-am-mike/webpack%E6%95%99%E5%AD%B8-%E5%9B%9B-javascript-%E8%88%87-babel-1d7acd911e63) JavaScript 與 Babel

Babel 是一個 ==JavaScript 的轉譯器==，可以幫你==轉成需要的版本==，意思是你依舊可以使用潮潮的最新語法，而不用為了使用者環境而吐血。

###### 安裝指令

npm install babel-loader @babel/core @babel/preset-env --save-dev

安裝好了後來看看 `package.json`

{
  "name": "Babel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "watch": "webpack --mode development --watch",
    "start": "webpack --mode development",
    "deploy": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "babel-loader": "^8.0.2",
    "webpack": "^4.21.0",
    "webpack-cli": "^3.1.2"
  }
}

在Script裡面有3個指令
* watch : 執行編譯然後不中斷，設定成 development 版本。
* start : 執行一次性編譯，設定成 development 版本。
* deploy : 執行一次性編譯，設定成 production 版本。
#### 安裝的工具裡面也安裝了babel
* `babel-loader `：webpack要去讀取任何檔案格式都需要靠loader這個工具去做判讀，然後再去做轉換，所以我們就會需要webpack掛載這個babel-loader。
* `@babel/core`： 程式需要調用Babel的API進行編譯。
* `@babel/preset-env`：可以使用最新版本的JavaScript然後去編譯，不用去理會哪些語法需要轉換。
:::warning
Babel 不只轉換新版本的JavaScript，也可以轉換React 的 jsx 還有TypeScript等等
:::

[參考資料](https://medium.com/i-am-mike/webpack%E6%95%99%E5%AD%B8-%E5%9B%9B-javascript-%E8%88%87-babel-1d7acd911e63)