隨著公司不斷的成長，團隊也在逐漸的擴大。為了提高開發效率，需要開發一套符合公司內部的一套移動端UI元件庫。非常的幸運，這份一勞永逸的差事最終由我來負責。我們公司技術棧是vue，所以UI元件庫就基於vue來開發。
本文主要講我在開發的過程中的一些思路和解決問題的方式方法，至於程式碼大家可以自行參考（在本文的底部有連結）。元件的開發並不多，圈子裡有很多優秀的庫更加值得你去學習，接下來就說說我的思路和實踐。
一、構思
制定目錄結構
| 資料夾 | 說明 |
|---|---|
| build | 打包編譯目錄 |
| config | 引數配置目錄 |
| dist | 文件打包目錄 |
| docs | 說明文件目錄 |
| examples | 元件案例目錄 |
| lib | 元件打包目錄 |
| packages | 元件目錄 |
| src | 資源目錄 |
| test | 單元測試目錄 |
技術選型
資源管理工具我選用webpack 和 gulp, 選用gulp的原因是元件樣式和功能分開打包，gulp的task寫起來既簡單又方便。說到樣式我選用的less，因為我工作中一直在使用less。單元測試選用的karma。還有一些其他輔助工具如babel、eslint、postcss等。詳細內容可以看package.json檔案。
二、開始搞
個人習慣，先把服務搞起來在說，安裝了dev-server，配置了dev指令碼，在build資料夾裡編寫webpack.dev.config，entry指向的是examples資料夾目錄，之後開發元件都要在這裡除錯。examples裡的目錄結構與vue-cli腳手架類似，這裡用到flexible.js，公司專案就用到這個，為了符合其他成員開發習慣，在案例除錯中同樣採用該方式。同樣為了符合團隊規範在postcss-pxtorem配置中我設定了rootValue，如果看程式碼的你這裡要注意一下。在元件打包的時候我也做了一些處理，這個地方後面再講。
服務搞起來之後，就開始寫元件了。這部分精力主要放在packages資料夾內，簡單說一下我的設計思路，每個元件按照功能名稱命名建立子資料夾，由index.js輸出，這裡方便之後按需載入的需求。在src內編寫元件的功能程式碼。最後所有的元件在根目錄的src內index.js檔案輸入並輸出。這裡我用了一個小技巧，為了防止元件開發不斷增多，導致import寫的越來越多，我這裡使用了require.context進行程式碼優化。之後凡是大量並有規律的引入檔案的地方，我都使用該方案進行優化修改。
元件開發中不可避免的會使用到icon，這裡我使用了gulp的兩個外掛gulp-iconfont和gulp-iconfont-css將svg檔案轉換為字型樣式引入使用。如果你未使用gulp，可以查詢對應的外掛庫引入使用。
元件寫好了之後，在examples裡的main.js引入，效果如下：
三、文件與打包
功能都開發好了，接下來做一個可以看的文件介紹頁。這部分在docs裡開發，為了使用者體驗好一些，文件相容了PC和移動端，採用的是media。很多其他UI元件文件中，移動端會有手機的樣式模型的展示，我觀察了幾個，他們都是用的iframe裡引入的github.io的服務。特意說明一下這裡，我並沒有這麼做，我的做法是把examples打包到dist目錄，在啟動docs服務進行開發的時候，手機模型引入的是事先打包好的examples靜態檔案。如果你想要獲得最新的examples檔案，需要先打包一遍examples,再啟動docs服務，這裡會有可能存在一個讓人不舒服的地方，那就是example和docs同時開發，這裡我沒有設計成同時提供開兩個服務，也沒有把兩個整合在一起。我的理由是如果你想寫案例就把案例寫完，如果你先寫文件就不要去寫其他的。
打包在build資料夾內，分別是webpack對js的混淆壓縮和用gulp處理樣式檔案，上面說到為了更符合團隊開發習慣，我在examples使用到flexible，因為在工作中我們同樣使用了它，我在樣式打包的時候，每個元件單獨樣式分別壓縮兩版，分別是以rem為單位和px為單位，rem是經過pxtorem處理的。更細節東西就不多介紹了，大家可以看我的程式碼。
module.exports = {
plugins: {
"postcss-pxtorem": {
"rootValue": 75,
"propList": ["*"]
}
}
}
複製程式碼最後是單元測試，這部分還在學習中，就不多說了。
四、總結
到這裡元件庫的0到1的工作完成了，簡單總結一下我的開發心得：
先想再寫，會少走彎路。這一個月的工作，讓我積累不少開發經驗，對我的結構思維能力提升了不少，整體來說還是不錯的。最後附地址，歡迎回復一齊進步。
祝工作順利
鄧文斌
2019年2月14日