背景
在做微信小程序开发的过程中，都需要用到微信开发者工具。在这个工具中，可以用来调试微信小程序，也可以用来作为代码编辑器。但是个人觉得作为编辑器不太好用，所以现在的开发模式是用微信开发者工具调试代码，而用vscode作为代码编辑器。在开发中还有一些开发体验不是很好的，比如当想创建一个页面或者一个组件文件的的时候，如果在vscode中创建的话，那么会有很多需要创建的文件，因为一个文件夹默认需要四个文件。如果不想一个个创建文件的话，就需要到微信开发者工具中右键点击生成。在开发中，这两种方式都使用过，感觉都是痛点。于是就主动做了个命令行工具，通过在命令行中执行命令生成想要的文件，达到一种相对较好的体验。
思考
想要做一个这样的工具，初步思考是用node来实现，先定义一个默认的模版文件夹，然后在执行命令的时候，带上需要生成的分包名、页面名、组件名，然后通过这些参数在项目根目录中生成相应的文件夹，然后把默认的模版文件拷贝到新生成的文件夹中，到此命令行生成项目文件夹结束。wx-cli已上传npm包点击可查看详情
实现
这个工具主要是通过node来实现的，利用node的api来对项目文件进行操作。也用到一些优化命令行交互的包，比如为了输出文字好看一点的，简单列举下使用的依赖包。
- commander 方便获取命令行参数，并确定命令行的命令
- ora 优化交互比如加个执行状态
- chalk 改变输出文字的颜色
1. 先使用commander来定义创建的命令
- wx-cli -pack xx 生成一个新的分包
- wx-cli -p xx 生成一个新的页面
- wx-cli -c xx 生成一个新的组件
这里简单说下命令，下面会列出各种使用方式，npm包中也有详细文档。
2. 使用fs模块来对文件进行操作，实现主要的逻辑。
- 用fs.readFileSync来读取project.config.json文件，简单判断下是不是在小程序项目目录的根目录。如果不是的话，就直接报错并提示不是根目录。
try {
try {
const projectConfig = JSON.parse(fs.readFileSync(`${path.resolve()}/project.config.json`, 'utf8'))
projectName = projectConfig.projectname
} catch (error) {
spinner.fail(chalk.red('没有在项目根路径执行命令，请检查执行命令的根目录'))
return
}
} catch (error) {
spinner.warn(chalk.yellow('该项目与所选项目不符，请查看选择对应的项目'))
return
}
- 使用fs.mkdirSync来创建新的文件夹
fs.mkdirSync(`${pack}/pages`)
- 使用fs.statSync来判断新创建的文件夹是否存在，如果已经存不在重新创建并提示
if (fs.statSync(pack)) {
spinner.warn(chalk.yellow('已经存在该目录不在重新创建'))
}
- 使用fs.copyFileSync来把默认的模版复制到新创建的文件夹中。
fs.copyFileSync(`${pagePath}/${item}`, `${pack}/pages/${page}/${item}`)
基本的实现原理就是用以上方式，具体代码可自行查看。
使用
- 创建包
// 命令
wx-cli -pack
// 运行
➜ water git:(develop) ✗ wx-cli -pack wPack
// 目录
├── wPack
- 创建页面
// 命令
wx-cli -pack wPack -p wPage
// 运行
➜ water git:(develop) ✗ wx-cli -pack wPack -p wPage
// 结果
ℹ page is ===========> wPage
✔ 操作成功
// 目录
wPack
└── pages
└── wPage
├── index.js
├── index.json
├── index.wxml
├── index.wxss
└── strings.js
- 同时创建包和页面
// 命令
wx-cli -pack wPack -p wPage
// 运行
➜ water git:(develop) ✗ wx-cli -pack wPack -p wPage
// 结果
ℹ page is ===========> wPage
✔ 操作成功
// 目录
wPack
└── pages
└── wPage
├── index.js
├── index.json
├── index.wxml
├── index.wxss
└── strings.js
- app.json添加分包路径
{
"root": "wPack",
"pages": [
"pages/wPage/index"
]
}
- 创建全局组件
// 命令
wx-cli -c wComponent
// 运行
➜ water git:(develop) wx-cli -c wComponent
// 结果
➜ water git:(develop) wx-cli -c wComponent
ℹ 创建全局公用组件
component is ===========> wComponent
- 创建分包组件
// 命令
wx-cli -pack wPack -c wComponent
- 创建分包页面组件
// 命令
wx-cli -pack wPack -p wPage -c wComponent
- 自定义页面和组件模版
在项目根目录下建立template文件夹，其中包括页面的模版文件夹page和组件的模版文件夹comp,文件夹里面的文件就是自定义的模版，会按模版生成自定义的页面和组件。文件目录如下：
template
├── comp
│ ├── index.js
│ ├── index.json
│ ├── index.wxml
│ └── index.wxss
└── page
├── index.js
├── index.json
├── index.wxml
└── index.wxss
你可以自定义文件，如果根目录没有自定义模版，则生成默认的页面。
总结
总体就是为了偷懒，减少创建的成本，而思考开发的一个小工具，如果觉得有帮助。欢迎送个赞，先行谢过！
