UI組件庫從0到1開發心得

隨着公司不斷的成長，團隊也在逐漸的擴大。爲了提升開發效率，須要開發一套符合公司內部的一套移動端UI組件庫。很是的幸運，這份一勞永逸的差事最終由我來負責。咱們公司技術棧是vue，因此UI組件庫就基於vue來開發。

本文主要講我在開發的過程當中的一些思路和解決問題的方式方法，至於代碼你們能夠自行參考（在本文的底部有連接）。組件的開發並很少，圈子裏有不少優秀的庫更加值得你去學習，接下來就說說個人思路和實踐。

---

1、構思

制定目錄結構

文件夾	說明
build	打包編譯目錄
config	參數配置目錄
dist	文檔打包目錄
docs	說明文檔目錄
examples	組件案例目錄
lib	組件打包目錄
packages	組件目錄
src	資源目錄
test	單元測試目錄

技術選型

資源管理工具我選用webpack 和 gulp, 選用gulp的緣由是組件樣式和功能分開打包，gulp的task寫起來既簡單又方便。說到樣式我選用的less，由於我工做中一直在使用less。單元測試選用的karma。還有一些其餘輔助工具如babel、eslint、postcss等。詳細內容能夠看package.json文件。

2、開始搞

我的習慣，先把服務搞起來在說，安裝了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引入，效果以下：

3、文檔與打包

功能都開發好了，接下來作一個能夠看的文檔介紹頁。這部分在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": ["*"]
    }
  }
}
複製代碼

最後是單元測試，這部分還在學習中，就很少說了。

4、總結

到這裏組件庫的0到1的工做完成了，簡單總結一下個人開發心得：

先想再寫，會少走彎路。這一個月的工做，讓我積累很多開發經驗，對個人結構思惟能力提高了很多，總體來講仍是不錯的。最後附地址，歡迎回復一齊進步。

github

home page

祝工做順利

鄧文斌

2019年2月14日