手把手教你如何写一个公共方法库(下篇——Rollup脚手架、发布npm、编写文档)

91 阅读2分钟

书接上回:手把手教你如何写一个公共方法库(上篇——Rollup的基本用法),我们已经掌握了Rollup的基本用法,现在我们就使用Rollup的脚手架去实现一个公共方法库。

使用脚手架新建项目

从Git上拉一下脚手架的代码:

git clone https://github.com/rollup/rollup-starter-lib

貌似Rollup很久没有更新过了,不要直接运行install命令,要先把依赖的版本号更新一下,可以借助npm-check-updates,使用方法如下:

npm install -g npm-check-updates
ncu -u

截屏2024-05-26 14.05.52.png

执行后,package.json文件就会发生变化,此时再去执行install。

发布npm的时候,需要在package.json上设置一些必要的属性:

{
  "name": "rollup-starter-lib",
  "version": "1.0.0",
  "main": "dist/my-utils.cjs.js",
  "module": "dist/my-utils.esm.js",
  "browser": "dist/my-utils.umd.js",
  "type": "module",
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "test": "node test/test.js",
    "pretest": "npm run build"
  },
  "files": [
    "dist"
  ]
}
  1. name:包名,唯一的名字;
  2. version:符合语义化版本规范的版本字符串,发布npm的时候,只能发布比线上版本更高的版本;
  3. main:指定加载的入口文件,默认是index.js
  4. module:字段提供符合 ESM 规范的模块入口;
  5. browser:字段提供对浏览器环境更友好的模块入口;
  6. files:指定哪些文件发布到npm上;
  7. type:指定js文件的处理方式,若不指定,则按照commonJs处理;

简单把一部分vben-admin的方法搬到这个项目中:

截屏2024-05-26 14.20.57.png

入口文件代码编写:

export * from './cipher'
export * from './color'
export * from './is'
export * from './mitt'
export * from './uuid'

这样写可以支持tree-shaking,将其用到自己的项目中,在打包的时候,也只会把用到的方法打包进来。

不推荐export一个对象,对象里面包含方法;不推荐export一个构造函数的实例。

发布到npm

发布到npm上,只需先去注册好npm账号,然后执行登录和发布命令即可:

npm login # 注意源需要是npm,不能是淘宝镜像或者cnpm
npm publish # 注意发布的版本号不得低于上个版本 不得和已有的库名重复

若是发布到npm私有库,例如Nexus上,可参考手把手教你如何配置私有npm库

编写文档

文档主要解决两个问题:告诉开发人员,我们有哪些可以用的方法,以及如何使用这些方法。

在没有文档的时候,我们只能看文件名、看源码,猜猜看有没有可以用的方法。一旦我们将方法抽离成库,源码看起来就费劲了。(当然我们也可以把源码部署到npm上,但也要到node_modules里面看)

我们可以使用vitepress新建一个文档站点,可以将其部署到服务器上让所有人访问。

官方网站的quick start

总结思维导图

github.com/beat-the-bu…

Rollup.png