使用
- 使用命令行工具進(jìn)行初始化
- 直接從 github 上 clone 下來
下載官方提供的項(xiàng)目模板燃领，打開后的文件目錄
image.png
開發(fā) （還沒成功）
- 安裝依賴：npm install
此時(shí)會(huì) 生成一個(gè)node_modules文件夾和一個(gè)package-lock.json文件 - 執(zhí)行命令：npm run dev
此時(shí)生成了miniprogram_dev文件夾
官方：默認(rèn)會(huì)在包根目錄下生成 miniprogram_dev 目錄猛蔽，src 中的源代碼會(huì)被構(gòu)建并生成到 miniprogram_dev/components 目錄下。如果需要監(jiān)聽文件變化動(dòng)態(tài)構(gòu)建区岗，則可以執(zhí)行命令：npm run watch
ps: 如果 minirpogram_dev 目錄下已存在小程序 demo毁枯，執(zhí)行
npm run dev則不會(huì)再將 tools 下的 demo 拷貝到此目錄下种玛。而執(zhí)行npm run watch則會(huì)監(jiān)聽 tools 目錄下的 demo 變動(dòng)并進(jìn)行拷貝。
- 生成的 miniprogram_dev 目錄是一個(gè)小程序項(xiàng)目目錄娱节，以此目錄作為小程序項(xiàng)目目錄在開發(fā)者工具中打開即可查看自定義組件被使用的效果祭示。
- 進(jìn)階：
- 如果有額外的構(gòu)建需求，可自行修改 tools 目錄中的構(gòu)建腳本悄窃。（不知道什么原因蹂窖，我改tools目錄下的文件沒有反應(yīng)，但是我改src目錄下文件內(nèi)容是可以被運(yùn)行的）
- 內(nèi)置支持 less横媚、sourcemap 等功能月趟，默認(rèn)關(guān)閉孝宗。如若需要可以自行修改 tools/config.js 配置文件中相關(guān)配置。
- 內(nèi)置支持多入口構(gòu)建问潭，如若需要可自行調(diào)整 tools/config.js 配置文件的 entry 字段婚被。
- 默認(rèn)開啟 eslint，可自行調(diào)整規(guī)則或在 tools/config.js 中注釋掉 eslint-loader 行來關(guān)閉此功能灾茁。（必須關(guān)掉，之前沒注意一直在報(bào)錯(cuò)禀挫，找了好久才發(fā)現(xiàn)是這個(gè)問題）
發(fā)布
ps: 發(fā)布前得確保已經(jīng)執(zhí)行構(gòu)建逗余，小程序 npm 包只有構(gòu)建出來的目錄是真正被使用到的。
- 如果還沒有 npm 帳號腻格，可以到 npm 官網(wǎng)注冊一個(gè) npm 帳號菜职。
- 在本地登錄 npm 帳號旗闽，在本地執(zhí)行：
npm adduser
或者
npm login
- 在已完成編寫的 npm 包根目錄下執(zhí)行：
npm publish
到此，npm 包就成功發(fā)布到 npm 平臺(tái)了嫡意。
PS：一些開發(fā)者在開發(fā)過程中可能修改過 npm 的源捣辆，所以當(dāng)進(jìn)行登錄或發(fā)布時(shí)需要注意要將源切回 npm 的源蔬螟。
目錄結(jié)構(gòu)
以下為推薦使用的目錄結(jié)構(gòu)，如果有必要開發(fā)者也可以自行做一些調(diào)整:
|--miniprogram_dev // 開發(fā)環(huán)境構(gòu)建目錄
|--miniprogram_dist // 生產(chǎn)環(huán)境構(gòu)建目錄
|--src // 源碼
| |--components // 通用自定義組件
| |--images // 圖片資源
| |
| |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模塊/自定義組件入口文件
|
|--test // 測試用例
|--tools // 構(gòu)建相關(guān)代碼
| |--demo // demo 小程序目錄汽畴，開發(fā)環(huán)境下會(huì)被拷貝生成到 miniprogram_dev 目錄中
| |--config.js // 構(gòu)建相關(guān)配置文件
|
|--gulpfile.js
PS：對外暴露的 js 模塊/自定義組件請放在 src 目錄下旧巾，不宜放置在過深的目錄。另外新增的暴露模塊需要在 tools/config.js 的 entry 字段中補(bǔ)充忍些，不然不會(huì)進(jìn)行構(gòu)建鲁猩。
測試
- 執(zhí)行測試用例：
npm run test
- 檢測覆蓋率：
npm run coverage
測試用例放在 test 目錄下，使用 miniprogram-simulate 工具集進(jìn)行測試罢坝，點(diǎn)擊此處查看使用方法廓握。在測試中可能需要變更或調(diào)整工具集中的一些方法，可在 test/utils 下自行實(shí)現(xiàn)嘁酿。
其他命令
- 清空 miniprogram_dist 目錄：
npm run clean
- 清空 miniprogam_dev 目錄：
npm run clean-dev
