Vue-tools debug to learn launch-editor source code

preface

The first attempt to see the source code, is greatly affected by If sichuan, greatly in the group launched to see the source code activities, and is greatly the most patient I met big boss, willing to stand in the white Angle for white, blog dry many strongly recommended attention if Sichuan field of vision especially large launch-editor, brief elegant, coherent, Even if you don’t know node, you can guess the code logic by naming it. Three big takeaways:

  1. nodeThe importance of self-improvement for front-end people:

    It’s hard for me to understandlaunch-editorMany are based onnodeI basically have to look up documentation every time I read a sentence and test it by executing a statement in the Node environment.
  2. Get some information aboutCode specificationPerceptual cognition of

    For example, the following code, if I had written it, would be inThe for loopFilter it out beforeRunningProcesses A hollow character stringItem and remove Spaces from each item in defining a variablebasenamesTo processrunningProcesses

    If I write like this, although there is nothing wrong with it from a logical point of view, from an emotional point of view, I can feel that it is more standardized and clearer than the following, and I will deal with it as I dorunningProcessesAfter that, the object it points to has been named a little different from it, processing a little redundant. 
    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() / / performs a Get - Process in powershell | 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()
        / /...}}Copy the code
  3. To develop a standard plug-in, regardless of function size, you need to consider a variety of conditions, such as different operating systems, different editors, and so on.

record

From the first use of vuE-Tools, I think vue-Tools implementation has two difficulties:

  1. Locate the file for the selected component
  2. Open the corresponding file in the editor

There is also a technical difficulty, how to bury the spot in the browser and find the corresponding component, this is not implemented by the launch-Editor, so we will not discuss it

Locate the file for the selected component

In the case of launchEditorMiddleware, file addresses are parsed-through the URL and passed to the 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)
}
}

Copy the code

Open the file in the editor

launch-editor/index.js

if (process.platform === 'win32') {  // My system is 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'})}Copy the code

Areas that can be improved

When no editor is specified and multiple editors are open, the editor and window started by the service can be found correctly

doubt

  1. launch-editor\index.jstheparseFileWhat are the roles of lineNumber and columnNumber in the method? Will there be files that end in: numbers?
  2. launch-editor-middleware\index.jsIn thereq.res.nextWhere did the three parameters come from?

Answering questions

Thank you wakawa University for answering my questions

  1. LineNumber and columnNumber are the row and column numbers corresponding to the row and column numbers in the file
  2. Middleware for Express