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服务端了。