現代前端庫開發指南系列（一）：融入現代前端生態

本系列文章講什麼內容？

本系列文章主要介紹如何在現代前端生態下，建立一個工業級別的庫。近幾年來，前端工程化、模塊化、組件化的大潮鋪天蓋地而來，在解決以往的架構痛點之餘，卻又產生了信息過載的問題；我但願經過分享本身的經驗，幫助你們少踩坑多出活。

爲何須要開發一個前端庫呢？

在項目開發過程當中，總有一些功能是相同或相似的，若是你只是單純地複製粘貼這部分代碼，那麼恭喜你，假以時日，需求一改，你就只能自嘗苦果了。

你說，這還不簡單，抽成公共方法公用不就行了嗎？對的沒錯，但請把視野再放廣一點：在工做中，咱們極可能參與到不一樣項目的開發，這些項目分別放置在不一樣的代碼倉庫裏，這樣的話很遺憾，你寫的公共方法仍是無法公用；再者，目前流行的微服務/微前端，原本就是把一個大項目分拆成更小的粒度來開發、存儲和部署，你寫的公共方法又怎麼在這微前端架構中公用呢？

所以，咱們能夠考慮把一些重用價值較高的代碼段，抽象出來造成一個庫，這樣咱們既能夠在項目組內隨意使用，也能夠跨項目組進行輸出，甚至是給開源社區添磚加瓦。

什麼樣的代碼適合作成庫呢？

基於前端組件化這一思想，我認爲只要一個功能的內部邏輯穩定，對外又可以提供明確接口，那麼這個功能就能夠作成一個庫。

庫的形式是多種多樣的，能夠是一個 function ，能夠是一個 class ，能夠是一個 UI 組件，能夠是一整個頁面（把一些公共頁面作成庫來在微前端架構中公用也是一個很是不錯的選擇），甚至能夠是一份公共樣式文件（純 css ）。

本系列文章的受衆是？

寫本系列文章的時候，我會預設讀者們是可以在現代前端體系下，熟練編寫業務代碼，而且對 webpack 有必定的認識。另外，礙於我本人的技術棧限制，我將主要以 vue / 原生 javascript 的角度來撰寫文章，但你應該也能輕鬆找到 react/angular 中對應的技術和概念。

本系列文章涉及內容預覽

• 使用 webpack 構件前端庫與構件通常應用不同的點
• 開發場
• 瀏覽器兼容性
• 說明文檔和使用文檔
• 開發規範
• 單元測試
• 持續集成
• 發佈

實例項目代碼介紹

在個人工做生涯中，我寫的絕大部分庫都是爲公司的項目寫的，很惋惜沒法帶出來，但我會以我最近寫的兩個開源庫：javascript-library-boilerplate 和 vue-directive-window 來做爲實例項目代碼來輔助介紹。

javascript-library-boilerplate

javascript-library-boilerplate 是一個現代前端生態下快速構建 javascript 庫的腳手架（或稱種子項目，或稱示例代碼，看你理解了），本庫支持 GitHub 的 repository templates 功能，你能夠直接在項目首頁點擊 Use this template 來直接套用本腳手架的代碼來建立你本身的 javascript 庫。

vue-directive-window

vue-directive-window 是一個能夠快速讓模態框(modal)支持類窗口操做的加強庫；類窗口操做主要包括三大類：拖拽移動、拖拽調整窗口尺寸、窗口最大化； vue-directive-window 支持以 Vue 自定義指令或是通常 js 類的方式來調用。

vue-directive-window 相對於 javascript-library-boilerplate 來講，更貼近 Vue 生態圈，若是你最近想爲 Vue 生態圈添磚加瓦，不妨參考一下本項目。

想要閱讀更多個人技術文章？請到個人 GitHub 博客 Array-Huang/blog 來，若是對您有幫助的話請 Star&Watch 走一波哈(〃^ω^)