Babel入門

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

1.語法轉換git

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

3.源碼轉換chrome

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

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

安裝Babelnpm

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

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

插件就是一段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,配置以下babel

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", {}],
  ]
}
相關文章
相關標籤/搜索