制做一个面包屑导航组件并发布到 npm

记录本身从零制做一个 npm 组件的过程。这个 npm 包是一个面包屑导航组件，npm 包名为 React-Breadcrumb-Navigation，在 React 项目中使用。包的地址 npm , github.

它的思路是：

1. 主要参数配置

用户新打开一个页面，将页面的 path（从浏览器 history.location 得到），title（用户即 开发者/模块使用者 灵活自定义）、和其余自定义属性加入会话历史缓存；

参数	描述
path	页面路径，能够用于导航跳转
title	可自定义的显示的页面标题

2. 用 indexDB 存储会话历史

可使用浏览器的客户端存储来存储会话历史。因为不只存储 path、title等字符串，还要存储页面快照，故 localStorage 不知足存储容量要求，因此使用 indexDB。ZangoDB 是一个 Mongoose 风格的 indexDB 接口，可使用它来链接、操做 indexDB 数据库。

3. 生成页面快照

用户在离开一个页面的时候，为此页面生成一个快照。我使用了 html2canvas 这个库能够把 HTML 转化为浏览器 canvas 中的图片。

在用户离开页面以前就为当前页面生成 canvas，而后使用 html2canvas 将其转化为图片（能够以 Blob 或者将 Blob 再转化为 base64 ），最后和页面的 path、title 一块儿存储到会话历史数据库。后面显示页面快照的时候直接把图片显示出来就能够了。

开始开发

咱们如下面的 React 知识图谱作一个 demo，做为开发此面包屑导航组件的环境。图上的每一个节点就是一个页面。

最终，咱们使用开发完的包作出来的面包屑导航页面（能够在 codesandbox 看到面包屑导航 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