製做一個麪包屑導航組件併發布到 npm

記錄本身從零製做一個 npm 組件的過程。這個 npm 包是一個麪包屑導航組件，npm 包名爲 React-Breadcrumb-Navigation，在 React 項目中使用。包的地址 npm , github.

它的思路是：

1. 主要參數配置

用戶新打開一個頁面，將頁面的 path（從 history.location 得到），title（用戶即 開發者/模塊使用者 靈活自定義）、和其餘自定義屬性加入會話歷史緩存；

參數	描述
path	頁面路徑，能夠用於導航跳轉
title	可自定義的顯示的頁面標題
history	使用 history 管理會話歷史

2. 用 indexDB 存儲會話歷史

可使用瀏覽器的客戶端存儲來存儲會話歷史。因爲不只存儲 path、title等字符串，還要存儲頁面快照，故 localStorage 不知足存儲容量要求，因此使用 indexDB。ZangoDB 是一個 indexDB 接口，可使用它來鏈接、操做 indexDB 數據庫。

3. 生成頁面快照

用戶在離開一個頁面的時候，爲此頁面生成一個快照。我使用了 html2canvas 這個庫能夠把 HTML 轉化爲瀏覽器 canvas 中的圖片。

在用戶離開頁面以前就爲當前頁面生成 canvas，而後使用 html2canvas 將其轉化爲圖片（能夠以 Blob 或者將 Blob 再轉化爲 base64 ），最後和頁面的 path、title 一塊兒存儲到會話歷史數據庫。後面顯示頁面快照的時候直接把圖片顯示出來就能夠了。

開始開發

咱們如下面的 React 知識圖譜作一個 demo，做爲開發此麪包屑導航組件的環境。圖上的每一個節點就是一個頁面。

最終，咱們使用開發完的包作出來的麪包屑導航頁面 :

1. 開發環境搭建

• webpack 配置

使用 webpack 來構建包，webpack 的配置分爲 webpack.dev.config.js 和 webpack.pro.config.js, 前者用於開發調試，所以會使用 webpack-dev-server 等,後者用於打包最終發佈到 npm 的包。關於 webpack 的配置這裏不贅述，能夠前往 github 庫查看。
配置 webpack.pro.config.js 注意，由於是打包 npm 包，要配置導入模塊的方式，配置模塊導入方式爲 commonjs2,這樣在項目中咱們能夠用 require 或者 ES6 的 import 導入組件：

output:{
        filename:'[name].bundle.js',
        path: path.resolve(__dirname,'lib'),
        library:'react-breadcrumb-nav',
        libraryTarget:'commonjs2'
    },

• 編寫各個頁面文件

在項目頂層新建一個 test 目錄，用於存放 demo 文件，這個文件裏的 index.js 是 webpack.dev.config.js 打包 的入口。另有 index.html掛載在組件，還有一系列頁面文件。

在每一個頁面中引入後面將要開發的麪包屑組件 ReactBreadcrumbNavigation ，好比有一個 React 首頁 頁面：

• 使用路由庫 React-router 組織全部頁面：

/routes_catalogue.js:

2. 開始開發組件

在項目頂層新建一個 src 文件，用於存放麪包屑組件的源代碼。

其中，store.js 建立/鏈接 indexDB 數據庫,並定義了增刪改查的方法。我採用自定義 Hooks 來定義這個數據庫組件。

src/index.js 是組件的入口文件，它調用數據庫定義的方法，實現進入新頁面時自動添加當前會話歷史，刪除歷史中任意一個節點等功能，在進入新頁面時會調用 html2canvas 爲當前頁面生成快照，同時調用 history 獲取頁面的 path ,和 用戶自定義的 title 一塊兒存入數據庫，這樣就添加了一個會話歷史。另外，麪包屑組件使用分頁，每次只顯示少許的導航標題（顯示數目留給組件使用者定義），所以用 useReducer 實現一個分頁器功能。

src/index.js：

3. 打包組件

在上述開發過程使用 webpack.dev.config.js 來構建應用。組件開發完成後，使用 webpack.pro.config.js 打包組件便可。
配置 package.json:

"main": "lib/main.bundle.js",
"jsnext:main": "src/index.js",

4. 發佈到 npm

首先登陸 npm

npm adduser

輸入本身的 npm 用戶名和密碼、郵箱信息。
而後npm publish 便可發佈。

更多文章能夠前往我的的 github page