共计 3733 个字符,预计需要花费 10 分钟才能阅读完成。
前言:
对于前端的 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)