>[success] # babel -- 總結 ~~~ 1.babel 三個主要階段：解析（Parsing）,轉化（Transformation）以及 代碼生成（Code Generation）, 解析階段生成tokens，根據語法解析生成ast，轉化階段對應規則將ast語法樹生成新的語法樹格式 ，代碼生成階段將新的語法樹生成代碼字符串，babel如圖經過這些api 去轉換 ~~~  >[danger] ##### 使用場景的區別 @babel/plugin-transform-runtime vs @babel/preset-env ~~~ 1.寫類庫時，使用`@babel/plugin-transform-runtime` 會配合'@babel/runtime',提取出helps作為共 用模塊，進而縮小最終編譯輸出的體積,并且使用'@babel/runtime-corejs'不會產生墊片的全局污染 但是因此也失去了通過target 引入最小編譯 和"foobar".includes("foo")就無法進行轉換或兼容了 在寫類庫講究是隔離和體積 2.寫應用時，使用'@babel/preset-env' ,可以利用target 引入項目最小依賴和最小轉換，在業務講究 是根據環境最小引入 產生主要原因：因為babel 中插件的應用順序是：先 plugin 再 preset，plugin 從 左到右，preset 從右到左，這樣 plugin-transform-runtime 是在 preset-env 前面的。等 @babel/plugin-transform-runtime 轉完了之后，再交給 preset-env 這時候已經做了無用的轉換 了。而 @babel/plugin-transform-runtime 并不支持 targets 的配置，就會做一些多余的轉換和 polyfill。 ~~~ >[danger] ##### 一個使用配置 ~~~ 1.二者可以組合使用的，下面就是只用'@babel/plugin-transform-runtime' 提取helper 函數能力 但不用他不污染全局墊片，是為了讓"@babel/env" target 可以進行最小依賴特性 { "presets": [ [ "@babel/env",{ "useBuiltIns": "usage", // 按需引入corejs "targets": { "chrome":20 }, "corejs": 3, // 使用corejs3 版本 "debug":true // 打印出來使用插件 } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": false,// 不使用防止污染全局墊片 "helpers": true, "regenerator": true, } ] ] } ~~~