本系列文章講什麼內容？
本系列文章主要介紹如何在現代前端生態下，創建一個工業級別的庫。近幾年來，前端工程化、模塊化、組件化的大潮鋪天蓋地而來，在解決以往的架構痛點之餘，卻又產生了信息過載的問題；我希望通過分享自己的經驗，幫助大家少踩坑多出活。
爲什麼需要開發一個前端庫呢？
在項目開發過程中，總有一些功能是相同或類似的，如果你只是單純地複製粘貼這部分代碼，那麼恭喜你，假以時日，需求一改，你就只能自嘗苦果了。
你說，這還不簡單，抽成公共方法公用不就好了嗎？對的沒錯，但請把視野再放廣一點：在工作中，我們很可能參與到不同項目的開發，這些項目分別放置在不同的代碼倉庫裏，這樣的話很遺憾，你寫的公共方法還是沒法公用；再者，目前流行的微服務/微前端，本來就是把一個大項目分拆成更小的粒度來開發、存儲和部署，你寫的公共方法又怎麼在這微前端架構中公用呢？
因此，我們可以考慮把一些重用價值較高的代碼段，抽象出來形成一個庫，這樣我們既可以在項目組內隨意使用，也可以跨項目組進行輸出，甚至是給開源社區添磚加瓦。
什麼樣的代碼適合做成庫呢？
基於前端組件化這一思想，我認爲只要一個功能的內部邏輯穩定，對外又能夠提供明確接口，那麼這個功能就可以做成一個庫。
庫的形式是多種多樣的，可以是一個 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 走一波哈(〃^ω^)