昨天我們一起討論完babel-cli，今天我們將會持需介紹其他套件

babel-node 現在是@babel/node

babel-node是babel-cli的一部分，它不需要單獨安裝。
它的作用是在node環境中，直接運行es2015的代碼，而不需要額外進行轉碼。例如我們有一個js文件以es2015的語法進行編寫(如使用了箭頭函數)。
我們可以直接使用babel-node 進行執行，而不用再進行轉碼了。

下面是baebl-node單獨使用範例

下載方式: npm install --save-dev @babel/node

1. 先打開昨天的babel測試檔案，將es6.js改成

const arrowFunction = () =>{
    let a = "hellow";

    console.log(`${a} everyone`)
}
arrowFunction();

2. 在把package.json檔增加設定

 "scripts": {
    "build": "babel es6.js --out-file es5.js",
    "script":"babel-node es6.js"
  },

3. 最後終端機輸入 npm run script

 C:\Users\user\Desktop\IT鐵人賽\IT-Contest\babel測試> npm run script
 

即可得到

 
> babel@1.0.0 script C:\Users\user\Desktop\IT鐵人賽\IT-Contest\babel測試
> babel-node es6.js

hellow everyone

了解了babel-node之後，還沒完喔

如果說：babel-node= babel-polyfill+ babel-register。那這兩位又是誰呢?

babel-register

babel-register模塊改寫require命令，為它加上一個鉤子。此後，每當使用require加載.js、.jsx、.es和.es6後綴名的文件，就會先用babel進行轉碼。

也就是看得懂require這個方法

小提醒: babel-register 現在改為 @babel/register

1. 先下載套件

npm install --save-dev @babel/register

2. 使用时，必须首先加载babel-register

require("@babel/register");
require("./es6.js");

小提醒:它是實時轉碼，所以只適合在"開發環境"使用

babel-polyfill

這個包已經被棄用，取而代之的所需部件的獨立包容core-js和regenerator-runtime

babel默認只轉換js語法，而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對像上的方法(比如Object.assign)都不會轉碼。

API 的部分會有專門的配置方式，之後會講到喔

舉例來說，es2015在Array對像上新增了Array.from方法。babel就不會轉碼這個方法。如果想讓這個方法運行，必須使用babel-polyfill。(內部集成了core-js和regenerator)
使用時，在所有代碼運行之前增加require('babel-polyfill')。或者更常規的操作是在webpack.config.js中將babel-polyfill作為第一個entry。因此必須把babel-polyfill作為dependencies而不是devDependencies

• babel-polyfill 主要有兩個缺點：

  1. 使用babel-polyfill會導致打出來的包非常大，因為babel-polyfill是一個整體，把所有方法都加到原型鏈上。比如我們只使用了Array.from，但它把Object.defineProperty也給加上了，這就是一種浪費了。 這個問題可以通過單獨使用core-js的某個類庫來解決，core-js都是分開的。

  2. babel-polyfill 會污染全局變量，給很多類的原型鏈上都作了修改，如果我們開發的也是一個類庫供其他開發者使用，這種情況就會變得非常不可控。

因此在實際使用中，如果我們無法忍受這兩個缺點，通常我們會傾向於使用babel-plugin-transform-runtime。
而在Babel 7中，官方明確表示棄用這個插件。建議使用core-js和regenerator-runtime

使用方式如下:

1. 先下載套件

 npm install --save babel-polyfill

2. 使用时，在腳本頭部，加入如下一行代碼。

import 'babel-polyfill';
// 或者
require('babel-polyfill');

總結

今天先將babel介紹到這邊，今天一樣適用舊版的說明下上新版的補充，方便新手讀取其他舊一點的網路教學喔!!明天將會介紹剩下的babel常用套件

參考文件

• babel官方(https://babeljs.io/docs/en/)
• 阮一峰 Babel-入门教程(https://www.ruanyifeng.com/blog/2016/01/babel.html)
• 小蘑菇哥哥 一口(很長的)氣了解babel (https://juejin.im/post/6844903743121522701#heading-1)