umi 調試

最近在umi.  設置一個layout字段， 結果左邊菜單欄就出現了。 很神奇。 決定對這個庫一探究竟。

我是一個喜歡看底層庫的人，網上所有的啟動方式都是yarn或者npm start 啟動服務。然后在瀏覽器運行調試的。 這個調試的是前端。

我想調試的是后端。 通過跟蹤，發現其實

yarn start  調用的是 umi dev

umi  是一個軟連接到umi.js的文件

#!/usr/bin/env node

const resolveCwd = require('resolve-cwd');

const { name, bin } = require('../package.json');
const localCLI = resolveCwd.silent(`${name}/${bin['umi']}`);
const b = !process.env.USE_GLOBAL_UMI && localCLI && localCLI !== __filename;
if (b) {
  const debug = require('@umijs/utils').createDebug('umi:cli');
  debug('Using local install of umi');
  console.log(`localCLI:${localCLI}`);
  require(localCLI);
} else {
  require('../lib/cli');
}

 

也就是其實執行的umi/lib/cli.js文件,  關鍵部分代碼

_asyncToGenerator(function* () {
  try {
    switch (args._[0]) {
      case 'dev':
        const child = (0, _fork.default)({
          scriptPath: require.resolve('./forkedDev')
        }); // ref:
        // http://nodejs.cn/api/process/signal_events.html

        process.on('SIGINT', () => {
          child.kill('SIGINT');
        });
        process.on('SIGTERM', () => {
          child.kill('SIGTERM');
        });
        break;

也就是fork的forkedDev文件

 

於是就有了vscode的調試配置文件。launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/node_modules/umi/lib/forkedDev.js",
            "args": [
                "dev"
            ],
            "cwd": "${workspaceFolder}",
            "outFiles": [
                "${workspaceFolder}/**/*.js"
            ]
        }
    ]
}

　　可以調試umi服務端了。