實現一個 微信小程序 模板生成腳手架

想要做什麼:
通過腳本的方式創建 小程序項目模板 通過交互的方式輸入配置項
如: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樣式,

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章