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

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

它的思路是：

1. 主要参数配置

用户新打开一个页面，将页面的 path（从浏览器 history.location 获得），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