【vscode自定义插件】二、一键调试、打包指定目录

插件开发背景

在monorepoH5项目中往往只需调试、打包单独的项目，但是执行npm run dev 或npm run build时会将整个项目运行或打包。通过执行携带参数的npm命令:npm run dev --targetTemplate=mono1,可以在vite.config.ts中使用process.env.npm_config_targetTemplate获取对应的值，我们可以通过配置中的server与build属性，将获取到targetTemplate对应的mono1传入，来实现调试或打包指定目录。打包这块的逻辑我借助了filemanager-plugin这个插件来实现的。
该项目背景可以参考我的这篇博客：monorepo在H5项目中的应用(一、项目搭建)
随着项目的增多，每次调试和打包都得通过命令行方式来执行调试、打包来说实在是太烦了，那么如何实现一键调试或者一键打包呢，就可以用上我们的vsocde自定义插件了。

代码实现

实现该功能也很简单1是获取到指定的目录包名，2是将命令拼接好传入命令行，这些vscode都有对应的api可以实现。
package.json中注册指令的代码这边就省略了，可以参考该链接: 【vscode自定义插件】一、Node版本一键切换

// extension.js
context.subscriptions.push(
    vscode.commands.registerCommand('demo.localDebug', uri => {
      let command = ''
      // uri.path 可以拿到选中目录的文件路径
      const targetTemplate = uri.path.split('/').pop()
      command = 'npm run dev --targetTemplate=' + targetTemplate
      // 创建命令台并发送指令api
      const terminal = vscode.window.createTerminal()
      terminal.show(true)
      terminal.sendText(command)
    })
  )

实现效果

可以看到代码并不复杂，但是可以让我们实现如下的操作。
选中mono1目录右键选中本地调试
，命令行自动输出
U1S1谁不喜欢鼠标点一下就能直接调试指定文件呢，队伍里的小伙伴们用了都说爽。
最后说一句，这里代码只是展示了最基础的功能，一些异常的处理就删减了，当然在工作中这些异常处理是不可省略的，在此基础上，我们也可以实现批量调试、批量打包等功能，这些就不一一演示了。