當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘

發(fā)布時間：2023/12/9 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. 前言

你好，我是若川^[1]，微信搜索「若川視野」關(guān)注我，專注前端技術(shù)分享，一個愿景是幫助5年內(nèi)前端開闊視野走向前列的公眾號。歡迎加我微信ruochuan12，長期交流學(xué)習(xí)。

這是學(xué)習(xí)源碼整體架構(gòu)系列之 launch-editor 源碼（第九篇）。學(xué)習(xí)源碼整體架構(gòu)系列文章(有哪些必看的JS庫)：jQuery、underscore、lodash、sentry、vuex、axios、koa、redux。

本文倉庫地址^[2]：git clone https://github.com/lxchuan12/open-in-editor.git，本文最佳閱讀方式，克隆倉庫自己動手調(diào)試，容易吸收消化。

要是有人說到怎么讀源碼，正在讀文章的你能推薦我的源碼系列文章，那真是無以為報啊。

我的文章盡量寫得讓想看源碼又不知道怎么看的讀者能看懂。我都是推薦使用搭建環(huán)境斷點調(diào)試源碼學(xué)習(xí)，哪里不會點哪里，邊調(diào)試邊看，而不是硬看。正所謂：授人與魚不如授人予漁。

閱讀本文后你將學(xué)到：

如何解決該功能報錯問題

如何調(diào)試學(xué)習(xí)源碼

launch-editor-middleware、launch-editor 等實現(xiàn)原理

1.1 短時間找不到頁面對應(yīng)源文件的場景

不知道你們有沒有碰到這樣的場景，打開你自己（或者你同事）開發(fā)的頁面，卻短時間難以找到對應(yīng)的源文件。

這時你可能會想要是能有點擊頁面按鈕自動用編輯器打開對應(yīng)文件的功能，那該多好啊。

而vue-devtools提供了這樣的功能，也許你不知道。我覺得很大一部分人都不知道，因為感覺很多人都不常用vue-devtools。

open-in-editor

你也許會問，我不用vue，我用react有沒有類似功能啊，有啊，請看react-dev-inspector^[3]。你可能還會問，支持哪些編輯器呀，主流的 vscode、webstorm、atom、sublime 等都支持，更多可以看這個列表 Supported editors^[4]。

本文就是根據(jù)學(xué)習(xí)尤大寫的 launch-editor^[5] 源碼，本著知其然，知其所以然的宗旨，探究 vue-devtools「在編輯器中打開組件」功能實現(xiàn)原理。

1.2 一句話簡述其原理

code?path/to/file

一句話簡述原理：利用nodejs中的child_process，執(zhí)行了類似code path/to/file命令，于是對應(yīng)編輯器就打開了相應(yīng)的文件，而對應(yīng)的編輯器則是通過在進程中執(zhí)行ps x（Window則用Get-Process）命令來查找的，當(dāng)然也可以自己指定編輯器。

1.3 打開編輯器無法打開組件的報錯解決方法

而你真正用這個功能時，你可能碰到報錯，說不能打開這個文件。

Could?not?open?App.vue?in?the?editor.To?specify?an?editor,?specify?the?EDITOR?env?variable?or?add?"editor"?field?to?your?Vue?project?config. 控制臺不能打開編輯器的錯誤提示

這里說明下寫這篇文章時用的是 Windows 電腦，VSCode 編輯器，在Ubuntu子系統(tǒng)下使用的終端工具。同時推薦我的文章使用 ohmyzsh 打造 windows、ubuntu、mac 系統(tǒng)高效終端命令行工具，用過的都說好。

解決辦法也簡單，就是這句英文的意思。

1.3.1 方法一：先確保在終端能用命令打開你使用的編輯器，文中以VSCode為例

如果你的命令行本身就不能運行code等命令打開編輯器，那肯定是報錯的。這時需要把VSCode注入到命令行終端中。注入方法也簡單。我的交流群里有小伙伴提供了mac電腦的截圖。

mac 電腦在 VSCode command + shift + p，Windows 則是 ctrl + shift + p。然后輸入shell，選擇安裝code。如下圖：

Install 'code' command in PATH

這樣就能在終端中打開VSCode的了。

如果能在終端打開使用命令編輯器能打開，但實際上還是報錯，那么大概率是沒有識別到你的編輯器。那么可以通過方法二設(shè)置指定編輯器。

1.3.2 方法二：具體說明編輯器，在環(huán)境變量中說明指定編輯器

在vue項目的根目錄下，對應(yīng)本文則是：vue3-project，添加.env.delelopment文件，其內(nèi)容是EDITOR=code。這里重點說明下，我的 vue-cli 版本是4.5.12，好像在vue-cli 3.5及以上版本才支持自定義EDITOR這樣的環(huán)境變量。

#?.env.development #?當(dāng)然，我的命令行終端已經(jīng)有了code這個命令。 EDITOR=code

不用指定編輯器的對應(yīng)路徑（c/Users/lxchu/AppData/Local/Programs/Microsoft VS Code/bin/code），因為會報錯。為什么會報錯，因為我看了源碼且試過。因為會被根據(jù)空格截斷，變成c/Users/lxchu/AppData/Local/Programs/Microsoft，當(dāng)然就報錯了。

也有可能你的編輯器路徑有中文路徑導(dǎo)致報錯，可以在環(huán)境變量中添加你的編輯器路徑。

如果你通過以上方法，還沒解決報錯問題。歡迎留言，或者加我微信 ruochuan12 交流。畢竟電腦環(huán)境不一，很難保證所有人都能正常執(zhí)行，但我們知道了其原理，就很容易解決問題。

接下來我們從源碼角度探究「在編輯器中打開組件」功能的實現(xiàn)原理。

2. vue-devtools Open component in editor 文檔

探究原理之前，先來看看vue-devtools官方文檔。

vuejs/vue-devtools^[6]文檔

Open component in editor
To enable this feature, follow this guide^[7].

這篇指南中寫了在Vue CLI 3中是開箱即用。

Vue?CLI?3?supports?this?feature?out-of-the-box?when?running?vue-cli-service?serve.

也詳細(xì)寫了如何在Webpack下使用。

#?1.?Import?the?package: var?openInEditor?=?require('launch-editor-middleware') #?2.?In?the?devServer?option,?register?the?/__open-in-editor?HTTP?route: devServer:?{before?(app)?{app.use('/__open-in-editor',?openInEditor())} } #?3.?The?editor?to?launch?is?guessed.?You?can?also?specify?the?editor?app?with?the?editor?option.?See?the?supported?editors?list. #?用哪個編輯器打開會自動猜測。你也可以具體指明編輯器。這里顯示更多的支持編輯器列表 openInEditor('code') #?4.?You?can?now?click?on?the?name?of?the?component?in?the?Component?inspector?pane?(if?the?devtools?knows?about?its?file?source,?a?tooltip?will?appear). #?如果`vue-devtools`開發(fā)者工具有提示點擊的組件的顯示具體路徑，那么你可以在編輯器打開。

同時也寫了如何在Node.js中使用等。

Node.js
You can use the launch-editor^[8] package to setup an HTTP route with the /__open-in-editor path. It will receive file as an URL variable.

查看更多可以看這篇指南^[9]。

3. 環(huán)境準(zhǔn)備工作

熟悉我的讀者，都知道我都是推薦調(diào)試看源碼的，正所謂：哪里不會點哪里。而且調(diào)試一般都寫得很詳細(xì)，是希望能幫助到一部分人知道如何看源碼。于是我特意新建一個倉庫open-in-editor^[10] git clone https://github.com/lxchuan12/open-in-editor.git，便于大家克隆學(xué)習(xí)。

安裝vue-cli

npm?install?-g?@vue/cli #?OR yarn?global?add?@vue/cli node?-V #?v14.16.0 vue?-V? #?@vue/cli?4.5.12 vue?create?vue3-project #?這里選擇的是vue3、vue2也是一樣的。 #?Please?pick?a?preset:?Default?(Vue?3?Preview)?([Vue?3]?babel,?eslint) npm?install #?OR yarn?install

這里同時說明下我的vscode版本。

code?-v 1.55.2

前文提到的Vue CLI 3中開箱即用和Webpack使用方法。

vue3-project/package.json中有一個debug按鈕。

debug示意圖

選擇第一項，serve vue-cli-service serve。

我們來搜索下'launch-editor-middleware'這個中間件，一般來說搜索不到node_modules下的文件，需要設(shè)置下。當(dāng)然也有個簡單做法。就是「排除的文件」右側(cè)旁邊有個設(shè)置圖標(biāo)「使用“排查設(shè)置”與“忽略文件”」，點擊下。

其他的就不贅述了。可以看這篇知乎回答：vscode怎么設(shè)置可以搜索包含node_modules中的文件?^[11]

這時就搜到了vue3-project/node_modules/@vue/cli-service/lib/commands/serve.js中有使用這個中間件。

4. vue-devtools 開箱即用具體源碼實現(xiàn)

接著我們來看Vue CLI 3中開箱即用具體源碼實現(xiàn)。

//?vue3-project/node_modules/@vue/cli-service/lib/commands/serve.js //?46行 const?launchEditorMiddleware?=?require('launch-editor-middleware') //?192行 before?(app,?server)?{//?launch?editor?support.//?this?works?with?vue-devtools?&?@vue/cli-overlayapp.use('/__open-in-editor',?launchEditorMiddleware(()?=>?console.log(`To?specify?an?editor,?specify?the?EDITOR?env?variable?or?`?+`add?"editor"?field?to?your?Vue?project?config.\n`)))//?省略若干代碼... }

點擊vue-devtools中的時，會有一個請求，http://localhost:8080/__open-in-editor?file=src/App.vue，不出意外就會打開該組件啦。

open src/App.vue in editor

接著我們在launchEditorMiddleware的具體實現(xiàn)。

5. launch-editor-middleware

看源碼時，先看調(diào)試截圖。

debug-launch

在launch-editor-middleware中間件中作用在于最終是調(diào)用 launch-editor 打開文件。

//?vue3-project/node_modules/launch-editor-middleware/index.js const?url?=?require('url') const?path?=?require('path') const?launch?=?require('launch-editor')module.exports?=?(specifiedEditor,?srcRoot,?onErrorCallback)?=>?{//?specifiedEditor?=>?這里傳遞過來的則是?()?=>?console.log()?函數(shù)//?所以和?onErrorCallback?切換下，把它賦值給錯誤回調(diào)函數(shù)if?(typeof?specifiedEditor?===?'function')?{onErrorCallback?=?specifiedEditorspecifiedEditor?=?undefined}//?如果第二個參數(shù)是函數(shù)，同樣把它賦值給錯誤回調(diào)函數(shù)//?這里傳遞過來的是undefinedif?(typeof?srcRoot?===?'function')?{onErrorCallback?=?srcRootsrcRoot?=?undefined}//?srcRoot?是傳遞過來的參數(shù)，或者當(dāng)前node進程的目錄srcRoot?=?srcRoot?||?process.cwd()//?最后返回一個函數(shù)，?express?中間件return?function?launchEditorMiddleware?(req,?res,?next)?{//?省略?...} }

上一段中，這種切換參數(shù)的寫法，在很多源碼中都很常見。為的是方便用戶調(diào)用時傳參。雖然是多個參數(shù)，但可以傳一個或者兩個。

可以根據(jù)情況打上斷點。比如這里我會在launch(path.resolve(srcRoot, file), specifiedEditor, onErrorCallback)打斷點。

//?vue3-project/node_modules/launch-editor-middleware/index.js module.exports?=?(specifiedEditor,?srcRoot,?onErrorCallback)?=>?{//?省略上半部分return?function?launchEditorMiddleware?(req,?res,?next)?{//?根據(jù)請求解析出file路徑const?{?file?}?=?url.parse(req.url,?true).query?||?{}//?如果沒有文件路徑，則報錯if?(!file)?{res.statusCode?=?500res.end(`launch-editor-middleware:?required?query?param?"file"?is?missing.`)}?else?{//?否則拼接路徑，用launch打開。launch(path.resolve(srcRoot,?file),?specifiedEditor,?onErrorCallback)res.end()}} }

6. launch-editor

跟著斷點來看，走到了launchEditor函數(shù)。

//?vue3-project/node_modules/launch-editor/index.js function?launchEditor?(file,?specifiedEditor,?onErrorCallback)?{//?解析出文件路徑和行號列號等信息const?parsed?=?parseFile(file)let?{?fileName?}?=?parsedconst?{?lineNumber,?columnNumber?}?=?parsed//?判斷文件是否存在，不存在，直接返回。if?(!fs.existsSync(fileName))?{return}//?所以和?onErrorCallback?切換下，把它賦值給錯誤回調(diào)函數(shù)if?(typeof?specifiedEditor?===?'function')?{onErrorCallback?=?specifiedEditorspecifiedEditor?=?undefined}//?包裹一層函數(shù)onErrorCallback?=?wrapErrorCallback(onErrorCallback)//?猜測當(dāng)前進程運行的是哪個編輯器const?[editor,?...args]?=?guessEditor(specifiedEditor)if?(!editor)?{onErrorCallback(fileName,?null)return}//?省略剩余部分，后文再講述... }

6.1 wrapErrorCallback 包裹錯誤函數(shù)回調(diào)

onErrorCallback?=?wrapErrorCallback(onErrorCallback)

這段的代碼，就是傳遞錯誤回調(diào)函數(shù)，wrapErrorCallback 返回給一個新的函數(shù)，wrapErrorCallback 執(zhí)行時，再去執(zhí)行 onErrorCallback(cb)。

我相信讀者朋友能看懂，我單獨拿出來講述，主要是因為這種包裹函數(shù)的形式在很多源碼里都很常見。

這里也就是文章開頭終端錯誤圖Could not open App.vue in the editor.輸出的代碼位置。

//?vue3-project/node_modules/launch-editor/index.js function?wrapErrorCallback?(cb)?{return?(fileName,?errorMessage)?=>?{console.log()console.log(chalk.red('Could?not?open?'?+?path.basename(fileName)?+?'?in?the?editor.'))if?(errorMessage)?{if?(errorMessage[errorMessage.length?-?1]?!==?'.')?{errorMessage?+=?'.'}console.log(chalk.red('The?editor?process?exited?with?an?error:?'?+?errorMessage))}console.log()if?(cb)?cb(fileName,?errorMessage)} }

6.2 guessEditor 猜測當(dāng)前正在使用的編輯器

這個函數(shù)主要做了如下四件事情：

如果具體指明了編輯器，則解析下返回。

找出當(dāng)前進程中哪一個編輯器正在運行。macOS 和 Linux 用 ps x 命令
windows 則用 Get-Process 命令

如果都沒找到就用 process.env.VISUAL或者process.env.EDITOR。這就是為啥開頭錯誤提示可以使用環(huán)境變量指定編輯器的原因。

最后還是沒有找到就返回[null]，則會報錯。

const?[editor,?...args]?=?guessEditor(specifiedEditor) if?(!editor)?{onErrorCallback(fileName,?null)return } //?vue3-project/node_modules/launch-editor/guess.js const?shellQuote?=?require('shell-quote') const?childProcess?=?require('child_process')module.exports?=?function?guessEditor?(specifiedEditor)?{//?如果指定了編輯器，則解析一下，這里沒有傳入。如果自己指定了路徑。//?比如?c/Users/lxchu/AppData/Local/Programs/Microsoft?VS?Code/bin/code?//???會根據(jù)空格切割成?c/Users/lxchu/AppData/Local/Programs/Microsoftif?(specifiedEditor)?{return?shellQuote.parse(specifiedEditor)}//?We?can?find?out?which?editor?is?currently?running?by://?`ps?x`?on?macOS?and?Linux//?`Get-Process`?on?Windowstry?{//??代碼有刪減if?(process.platform?===?'darwin')?{const?output?=?childProcess.execSync('ps?x').toString()//?省略}?else?if?(process.platform?===?'win32')?{const?output?=?childProcess.execSync('powershell?-Command?"Get-Process?|?Select-Object?Path"',?{stdio:?['pipe',?'pipe',?'ignore']}).toString()//?省略}?else?if?(process.platform?===?'linux')?{const?output?=?childProcess.execSync('ps?x?--no-heading?-o?comm?--sort=comm').toString()}}?catch?(error)?{//?Ignore...}//?Last?resort,?use?old?skool?env?varsif?(process.env.VISUAL)?{return?[process.env.VISUAL]}?else?if?(process.env.EDITOR)?{return?[process.env.EDITOR]}return?[null] }

看完了 guessEditor 函數(shù)，我們接著來看 launch-editor 剩余部分。

6.3 launch-editor 剩余部分

以下這段代碼不用細(xì)看，調(diào)試的時候細(xì)看就行。

//?vue3-project/node_modules/launch-editor/index.js function?launchEditor(){//??省略上部分...if?(process.platform?===?'linux'?&&fileName.startsWith('/mnt/')?&&/Microsoft/i.test(os.release()))?{//?Assume?WSL?/?"Bash?on?Ubuntu?on?Windows"?is?being?used,?and//?that?the?file?exists?on?the?Windows?file?system.//?`os.release()`?is?"4.4.0-43-Microsoft"?in?the?current?release//?build?of?WSL,?see:?https://github.com/Microsoft/BashOnWindows/issues/423#issuecomment-221627364//?When?a?Windows?editor?is?specified,?interop?functionality?can//?handle?the?path?translation,?but?only?if?a?relative?path?is?used.fileName?=?path.relative('',?fileName)}if?(lineNumber)?{const?extraArgs?=?getArgumentsForPosition(editor,?fileName,?lineNumber,?columnNumber)args.push.apply(args,?extraArgs)}?else?{args.push(fileName)}if?(_childProcess?&&?isTerminalEditor(editor))?{//?There's?an?existing?editor?process?already?and?it's?attached//?to?the?terminal,?so?go?kill?it.?Otherwise?two?separate?editor//?instances?attach?to?the?stdin/stdout?which?gets?confusing._childProcess.kill('SIGKILL')}if?(process.platform?===?'win32')?{//?On?Windows,?launch?the?editor?in?a?shell?because?spawn?can?only//?launch?.exe?files._childProcess?=?childProcess.spawn('cmd.exe',['/C',?editor].concat(args),{?stdio:?'inherit'?})}?else?{_childProcess?=?childProcess.spawn(editor,?args,?{?stdio:?'inherit'?})}_childProcess.on('exit',?function?(errorCode)?{_childProcess?=?nullif?(errorCode)?{onErrorCallback(fileName,?'(code?'?+?errorCode?+?')')}})_childProcess.on('error',?function?(error)?{onErrorCallback(fileName,?error.message)}) }

這一大段中，主要的就是以下代碼，用子進程模塊。簡單來說子進程模塊有著執(zhí)行命令的能力。

const?childProcess?=?require('child_process')if?(process.platform?===?'win32')?{//?On?Windows,?launch?the?editor?in?a?shell?because?spawn?can?only//?launch?.exe?files._childProcess?=?childProcess.spawn('cmd.exe',['/C',?editor].concat(args),{?stdio:?'inherit'?})}?else?{_childProcess?=?childProcess.spawn(editor,?args,?{?stdio:?'inherit'?}) }

行文至此，就基本接近尾聲了。原理其實就是利用nodejs中的child_process，執(zhí)行了類似code path/to/file命令。

7. 總結(jié)

這里總結(jié)一下：首先文章開頭通過提出「短時間找不到頁面對應(yīng)源文件的場景」，并針對容易碰到的報錯情況給出了解決方案。其次，配置了環(huán)境跟著調(diào)試學(xué)習(xí)了vue-devtools中使用的尤大寫的 yyx990803/launch-editor^[12]。

7.1 一句話簡述其原理

我們回顧下開頭的原理內(nèi)容。

code?path/to/file

最后還能做什么呢。

可以再看看 umijs/launch-editor^[13] 和 react-dev-utils/launchEditor.js^[14] 。他們的代碼幾乎類似。

也可以利用Node.js做一些提高開發(fā)效率等工作，同時可以學(xué)習(xí)child_process等模塊。

也不要禁錮自己的思維，把前端禁錮在頁面中，應(yīng)該把視野拓寬。

Node.js是我們前端人探索操作文件、操作網(wǎng)絡(luò)等的好工具。

如果讀者朋友發(fā)現(xiàn)有不妥或可改善之處，再或者哪里沒寫明白的地方，歡迎評論指出。另外覺得寫得不錯，對您有些許幫助，可以點贊、評論、轉(zhuǎn)發(fā)分享，也是對我的一種支持，萬分感謝。如果能關(guān)注我的前端公眾號：「若川視野」，就更好啦。

參考資料

[1]

若川:?https://lxchuan12.gitee.io

[2]

本文倉庫地址:?https://github.com/lxchuan12/open-in-editor.git

[3]

更多參考鏈接，可以點擊閱讀原文查看

最近組建了一個江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你進群。

·················?若川出品?·················

今日話題

之前發(fā)的閱讀量慘淡，所以現(xiàn)在主要改了標(biāo)題，還有根據(jù)讀者一些反饋修改更新，所以重新編輯發(fā)布下原創(chuàng)，爭取投稿到一些大號。歡迎在下方留言~? 歡迎分享、收藏、點贊、在看我的公眾號文章~

一個愿景是幫助5年內(nèi)前端人走向前列的公眾號

可加我個人微信?ruochuan12，長期交流學(xué)習(xí)

總結(jié)

以上是生活随笔為你收集整理的据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： tuxedo中间件tmadmin的命令使
下一篇： Rhino基础教程---三管混接