Umi开发插件补遗

        Umi插件开发目前找到有效地资料只有在官网上有限的一点内容，这个内容实际上是不完整的，本文将完善这部分内容，后面假设插件名为plugin-my。官方教程主要的问题在于resetMainPath函数的缺失，resetMainPath函数的类型很容易判断，如下：function (routes: any[], mainPath: string)，这个函数的作用就是将routes中"/"对应的页面改为mainPath设置的页面。

        但问题在于routes的结构并不是很清晰，不知道如何对这个结构的内容进行调整。要实现这个函数，最有效的方式当然是能够先写出函数框架，然后断点进去后查看routes的格式后，再进行"/"默认页面的替换。

        那么，问题转化为，如何对插件中的这部分函数进行调试。首先，我做了这样的尝试：

        1、执行npm run build，得到lib/index.js，然后对index.js中resetMainPath设置了断点

        2、执行npm start，此时服务启动，跳转到浏览器

        3、执行Start Debugging，期望能在断点处停留

        但做完这些操作后，并没有得到预期的结果。原因在于umi对于插件的使用，实际上是在编译时执行，也就是plugin-my中的resetMainPath，实际是在编译时对内部的routes.ts进行修改。而Start Debugging设置为"type": "chrome"，这种Debugging针对的是运行时的umi应用。下图为umi启动后的源码结构：

        那怎么办呢？办法就是要对启动应用过程进行调试，启动的应用实际是node应用，类似于执行node umi.js。接下来就变成怎么找到这个umi.js。这时需要理解npm start时，到底做了什么。npm start执行的是：cross-env APP_ROOT=example umi dev。cross-env设置的是环境变量，主程序是umi，参数为dev。umi是可执行文件，并不是node应用，通过查看文件内容，可以跟踪到实际的node应用在./node_modules/umi/bin/umi.js，所以现在就是要对这个文件进行调试设置。

       在VSCode中新增了一个调试配置：

    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "env": {"APP_ROOT":"example"},
      "program": "./node_modules/umi/bin/umi.js",
      "args": ["dev"]
    }

       通过执行这段调试，index.js的相关断点就可以进入了：

       然后就可以愉快的编写resetMainPath函数了。完整的代码在github。