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", {}], ] }