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