vue-tools调试到学习launch-editor源码

前言

第一次尝试看源码, 是受若川大大影响, 大大在群里发起了看源码的活动, 而且大大是我遇到的最有耐心的大佬, 愿意站在小白的角度为小白解惑, 博客干货多多
强烈推荐关注若川视野
尤大的launch-editor, 简短优雅, 条理清楚, 即使不了解node, 通过命名也能猜出代码逻辑。最大的三点收获:

node对于前端人提升自我的重要性:
我很难透彻的理解launch-editor, 很多基于node的, 我基本上每读一句就要去查文档, 在node环境下执行语句去测试。

获得一些关于代码规范的感性认知
比如, 下面这段代码, 如果是我写的话, 我会在for循环之前过滤掉runningProcesses中空字符串项并去掉每一项空格,在定义一个变量basenames的变量去处理runningProcesses
像我这样写的话, 虽然从逻辑上看没啥毛病, 从感性的角度就能觉得, 没有下面这样更规范更清晰, 按照我的做法处理了runningProcesses后, 它指向的对象已经和它命名有些出入, 处理得有些多余了.

if (process.platform === 'darwin') {
      // TODO
    } else if (process.platform === 'win32') {
      const output = childProcess
        .execSync('powershell -Command "Get-Process | Select-Object Path"', {
          stdio: ['pipe', 'pipe', 'ignore']
        })
        .toString() // 在powershell中执行Get-Process | Select-Object Path
      const runningProcesses = output.split('\r\n')
      for (let i = 0; i < runningProcesses.length; i++) {
        // `Get-Process` sometimes returns empty lines
        if (!runningProcesses[i]) {
          continue
        }

        const fullProcessPath = runningProcesses[i].trim()
        // ....
      }
    }

要想开发一个规范的插件, 不论功能大小, 需要考虑多种情况, 比如说不同的操作系统, 不同的编辑器等等条件.

记录

从第一次使用vue-tools工具来说，我觉得vue-tools的实现有两个难点：

找到选中组件对应的文件
在编辑器中打开对应文件
还有一个技术难点, 如何在浏览器中埋点, 找到对应的组件, 这个不是launch-editor实现的, 故不做讨论

找到选中组件对应的文件

在launch-editor-middleware中, 通过url的parse方法解析出文件地址, 并传给launch-editor
有个疑惑: launchEditorMiddleware这三个参数是哪来的

// launch-editor\packages\launch-editor-middleware
const url = require('url')
module.exports = (specifiedEditor, srcRoot, onErrorCallback) => {
// ... to handler specifiedEditor & srcRoot
return function launchEditorMiddleware (req, res, next) {

const { file } = url.parse(req.url, true).query || {} // file: src/components/HelloWorld.vue
// ...TODO
launch(path.resolve(srcRoot, file), specifiedEditor, onErrorCallback)
}
}

在编辑器中打开文件

launch-editor/index.js

if (process.platform === 'win32') {  // 我的系统是win32

// On Windows, launch the editor in a shell because spawn can only
// launch .exe files.
_childProcess = childProcess.spawn(
  'cmd.exe',
  // editor: C:\Program Files\JetBrains\WebStorm_2019.3.3\bin\webstorm64.exe
  // args: ['D:\codeStudy\open-in-editor\vue3-project\src\components\HelloWorld11.vue']
  ['/C', editor].concat(args),
  { stdio: 'inherit' }
)
}

可以改进的地方

在不指定编辑器的情况下, 且打开了多个编辑器时, 能正确地找到服务启动的编辑器和窗口

疑问

launch-editor\index.js的 parseFile方法中的lineNumber和columnNumber的作用是什么? 会有文件是以:数字结尾的吗?
launch-editor-middleware\index.js中的req, res, next三个参数是哪来的?

答疑

感谢若川大大解答我的疑惑

lineNumber和columnNumber是行号和列号, 对应文件中的第几行和第几列
是express的中间件

vue-tools打开文件

vue-tools调试到学习launch-editor源码

前言

记录

找到选中组件对应的文件

在编辑器中打开文件

可以改进的地方

疑问

答疑