Babel 你太美。。。

Babel

爲何要用 Babel

Babel 的本意是 「通天塔」。 西方神話故事裏，之前的人語言相同，決定創建有個能直達上天的塔，神後面害怕人們語言相通就打亂它，讓他們不能明白對方的意思，並把他們分散到各地。

爲了解決上古時代瀏覽器對新語法不支持、不兼容狀況下。發明了 Babel ，可以將 ES6 代碼 轉爲 ES5 代碼， 從而在現有環境執行。

安裝環境

咱們將 Babel 想象成 一隻多功能的筆，而咱們的配置項，就是咱們賦予筆的功能，例如：像水彩筆、像鉛筆、像圓珠筆，每種筆在它的使用環境下使用。

//這些是babel 的核心
yarn add --save-dev @babel/core @babel/cli @babel/preset-env
yarn add --save @babel/polyfill
複製代碼

babel.config.js

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
];

module.exports = { presets };

複製代碼

執行方法

./node_modules/.bin/babel src --out-dir lib  或者  npx babel
複製代碼

運行原理

babel 在進行解析時以下

input string -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator -> output string

  用大白話講一下就是以炒菜爲例子， 咱們須要將菜放到鍋裏面亂燉。
  babel/core, 就是炒菜的這個過程。
  babel/cli 是鍋，咱們能夠在上面炒任何菜（咱們的代碼）， 
  咱們在炒的過程，但願全自動炒菜（添油加醋等），
  bable/plugin 就是提供的工具，當咱們直接照着菜單自動炒的時候，
  就是 babel/preset-env。 
  有時候這個鍋可能要用電，用煤氣，咱們就用 babel/proyfill 作個接口兼容。
  讓他能夠用電、用煤氣。 
  後來發現這個接電就能用，這時候 babel/runtime 就能解決，遇到要接電的才轉。


  ok，再說都餓了。

  咱們再來梳理下：

  @babel/core 轉換ast

  @babel/cli 打包工具

  @babel/plugin 插件機制，手動增長

  @babel/preset-env 配置環境

  @babel/polyfill 提供某些api，包含所需整個運行環境。

  @babel/runtime 按需載入所需api。

複製代碼

Plugins & Presets

你可以單獨引一個 js 語法特性插件作處理，例如箭頭函數。應用場景在例如一個新的提案出來的時候，嚐嚐鮮，正常有裝咱們的 Babel 全家桶足以應付了。

npm install --save-dev @babel/plugin-transform-arrow-functions

npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions.

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};


複製代碼

preset 是預設的意思，像插件同樣，你也能夠設置本身的預設，以共享須要的任何插件組合，

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

  npx src --out-dir lib --presets=@babel/env
複製代碼

這個預設將支持 ES6, ES7 的全部插件。 並且預設也能夠作配置， 咱們能夠經過配置文件

const presets = [
  [
    "@babel/env",
    {
      targets: {
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
    },
  ],
];

module.exports = { presets };

複製代碼

tansform-runtime

轉換器它的做用是避免編譯輸出中的重複。運行時將編譯到您的構建中。 還有另外一個做用是爲代碼建立沙盒環境，若是直接導入 core-js 或者 babel/prolyfill。

npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtime

變換器將這些內置函數爲core-js， 而不須要使用polyfill

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

複製代碼

polyfill

env 預設僅加載咱們的目標瀏覽器中不可用的功能轉換插件。 @babel/prolyfill模塊包括core.js和自定義 regenerator，模擬完成的 es2015 環境。 也就是說你可使用內置函數，靜態方法等。

npm install --save @babel/polyfill

Babel 是處於構建期， 轉譯出來的結果在默認下並不包括 ES6 對運行時的擴展，例如 builtins , 內建類型上的原型擴展 Array、Object、String ，Regenerator 等。

api 指的是咱們能夠經過函數從新覆蓋的語法，例如 Promise，includes等。

syntax， 指的是let， const， class等， 沒法重寫。

因此須要 plyfill 來處理。

polyfill 與 transform-runtime 的區別。

babel-runtime 庫 是由Babel提供的polyfill庫， 它自己就是由core-js 與 regenerator-runtime 庫組成。

咱們能夠經過 babel-plugin-transform-runtime 進行引用

babel 配置

configuration配置方法 能夠有如下狀況：

• .babelrc (and .babelrc.js) files
• package.json files with a "babel" key

babel 與 react 常見配置

yarn add @babel/preset-es2015 @babel/preset-react - -save-dev

yarn add @babel/preset-react-hmre - -save -dev

.babelrc
{
"presets":[
  "es2015",
  "react",
  "@babel/preset-env"],
"env":{
    "development":{
      "presets":["react-hmre"]
    }
  }
//
}
複製代碼

babel 與 TypeScript

yarn add @babel/plugin-tansform-typescript yarn add @babel/preset-typescript

{
  "presets": ["@babel/preset-typescript"]
}

配置清單




複製代碼

babel 還能作什麼

後記

歡迎關注微信公衆號！，進行更好的交流。
複製代碼

參考資料

如下是一些參考資料：

[@babel/core](https://babeljs.io/docs/en/babel-core)

[babel options api](https://babeljs.io/docs/en/options)

[babel.config.js](https://github.com/babel/babel/blob/master/babel.config.js)

[babel/core.js](https://github.com/zloirock/core-js)

[babel regenerator-runtimer](https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js)
複製代碼