想要做什么:
通过脚本的方式创建 小程序项目模板 通过交互的方式输入配置项
如:mp-wx-cli init
思路:
拿到终端的 输入 key
得到key 之后复制准备好的模板
更改 json 文件中的配置项,如工程名,appid 选择基础库版本等
生成项目模板
通过上述 思路,我们可以开始着手写我们的模板脚手架
创建项目
npm init
创建脚本文件,编写代码
//伪代码
#!/usr/bin/env node //运行环境node
const cli = async(args) => {
//如果是 init key 执行 create
if(args === 'key'){
create()
}
}
exports.cli = cli
编写创建模板脚本
//伪代码
async function create(props){
const { projectName,appId,libVersion } = props
fs.mkdirSync(`${projectName}`) //创建项目文件
await copyTemplate(`./${projectName}`) //复制模板
// 读取 模板 project.config.json 文件 更改配置信息
const wecahrtConfig = await readWechartProjectConfigJson()
wecahrtConfig.appid = appId
wecahrtConfig.projectname = projectName
wecahrtConfig.libVersion = libVersion
const configStr = JSON.stringify(wecahrtConfig)
await writeWechartProjectConfigJson(projectName,configStr)
}
inquirer.js —— 一个用户与命令行交互的工具
node fs 更改json 配置,复制文件
ora 终端loading
chalk 终端输入自定义颜色插件
编写package.json bin 文件: "bin": {
"mp-wx-cli": "bin/index"
},
本地测试 npm link
执行: mp-wx-cli init
效果:
如果 没有输入 init 提示:
mp-wx-cli init
基础架构
工程目录
|- app.js 工程入口
|- app.json 小程序原生配置
|- app.wxss 部分公共样式
|- doc 项目相关文档
|- src 工程主文件入口
|- src/asserts 资源目录
|- src/components 公用组件存放目录
|- src/config 环境配置 域名配置
|- src/lib 项目插件类
|- src/pages 页面路径
|- src/pages/xxx/components 适配当期页面组件
|- src/pages/xxx/service 适配当期页面服务,api存放 request 请求
|- src/service/commonApi 公共的一些api存放
|- src/store 小程序缓存等
|- src/utils 工程工具类
|- src/entry 程序入口,一些配置,监听,缓存读取,等工程初始操作在此完成
网络请求的封装
基于 wx.request 的promise 封装 (包括,超时,网络异常处理)
具体可参考 request.js
用法:
request.post(TEST_API,params) //返回一个promise
发布到 npm
npm login
如果遇到登录问题,还原镜像源
npm config set registry https://registry.npmjs.org
npm publish
项目地址:
https://github.com/JslinSir/mp-wx-cli.git
后续迭代: 支持脚本创建 page, components 实时编译,支持小程序sass样式,