認識Babel***

Babel是什麼？
用於解析ES6，甚至比ES6更高級的語法，到ES5或ES4級別，滿足瀏覽器的兼容性

環境搭建 & 基本配置

① package.json配置安裝：

"devDependencies": {
  "@babel/cli": "^7.7.5",
  "@babel/core": "^7.7.5",
  "@babel/preset-env": "^7.7.5"
  "@babel/plugin-transform-runtime": "^7.7.5",
},
"dependencies": {
  "@babel/polyfill": "^7.7.0",
  "@babel/runtime": "^7.7.5"
}

.babelrc文件 配置:

• plugins 裏配置插件負責進行語法的轉換
• preset 預設，常用的plugins的集合，可以作爲 Babel 插件的組合。

{
    "presets": [
        [
            "@babel/preset-env", //es6+常用語法的解析
        ]
    ],
    "plugins": [
    ]
}

babel-polyfill 補丁

前置知識：

polyfill補丁：

polyfill是補丁，例如Array.IndexOf方法，根據瀏覽器的兼容情況，若不兼容，polyfill做一個補丁，使之兼容。

core-js 標準庫：

core.js 是一個標準的庫，集成了 ES6 ES7等所有新語法的polyfill（補丁），缺點是不支持regenerator的兼容性。

regenerator 運行時庫：

這是 Facebook 提供的 facebook/regenerator 庫，用來實現 ES6/ES7 中 generators、yield、async 及 await 等相關的 polyfills。

babel-polyfill是什麼？

• babel本身只解析ES6的語法，如箭頭函數；對於新的API, 如Promise,includes(),本身符合ES5的語法規範，babel不會進行解析；
• babel-polyfill 通過補丁的方式實現的ES6+新的API解析；
• babel-polyfill 是 core-js 標準庫和regenerator庫的集合。
• babel 7.4之後棄用 balel-polyfill
• 推薦直接使用core.js 和 regenerator

babel-polyfill 如何按需引入？

修改.babelrc文件的配置按需引入：

{
    "presets": [
        [
            "@babel/preset-env", //es6+常用語法的解析
      {
                "useBuiltIns": "usage",//按需引用
                "corejs": 3 //corejs版本
            }
        ]
    ],
    "plugins": [
    ]
}

babel-polyfill 的問題

污染全局環境

使用ES6的API Promise、includes時：

// 新的 API
Promise.resolve(100).then(data => data);
[10, 20, 30].includes(20)

babel-polyfill兼容處理後：

window.Promise = function() {}
Array.prototype.includes = function () {}

重新定義了window.Promise和Array原型的方法，污染了全局環境.

babel-polyfill 的問題：

• 如果做一個獨立的web系統，則無礙；
• 如果做一個第三方的庫（lib），則會有問題：

如使用方定義：window.Promise = function() {}，與之前兼容處理 window.Promise = function() {} 出現衝突：

babel-runtime

babel-runtime配置使用：
① package.json 配置安裝插件 @babel/plugin-transform-runtime、@babel/runtime ，具體參見上面package.json配置；

② .babelrc文件配置plugins：引用plugin-transform-runtime，並配置選項：

{
    "presets": [
        [
            "@babel/preset-env", //es6+常用語法的解析
        ]
    ],
    "plugins": [
    [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 3,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
}

babel-runtime兼容處理後：
Promise->_Promise,includes->_includes。

所以babel-runtime不會污染全局環境

babel-polyfill VS babel-runtime

babel-polyfill：

• 需要在你自己的代碼中手工引入（最好放在 vendor 裏）
• 它會以全局變量污染的方式 polyfill 內建類（如 Map、Set、Promise 等），同時也會通過修改 Array、String、Object 等原型的方式添加實例方法（如 Array.prototype.includes()、String.prototype.padStart() 等），內建類的靜態方法（如 Array.from() 等）也會被 polyfill
• babel-polyfill 適合於開發獨立的業務應用，及時全局污染、prototype 被修改也不會受到太大的影響，babel-polyfill 不適合開發第三方類庫。

babel-plugin-transform-runtime：

• 需要你在 .babelrc 或 Babel 編譯選項中將該插件添加到 plugins 中
• 插件只會 polyfill 你用到的類或方法，由於採用了沙盒（Sandbox）機制，它不會污染全局變量，同時也不會去修改內建類的原型，帶來的壞處是它不會 polyfill 原型上的擴展（例如 Array.prototype.includes() 不會被 polyfill，Array.from() 則會被 polyfill）
• 插件的方式適合於開發第三方類庫，不適合開發需要大量使用 Array 等原型鏈擴展方法的應用。