>[success] # babel -- 初步上手之各種配置@babel/helpers ~~~ 1.回顧一下'babel' 只是一個編譯器步驟： 解析（Parsing）AST=》轉換（Transformation）需要預設或者插件規則=》生成（Code Generation） 配合上了預設和插件規則的babel也是只是語法層面的轉換，當想讓其對api層面的轉換需要'corejs' 2.像Promise 這類api層面都是corejs，但是像class 這類他實際是語法糖并不是api層面corejs也沒有 對其支持，這類就需要'@babel/helpers'每一個語法都可以這樣轉換為低版本的語法，理論上所有 的語法都可以用低版本的語法來實現。但是只是轉換并不能解決所有問題，涉及到某個對象的 api，比如 Array.prototype.find，這種 api 的兼容并不是需要轉換語法，而是要在環境中注入我們 實現的 api，也就是 polyfill （墊片）。 3.Babel helpers 函數，同時它提供了 regenerator-runtime，對 generator 和 async 函數進行編譯降 級。 ~~~ >[danger] ##### 幫助函數 -- helper ~~~ 1.helper 分為兩種： 1.1.一種是注入到 AST 的運行時用的全局函數 1.2.一種是操作 AST 的工具函數，比如變量提升這種通用邏輯 下面圖中就是 _classCallCheck 就是 helper 注入的，用 function 和 prototype 實現 class， helper 是在編譯時注入 AST 2.下面案例就是使用幫助函數可以看出幫助函數是在生成新的ast 樹的時候注入進去 ~~~ * 案例 ~~~ const hoistVariables = require('@babel/helper-hoist-variables').default; cosnt plugin = function () { visitor: { VariableDeclaration(path) { hoistVariables(path.parentPath, (id) => { path.scope.parent.push({ id: path.scope.generateUidIdentifier(id.name) }); return id; }, 'const' ); } } } ~~~  [在線轉換地址](https://babeljs.io/repl/#?browsers=defaults&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=MYGwhgzhAECCDeBfIA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.17.6&externalPlugins=&assumptions=%7B%7D)