一個完整的開源庫必須包含

• 文檔
• 好的編譯需求
• 規範
• 測試
• 持續集成

編譯需求

一個好的開源庫，他的開發環境，必須讓開發者開發的順手甚至有助於團隊開發，使用者更要用的舒服。而對於開發者說，一個好的開發環境必須滿足這幾個需求

• 開發者使用ES6+版本來開發

  小補充:
  ES是以ECMAScript規範所管理的javascript，常見的有ES5 ES6 ES-next，通常會以ES6開發，最後以babel(之 > 後的章節會討論)轉成ES5
  ES5是目前在各環境支援度最高的一個版本喔

而一個開源庫就是為了使用者而做的，如果開發者是開源庫的爸爸，那麼使用者就是開源庫的媽媽。因此使用者對於開源庫是非常重要的，以下將會介紹對於一個使用者來說，甚麼樣的開源庫是優秀的

對於使用者來說:

當一個庫限制過大，往往會使得使用者用起來綁手綁腳。(例如:後端環境不支援，只能以 require 引入 ....)，因此一個舒適的開發環境應該滿足以下需求：

使用者能夠運行在瀏覽器（chrome）和服務端(node)中

小補充：
node 環境吃 CommonJS ...
chrome 環境吃 AMD ES...

使用者能夠使用AMD或CMD UMD等模塊方案

小補充：
javascript 共有 liff AMD CMD UMD ES等模塊方案
以下附一張 JS模塊比較，圖來自 Js 模塊化指南(https://kknews.cc/tech/42k328x.html)

使用者可以用各種方式引用我們的庫

``` 範例
 const OurLib = require("OurLib")
 import Ourlib from 'OurLib'
 <script scr="OurLib"></script>
```

預編譯工具

• 為了滿足以上條件通常開發者會使用rollup 或是 webpack等工具來建構開發環境。

• 預編譯工具是甚麼呢?

  • Webpack 和 rollup 常被人們定義為“模組打包工具”(module bundler),它可以讀取 JavaScript 模組並分析它們之間的依賴關係,然後用盡可能高效的方式將它們組織在一起,最後生成一個獨立的JS檔案。
  • 以下附一張 webpack打包圖示，圖來自 webpack官方文檔 (https://webpack.js.org/)

  Webpack 和 rollup 通常利用靜態分析得到最後的結果，然後藉由最後的結果來去編譯開發者的JS代碼，藉此可以將不需要的代碼去掉，或是根據開發者的需求做其他進階設定。

  

參考資料:

• 8102年如何寫一個現代的JavaScript庫(https://juejin.im/post/6844903687819640845)
• JavaScript庫架構實戰(https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/698450/)