Vue3 launch-editor源码解读

若川的解读文章
据说 99% 的人不知道 vue-devtools 还能直接打开对应组件文件？本文原理揭秘： https://juejin.cn/post/6959348263547830280
尤雨溪开发的 vue-devtools 如何安装，为何打开文件的功能鲜有人知？：https://juejin.cn/post/6994289281141309476

川哥最近组织了一次源码共读活动。每周读 200 行左右的源码。感兴趣可以关注他的公众号若川视野。

准备

1. 把川哥的文章过一遍，明确目标
2. 学习目标：了解vue-devtools打开组件实现原理

具体操作

使用的组件

主要launch-editor-middleware和launch-editor两个库的使用

launch-editor-middleware

launch-editor-middleware中间件的主要作用调用launch-editor

源码调用

// 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.
    // 调用launchEditorMiddleware
    app.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`
    )))
    // 省略若干代码...
}

const url = require('url')
const path = require('path')
const launch = require('launch-editor')

// 根据上面的代码看出specifiedEditor传入的是个返回值为console.log()的函数
module.exports = (specifiedEditor, srcRoot, onErrorCallback) => {
   
  if (typeof specifiedEditor === 'function') {
   
    onErrorCallback = specifiedEditor// 赋值给onErrorCallback
    specifiedEditor = undefined
  }

  if (typeof srcRoot === 'function') {
   
    onErrorCallback = srcRoot
    srcRoot = undefined
  }

  // srcRoot 是传递过来的参数，或者当前node进程的目录
  srcRoot = srcRoot || process.cwd()

  // 返回中间件函数