babel-loader的原理

本文轉載自默語的博客。

Babel包的構成

核心包

• babel-core：是babel轉譯器自己，提供轉譯的API，例如babel.transform等，webpack的babel-loader就是調用這些API完成轉譯的
• babylon：js的詞法解析器
• babel-traverse：用於對AST（抽象語法樹Abstract Syntax Tree）的遍歷
• babel-generator：根據AST生成代碼

其餘

• babel-cli：用於命令行轉碼
• babel-types：用於檢驗，構建和變動AST的節點
• babel-helpers：一系列預製的babel-template函數，用於提供給一些plugins使用
• babel-template：輔助函數，用於從字符串形式的代碼來構建AST樹節點
• babel-code-frame：用於生成錯誤信息，打印出錯誤點源代碼幀以及指出出錯位置
• babel-register：經過綁定node.js的require來完成自動編譯
• babel-polyfill：JS標準新增的原生對象和API的shim，實現上僅僅是core-js和regenerator-runtime兩個包的封裝
• babel-runtime：相似於polyfill，可是不會污染全局變量

• polyfill與runtime的區別

  最主要的區別就是polyfill引入後，會將新的原生對象、API這些都直接引入到全局環境，這樣就會污染全局變量，這也是polyfill的缺陷。因此就輪到babel-runtime上場了。

• transform-runtime和babel-runtime

  transform-runtime是將js中使用到新的原生對象和靜態方法轉譯成對babel-runtime的引用，而其中babel-runtime的功能其實最終也是由core-js來實現的，其實真正的核心是上面所講的core-js，其餘的都是包裝。