各位看官git上求個星星！ 我有趣的前端筆記！！（webpack，babel，typescript，手撕排序算法等持續更新中！！）
0、基礎
我們先看看 Babel 能夠做什么：
- 語法轉換
- 通過
Polyfill方式在目標環境中添加缺失的特性(@babel/polyfill模塊) - 源碼轉換(codemods)
1、起步
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
2、配置文件
創建 babel.config.json 配置文件
//樣例
{
"presets": [
[
//預設
"@babel/env",
{
//目標瀏覽器版本
//也可設置browserslist 將使用默認配置> 0.5%, last 2 versions, Firefox ESR, not dead。
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
//
"useBuiltIns": "usage",
"corejs": 3
}
]
],
//下載需要的插件 並將其對應的放入即可
"plugins": []
}
參數分析
-
preset-預設
- 官方推薦 env 會根據你配置的目標環境，生成插件列表來編譯。
因為語法轉換只是將高版本的語法轉換成低版本的，但是新的內置函數、實例方法無法轉換。
例如 箭頭函數 reduce函數 會被轉換成低版本， 但 promise /async/await 還有 class等 這種內置方法並不可以，因此就需要polyfill
-
polyfill-墊片（轉換內置函數/方法）被廢棄！！
- 由於已被廢棄 不再展示 但有引導作用
原因是太大了！雖然能幫助轉換 但每次需要轉換時，就必須要將其全部引入（多達89K！）會將不必要的在引入至全局。憨不憨？但如何解決嫩？ babel官方已經給出方法了 接着看！
-
useBuiltIns-位於預設中的參數 上方演示代碼有
- 官方推薦 usage
顧名思義 當我需要墊片polyfill去轉換內置方法時 會自動加載所需要的 即按需加載！
在文件需要的位置單獨按需引入，可以保證在每個bundler中只引入一份。當前模式類似於@babel/plugin-transform-runtime，polyfill局部使用，制造一個沙盒環境，不造成全局污染。但是當你組件過多時呢？會重復打包相同的代碼，因此我們可以看下方的entry
但要注意corejs參數問題 下面有解析
- entry
需要在項目入口處引入import "@babel/polyfill”;
看起來是全局導入，但不同的是 插件@babel/preset-env會將把@babel/polyfill根據實際需求打散，只留下必須的。實際上編譯時會只import需要的core-js/xxx
- false 此為默認參數
啥都別搞 我自己plugins
-
core-js - 核心塊
- 不曉得這是干什么的？ 看看上面示例代碼 他是跟着useBuiltIns一起的！
當用
useBuiltIns:usage必須要同時設置corejs(如果不設置，會給出警告，默認使用的是"corejs": 2) ，注意: 這里仍然需要安裝@babel/polyfill(當前@babel/polyfill版本默認會安裝 "corejs": 2):首先說一下使用
core-js@3的原因，core-js@2分支中已經不會再添加新特性，新特性都會添加到core-js@3。例如你使用了Array.prototype.flat()，如果你使用的是core-js@2，那么其不包含此新特性。為了可以使用更多的新特性，建議大家使用core-js@3。 -
plugins 關注
@babel/plugin-transform-runtime插件！！- 當你有一些和瀏覽器沒關系的轉換要求？
不怕 plugins滿足你 看官網找到對應的plugin ,
1、安裝
2、寫在
babel.config.json的plugins數組中即可！ easy- 此時不得不提剛剛說到的
@babel/plugin-transform-runtime插件
即使我們有了神器按需加載，但當我們用到同一個轉換方法或
class轉換低版本時也會被重復 import 這反而會使代碼增大！！這個時候，就是
@babel/plugin-transform-runtime插件大顯身手的時候了，使用@babel/plugin-transform-runtime插件，所有幫助程序都將引用模塊@babel/runtime，這樣就可以避免編譯后的代碼中出現重復的幫助程序，有效減少包體積。- 如何使用呢？
npm install --save-dev @babel/plugin-transform-runtime npm install --save @babel/runtimeplugins中引入即可！
##最終版##
{ "presets": [ [ "@babel/preset-env" ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "corejs": 3 } ] ] }
3、調用編譯(命令方式)
調用babel命令 將src中的文件 編譯后放到lib中
./node_modules/.bin/babel src --out-dir lib
或
npx babel src --out-dir lib
npx 與 npm區別
npx是一個工具，就像npm極大地提升了我們安裝和管理包依賴的體驗，在npm的基礎之上，npx讓npm包中的命令行工具和其他可執行文件在使用上變得更加簡單。它極大地簡化了我們之前使用純粹的npm時所需要的大量步驟。
主要特點：
1、臨時安裝可執行依賴包，不用全局安裝，不用擔心長期的污染。
2、可以執行依賴包中的命令，安裝完成自動運行。
3、自動加載node_modules中依賴包，不用指定$PATH。此處的編譯命令即用到了這個特點
4、可以指定node版本、命令的版本，解決了不同項目使用不同版本的命令的問題。