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

本系列文章講什么內容？

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

為什么需要開發一個前端庫呢？

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

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

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

什么樣的代碼適合做成庫呢？

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

庫的形式是多種多樣的，可以是一個 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 生態圈添磚加瓦，不妨參考一下本項目。

系列文章目錄（同步更新）

• 《現代前端庫開發指南系列（一）：融入現代前端生態》
• 《現代前端庫開發指南系列（二）：使用 webpack 構建一個庫》
• 《現代前端庫開發指南系列（三）：從說明文檔看庫的前世今生》

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