uni-toolkit 是什么
uni-toolkit（以下簡稱 toolkit） 是一個用於輔助 uni-app 開發的工具（集）。toolkit 不是開發框架也不是應用插件，它作用於 uni-app 代碼編譯前，旨在增強 uni-app 的開發體驗。
講完這些，可能還是沒有交代清楚 toolkit 到底是干什么的。各位莫急，請繼續往下看。
它的由來
近期團隊考慮將微信小程序（以下簡稱 mina）遷移到 uni-app 來，在進行測試的過程中發現了一處 mina 與 uni-app 存在較大差異的點。
- mina 每個頁面都有一個 .json 文件。
- uni-app 的所有頁面配置都在 pages.json 這一個公共的文件中。
uni-app 的這種設計意味着，每當有頁面的配置需要改變，就要去操作pages.json這個文件。在多人協作開發時，這樣做可能會使得開發人員經常應對pages.json文件的沖突。
到這里可能有人會問：mina 中新增/減少頁面，需要操作app.json文件，同樣會造成文件沖突呀？
關於這一點，團隊一直以來的應對策略是這樣的：
- 通過腳本掃描
pages目錄，自動生成app.json的pages節點信息。 - 普通開發人員只需提交頁面相關文件，就可以保證其他人的頁面信息是同步的。
- 另外
app.json中其它項的變動，並不會那么頻繁。
討論過后團隊決定暫緩遷移工作，嘗試優化這個不太理想的設計。
明確需求
為了滿足頁面之間配置互不干擾的需求，toolkit 要實現以下主體功能：
- 分解
pages.json文件，生成單個頁面的配置文件。 - 能拆還要能建，根據分解后的配置文件重新組合成
pages.json文件。
我們在閱讀了 uni-app 的pages.json文件后，將其中的配置重新划分為以下幾類：
- 單個頁面配置，即
pages與subpackages(subPackages)節點中的子項。 - 全局頁面配置，即
globalStyle節點。 - 選項卡配置，即
tabBar節點。 - 其它配置，如
['condition', 'preloadRule']等。
根據這個划分，toolkit 的工作如下圖所示。
配置增強
在具體的開發過程中，我們進一步將頁面划分了以下幾種角色：
- 普通頁面
- 首頁面
- 選項卡頁面
- 分包頁面
通過增加標記信息的方式，來明確頁面的角色。
PS：測試用的是 hello-uniapp 應用。
首頁面
{
"path": "pages/tabBar/component/component",
"style": {
"navigationBarTitleText": "內置組件"
},
"@home": true
}
選項卡頁面
{
"path": "pages/tabBar/API/API",
"style": {
"navigationBarTitleText": "接口"
},
"@tab": {
"iconPath": "static/api.png",
"selectedIconPath": "static/apiHL.png",
"text": "接口"
}
}
分包頁面
{
"path": "pages/API/action-sheet/action-sheet",
"style": {
"navigationBarTitleText": "操作菜單"
},
"@subpackage": {
"root": "pages/API/"
}
}
通過這些新增的標記，可以識別頁面的角色，進而組合出預期的pages.json文件。
快速上手
接下來演示一下如何使用 uni-toolkit 輔助 uni-app 的開發，幫助你快速上手。
新建項目
在 HBuilderX 中創建一個 uni-app 項目，名為 uni-toolkit-demo。創建后，將項目運行至瀏覽器。
PS：你也可以選擇 vue-cli 方式創建，見文檔。
安裝
在項目根目錄下執行如下命令，安裝 uni-toolkit 包。
$ npm install --save-dev uni-toolkit
初始化
安裝成功后，就可以初始化配置了。
$ npx uni-toolkit init
初始化完成，項目的目錄結構如下。
@pages目錄用於存放 uni-toolkit 分解pages.json后生成的配置集。pages.uni.json用於備份最初的pages.json文件。
啟動工具
執行如下命令，開啟監聽@pages中配置信息變化的服務。
$ npx uni-toolkit watch
新建頁面
推薦使用create命令來新建頁面。
新建一個命令行窗口，執行如下命令，創建一個路徑為pages/login/login，標題為“登錄”的新頁面。
$ npx uni-toolkit create pages/login/login 登錄
通過create新建頁面，pages/login/login.vue與@pages/pages/login/login.json會同步生成，如下圖所示。
其中，login.json的內容如下。
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登錄"
}
}
然后，在pages/index/index.vue添加跳轉到登錄頁的代碼。
<template>
<view class="content">
<button type="primary" @click="goLogin">登錄</button>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
goLogin() {
uni.navigateTo({
url: '/pages/login/login'
});
}
}
}
</script>
在瀏覽器中，點擊“登錄”按鈕，成功跳轉至相應頁面。
更多
至此一個簡單的演示就結束了，更多內容見 uni-toolkit 文檔。
開發建議
團隊協作使用 uni-toolkit 開發時，關於pages.json文件的更新，建議約定如下：
- 普通開發人員，不允許提交
pages.json文件。日常開發中，只需提交@pages中的配置文件。 - 應用每次封版時，指定某一個人
build之后提交此版本對應的pages.json文件。扮演這個角色的通常是 Team leader，具體視情況而定。
最后
大家如果覺得 uni-toolkit 還不錯，歡迎 Star 與交流。同時，也希望 uni-app 越來越好，生態越來越完善。