babel
Babel 是一個工具鍊，主要用于将 ECMAScript 2015+ 版本的代碼轉換為向後相容的 JavaScript 文法，以便能夠運作在目前和舊版本的浏覽器或其他環境中。
大緻看了一些浏覽器對ES6的支援情況，發現主流的浏覽器基本上都是支援ES6的，這就是很多新手沒有用過babel，很榮幸我也是其中的一位。但是随着ES版本的更新，babel還是有用武之地的。
核心庫（ @babel/core ）
npm install --save-dev @babel/core
核心庫常常和其他的庫配合使用。
控制台工具（CLI tool）
控制台工具安裝後可以通過控制台執行babel轉化
npm install --save-dev @babel/core @babel/cli
npx babel src --out-dir lib
# 執行指令後将根目錄下src檔案夾内所有js檔案轉化後移入lib檔案夾中
插件（Plugins）
babel提供很多插件用以定制化轉化方法，打開node_modules/@babel有很多以plugin開頭的檔案就是插件
npm install --save-dev @babel/plugin-transform-arrow-functions
npx babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
# 調用插件進行轉換，會将箭頭函數轉為普通函數
上面的方式是通過指令行轉換js檔案，如果需要需要很多插件的時候就需要一個配置檔案babel.config.js
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
},
],
];
/**
* 插件的三種形式
* 1、單個插件
* 2、插件數組
* 3、參數
*/
const plugins = ["pluginA", ["pluginA"], ["pluginA", {}]];
module.exports = { presets, plugins };
插件的短名稱
如果插件名稱的字首為
babel-plugin-
，你還可以使用它的短名稱：
{
"plugins": [
"myPlugin",
"babel-plugin-myPlugin" // 兩個插件實際是同一個
]
}
這也适用于帶有冠名（scope）的插件：
{
"plugins": [
"@org/babel-plugin-name",
"@org/name" // 兩個插件實際是同一個
]
}
預設（Presets）
預設是一種插件的組合，對一些特定環境使用，簡化人為的插件組合。常用的環境有：
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
首先需要先安裝@babel/preset-env
npm install --save-dev @babel/preset-env
npx babel src --out-dir lib --presets=@babel/env
轉化的時候會識别配置檔案babel.config.js中的env配置
預設有短名稱
{
"presets": [
"myPreset",
"babel-preset-myPreset" // equivalent
]
}
适用于帶有冠名（scope）的 preset：
{
"presets": [
"@org/babel-preset-name",
"@org/name" // equivalent
]
}
插件和預設的執行順序
- 插件在 Presets 前運作。
- 插件順序從前往後排列。
- Preset 順序是颠倒的（從後往前）。
附加（@babel/polyfill）
為了使某些功能能夠正常工作。你可以 通過引入 @babel/polyfill 來滿足 Babel 功能的 所有 需求。