babel主要處理步驟分為三個：解析、轉換、生成
解析步驟接受**輸出ast，該步驟分為兩個階段：詞法分析、語法分析。
詞法分析主要是對源**進行分詞，產生乙個叫做token的陣列，分割的單位是運算子、括號、數字、字串、標點符號等可以處理的最小單元。
然後語法分析再將所有的tokens組合成乙個整體，分析它們的語法和關係，最後輸出ast（源**的抽象語法樹）。
分成兩個階段後，更容易的對解析步驟作優化，因為解析步驟大部分的時間都在詞法分析過程中，同時也能提高可移植性。
對ast進行遍歷，遇到需要處理的節點就操作，包括新增、移除和更新等。這個也是外掛程式介入的主要工作內容。(這裡的工作都是基於前面**解析的結果，當然babel也提供了自定**析步驟的外掛程式功能）
最終再將ast轉換回字串形式的**。
function
customplugin
(babel)
}}
包含babel所有的api)，最後返回乙個包含visitor屬性的物件，visitor屬性中每個key都是乙個ast節點的型別，值就是訪問這個節點的函式。
每個訪問者函式都會接受兩個引數：path和state。path物件表示兩個節點之間連線的物件，例如：
,....}
,"node"
:}
state.opts中取出為外掛程式配置的特定選項，甚至可以取出path物件，具體內容可以自己列印看看。
下面開發乙個小外掛程式，為**中的console.log新增呼叫位置的資訊。
module.
exports
=function
(babel)
, column
$---`
; arguments.
push
(t.stringliteral
(location))}
}}}}
babel.types則提供了類似lodash的工具庫功能（api）。
最後再測試下外掛程式功能是否正常：
const
=require
('@babel/core'
)const options =]]
}const code =
` const str1 = 'hello'
console.log(str1)
const str2 = 'babel'
console.log(str2)
const str3 = 'plugin'
console.log(str3)
`transform
(code, options,
function
(err, result)
)
const str1 =
'hello'
;console.
log(str1,
"---trace: line 3, column 4---");
const str2 =
'babel'
;console.
log(str2,
"---trace: line 5, column 4---");
const str3 =
'plugin'
;console.
log(str3,
"---trace: line 7, column 4---"
);
自定義外掛程式
自定義外掛程式 建立自定義外掛程式1.建立工程 qt4 designer plugin 後續配置都使用預設值，這裡我們建立乙個 qhist 外掛程式。2.新建後，直接編譯，會產生如下錯誤 1 link fatal error lnk1181 cannot open input file qtdesi...
自定義外掛程式
工具類方法 擴充套件的語法 extend 呼叫 方法名 物件級別的方法 擴充套件語法 fn.extend 呼叫 選擇器 方法名 工具類 工具類方法 extend extend rtrim function str randomcode function num else if num 4 retur...
cordova 自定義外掛程式
在使用cordova 的過程中，雖然官方提供的外掛程式以及其他人開源的外掛程式較多。但有時為了實現某種需求，還是需要自己編寫外掛程式。以前總是會手動的配置cordova外掛程式，具體可以參考phonegap手動配置外掛程式 今天主要是介紹官方提供的plugman來建立外掛程式 首先，安裝plumam...