关于前端:如何让-unicli-创建的项目拥有运行自动打开开发者调试工具的能力

前言：

对于前端的 IDE，风行的无非也就那么几款，但若要问那款编辑器最好用，那无疑是 vscode 开发的最舒服了，不得不说 vscode 的代码提醒，引入跳转，主动补全引入语句等性能，并且 git 反对很不错，加上 typescript 后开发体验真的是晋升到了一个很高的品位。

但 HBuilderX 在这些方面的反对真是太差了，只有内置的代码提醒，没有 d.ts 文件的反对，自定义扩大性能少，应用 typescript 开发齐全失落了类型提醒，使得 typescript 在编写时发现问题的这个劣势齐全失落。

所以咱们公司的多端程序都应用了 uni-cli 脚手架搭建的我的项目运行，在 vscode 中运行，但相比 HBuilderX 却短少了运行后主动关上小程序的性能，那么问题来了，HBuilderX都能做到，为什么咱们 vscode 做不到呢！

其实做这个很简略，导致我一度狐疑 HBuilderX 为了推广他自家的编译器而不做这个性能 …（事实上的确如此）目前我曾经做成了一个第三方插件，间接应用即可，该文章的次要目标是记录当中所用到的技术，如怎么本人做一个脚手架程序等。

集体博客：gitee.io/mao-blog

脚手架主动关上小程序：open-devtools

微信小程序命令行 v2

微信开发者工具提供了 cli 命令，可用于在内部应用 cmd 关上和操控我的项目，这里只应用局部指令，感兴趣的同学能够去看官网文档

首先找到开发者工具的目录下，cmd关上当前目录，咱们创立一个小程序我的项目放在开发者工具的根目录下，而后试着应用命令行关上我的项目。

cd F:softs 微信 web 开发者工具
cli open --project F:softs 微信 web 开发者工具 demo

那么运行之后，就会发现开发者工具主动关上了程序，这里须要留神，运行的门路必选得是绝对路径，不然是会报错的。

npm 命令行调用 node 工具

这里只记录了我应用的形式，说的可能不是很全面，倡议去看一下这篇文章，从 0 开始用 node 写一个本人的命令行程序

# 初始化我的项目
npm init

# 批改 package.json 中 bin 字段
"bin": {"open-dev": "./index.js"}

# 新建 index.js
#!/usr/bin/env node
console.log('open-dev')
# `#!/usr/bin/env node` 的意思是让零碎本人去找 node 的执行程序，该行必不可少。# 执行 npm link
npm link

# 运行脚手架工具
git-tool

# index.js 中 process.argv 可用来获取命令行参数
# 留神 #!/usr/bin/env node 为是必须的
#!/usr/bin/env node
console.log('open-dev')
console.log(process.argv) # ['...', '...', ....]

应用 shelljs 调用 cmd 命令

ShellJS 是在 Node.js API 之上的 Unix shell 命令的可移植 （Windows / Linux / macOS） 实现。是基于 Node.js API 的封装。其余 API 能够查看官网：shelljs

const shell = require('shelljs')
// 进入目录
shell.cp('F:\\softs\\ 微信 web 开发者工具')
// 调用命令, 这里须要留神, 调用命令时须要在前面加上 --color=always 不然就没有命令行色彩了
shell.exec('cli open --project F:\softs\ 微信 web 开发者工具 \demo --color=always')

获取以后执行环境

咱们来认真的察看一下 uni-cli 自带的命令中，后面存在很长一大串的命令，那这个命令具体作用就是用于辨别以后运行环境和类型的。如果想理解更多，能够去看一下 cross-env 的官网文档。

运行命令携带参数cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin

"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin open-devtools",

将相当于在咱们的命令 js 中process.env环境变量里增加了两个参数

const NODE_ENV = process.env.NODE_ENV // development
const UNI_PLATFORM = process.env.UNI_PLATFORM // mp-weixin 

获取 pageage.json 中的字段

咱们须要晓得，微信开发者工具的门路是不确定的，那么须要在一开始先确定下来，我的思路是放在我的项目中的 pageage.json 贮存。

{
 "devtoolsConfig":{"weixin": "F:softs 微信 web 开发者工具"}
}

脚手架实开发

那么有了这些根本的货色，根本的思路曾经有了，实现性能具体路线为

根本门路与开发者工具的门路》》运行开发者工具》》调用对应本身我的项目运行命令

// index.js
#!/usr/bin/env node
const fs = require("fs")
const path = require("path")
const shell = require('shelljs')
const utils = require(path.resolve(__dirname, './src/utils'))

// 运行我的项目门路读取, 这里须要留神当装置依赖时, 以后门路为 xxx/node_module/xxx, 所以须要回退两层
const PRESET_PATH = path.resolve(__dirname, '../../')
const PACKAGE_PATH = path.resolve(PRESET_PATH, './package.json')

// 以后运行环境变量与运行命令, getRunPresetExec 是我封装的办法, 能够获取以后对应的运行命令
// 例如 development|mp-weixin 则对应 -> npx cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --color=always
const NODE_ENV = process.env.NODE_ENV
const UNI_PLATFORM = process.env.UNI_PLATFORM
const EXEC_CODE = utils.getRunPresetExec(NODE_ENV, UNI_PLATFORM)

// 微信我的项目源码门路, 这里对于我的项目中的小程序源码门路
const EXEC_CODE_TYPE = NODE_ENV === 'development' ? 'dev' : 'build'
const WEIXIN_PRESET_PATH = path.resolve(PRESET_PATH, `dist/${EXEC_CODE_TYPE}/mp-weixin`)

// 获取开发者工具目录(pageage.json)
const PACKAGE_CONFIG = JSON.parse(fs.readFileSync(PACKAGE_PATH).toString())
const DEVTOOLS_CONFIG = PACKAGE_CONFIG.devtoolsConfig || {}
const WEIXIN_DEVTOOLS_PATH = DEVTOOLS_CONFIG.weixin

// 如果调用环境是微信
if (UNI_PLATFORM === 'mp-weixin') {
  // 先递归写入, 避免无内容导致调试工具报错
  // 这里须要留神, 不能间接写入文件, 须要先创立好残缺的目录
  // 不然会间接报错, 这里的 mkdirsSync 是我封装的递归创立目录的办法
  utils.mkdirsSync(WEIXIN_PRESET_PATH)
  const writeFileStr = JSON.stringify({appid: 'touristappid', projectname: 'open-devtools'}, null, "\t")
  fs.writeFileSync(path.resolve(WEIXIN_PRESET_PATH, './project.config.json'), writeFileStr, {flag: 'w'})
  // 关上小程序我的项目
  const openDevToolsShell = `cli open --project ${WEIXIN_PRESET_PATH} --color=always`
  shell.cd(WEIXIN_DEVTOOLS_PATH)
  // 关上结束后, 运行编译工具
  shell.exec(openDevToolsShell, () => {shell.cd(PRESET_PATH)
    shell.exec(EXEC_CODE)
  })
  // 返回以后条件, 阻止代码运行
  return false;
}

// 如上方代码没有执行, 则间接执行运行我的项目命令
shell.cd(PRESET_PATH)
shell.exec(EXEC_CODE)