实现一个 微信小程序 模板生成脚手架

想要做什么:
通过脚本的方式创建 小程序项目模板 通过交互的方式输入配置项
如: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 提示:


image.png
mp-wx-cli init 

image.png

image.png

基础架构

工程目录

|- 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样式,

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容