大家好！！，好久不見，過年還開心嗎？作者在這兒先給大家拜個晚年，祝大家晚年幸福QAQ。翻過這個年，發(fā)現(xiàn)Vue最新版本的官方文檔^[1] 正式上線了，大家都去圍觀過了么？除了新的界面和暗黑主題之外，最大的亮點莫過于這個Vue Playground^[2]，它提供一個在線的可交互編輯環(huán)境，實現(xiàn)在線上直接調(diào)試文檔提供的案例代碼， 而且十分的輕量。

什么是REPL(交互式解釋器)

REPL(Read Eval Print Loop:交互式解釋器) 表示一個我們可以在其中輸入命令或者代碼，并且可以接收到解釋器響應(yīng)的一個環(huán)境。主要有四大特征組成。

• 讀取 Read - 讀取用戶輸入，解析輸入的數(shù)據(jù)結(jié)構(gòu)并存儲在內(nèi)存中。
• 執(zhí)行 Eval - 執(zhí)行輸入的數(shù)據(jù)結(jié)構(gòu)
• 打印 Print - 輸出結(jié)果
• 循環(huán) Loop - 循環(huán)操作以上步驟直到用戶退出。

也就是說我們現(xiàn)在所用的所有代碼編輯器其實都是一個REPL(交互式解釋器)

什么是在線REPL(交互解釋器)

我們?nèi)粘Ｊ褂玫拇a編輯器大多是通過軟件包下載到本地安裝的，因為在本地系統(tǒng)環(huán)境下可以得到更好更流暢的交互和編譯體驗。但是在某些場景下，網(wǎng)頁版的交互解釋器更具有優(yōu)勢，比如

• 我有一段代碼，我想分享給別人看看，通過網(wǎng)頁URL的形式明顯比傳輸代碼包的形式更方便
• 我寫了一個組件，需要有個預(yù)覽地址或者內(nèi)嵌一個iframe預(yù)覽鏈接放在我的文檔里面
• 我想在最簡環(huán)境下復(fù)現(xiàn)一個bug，但是我又覺得重新開一個項目太麻煩，我希望有一個網(wǎng)頁，打開就能直接寫代碼，最好我常用的依賴都內(nèi)置在上面
• 可以把在線編輯的代碼下載下來在本地運(yùn)行

很巧，上面這些場景Vue的Playground都比較好的解決了

存在的問題

雖然Vue的Playground具備了在線交互解釋器的所有特征，但是他只預(yù)置了Vue的運(yùn)行環(huán)境，假設(shè)我想預(yù)置更多的模塊，比如我想讓他天然支持lodash，支持組件庫， 支持各種工具函數(shù)，應(yīng)該怎么做呢？

作者自己是做開源組件庫的，作業(yè)已經(jīng)寫好了，有興趣抄作業(yè)并且沒興趣看實現(xiàn)的同學(xué)們可以直接看這里了，理論上你們也可以很輕易的抄出來一個屬于你自己的在線編輯器

• Varlet UI Playground^[3]
• 源碼^[4]

如何實現(xiàn)的

首先打開Vue Playground的源碼可以發(fā)現(xiàn)，整個交互解釋器的核心在@vue/repl這個依賴中，Vue Playground也只是對@vue/repl進(jìn)行了集成。

我們可以看到尤大把@vue/repl的生命周期抽象成了一個class，并包含在了@vue/repl中，我們再去看它的具體實現(xiàn)， 只需要照葫蘆畫瓢的實現(xiàn)一下這個class，并且加入我們的預(yù)置的代碼，就可以了，有興趣的可以看看下面提供的修改前后，對比一下。

Vue Playground源碼^[5]

修改前\@vue/repl提供的class^[6]

修改后的class^[7]

注入依賴列表

如下圖所示，@vue/repl的class只預(yù)置了vue，如果你需要預(yù)置更多的第三方模塊，可以在這里注入(合并對象即可)。需要特別注意的是，因為整個解釋器基于Vite，所以依賴的第三方模塊必須是一個esm模塊。

作者的版本注入列表大概是這樣的。key是模塊別名，value是模塊的cdn地址，因為作者這里直接將依賴放到了public目錄下一起打包了，所以使用了相對路徑。

{
  '@varlet/ui': './varlet.esm.js',                        
  '@varlet/touch-emulator': './varlet-touch-emulator.js'
}
復(fù)制代碼

注入預(yù)置文件

在確定了依賴之后，就可以添加預(yù)置的文件和代碼了，預(yù)置的文件存儲在state.files中，我們可以推入自己需要追加的文件

作者是這樣追加的

然后...

然后就可以在解釋器中正常訪問預(yù)置的文件了，文章只是方便大家理解其中的重點，推薦大家去看源碼，源碼很短，作者抄Vue官方的案例到上線也就花了一個多小時，但是帶來的收益確實非常巨大。

作者很也推薦在企業(yè)內(nèi)部搭建這樣的在線編輯平臺，集成一些常用的模塊來做一些漏洞反饋，分享代碼，寫一些草案之類的事情，關(guān)鍵的關(guān)鍵，也花不了幾分種的時間。

最后

作者的團(tuán)隊在積極的維護(hù)著我們的開源項目Varlet，它是一個基于 Vue3 開發(fā)的 Material 風(fēng)格移動端組件庫，Varlet UI Playground也正式上線了，歡迎大家使用它來給我們做bug反饋，或者作為一個把玩我們組件庫的一個快捷途徑(畢竟很多人懶得去裝依賴)，也同樣感謝社區(qū)對我們的支持和幫助，新的一年我們會再接再厲。

支持我們或者覺得我們做的還不錯的話，下方有我們的倉庫地址，幫我們點一個小小的star，同學(xué)們的支持是我們開源的全部動力。

Github倉庫地址^[8] 文檔地址^[9]