Babel入門

Babel是一個工具鏈，主要用於把ES6+的代碼轉換爲ES5代碼，以便在舊版本瀏覽器中運行。Babel能夠作的事情是

1.語法轉換

2.經過Polyfill的方式在目標環境中添加缺失的特性（經過@babel/polyfill模塊）

3.源碼轉換

// Babel 輸入： ES2015 箭頭函數
[1, 2, 3].map((n) => n + 1);

// Babel 輸出： ES5 語法實現的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

安裝Babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

@babel/core 是Babel的核心庫，@babel/cli 是能在終端使用的工具，@babel/preset-env 是一個預設，預設是一組插件的集合。

插件就是一段js程序，用於指導Babel如何轉換代碼，例如@babel/plugin-transform-arrow-functions插件能夠轉換箭頭函數語法，因爲須要轉化的語法很是多，因此將一系列插件組合成一個預設來使用，例如@babel/preset-env預設能夠支持轉換全部js新特性。你也能夠使用一個配置文件來指導代碼如何進行轉化，例以下面的babel.config.js文件告訴Babel只爲目標瀏覽器中沒有的功能加載轉換插件。

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

module.exports = { presets };

@babel/polyfill 模塊包括 core-js 和一個自定義的 regenerator runtime 模塊用於模擬完整的 ES2015+ 環境（上面babel插件只是對新的js語法特性進行轉換而不包括一些新的api和Promise新對象等）。polyfill實現這些功能的方式是將Promise之類的新的內置組件和Array.from和Object.asign之類的靜態方法添加到全局範圍和和內置的原型中。咱們在實際使用時不回用到這麼多方法，因此會產生很大的浪費。

辛運的是env 預設提供了useBuiltIns配置參數，當此參數值是usage時只會加載所須要的polyfill，配置以下

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

module.exports = { presets };

注意，使用 --save 參數而不是 --save-dev，由於這是一個須要在你的源碼以前運行的 polyfill。

如上所示，配置參數時，將插件或預設名和參數對象組成的數組放入presets數組中便可。這裏只須要插件名便可而不須要完整的路徑，由於在npm中babel會自動在node_modules找那個查找。下面三種方式是等小的

{
  "presets": [
    "presetA",
    ["presetA"],
    ["presetA", {}],
  ]
}