npm私仓搭建并制作发布npm包

这几天发现多端上存在一些重合的业务逻辑代码，在每个项目中都写一遍逻辑是很没有效率的事情，也不利于 bug 的管控与治理。一般在 vue 项目中，同一个项目中的重复代码可以通过封装组件，封装 mixin，抽离 utils 函数的方式来复用，对于分散在多个项目中的重复代码，可以通过制作为 npm 包的方式来实现复用。

公司的前端基础设施还是非常不完善的，并没有自己的 npm 私仓。首先要把 npm 私仓建立起来，经过一番查找资料最终决定采用 verdaccio 进行搭建。

npm 私仓搭建

verdaccio 是一个轻量级的 npm 私有仓库软件。它的搭建过程非常简便，无需数据库，唯一的要求就是需要有 node 环境。

windows 搭建私服 verdaccio（内外网安装）
使用 verdaccio 搭建 npm 私有库 pm2 守护进程
搭建主要过程主要参考了这两篇博文，唯二需要注意的是配置文件末尾应该加上 listen:0.0.0.0:4873 还有使用 pm2 启动的时候，应该填写 verdaccio 的绝对路径

1
2
3

pm2 start C:\Users\Administrator\AppData\Roaming\npm\node_modules\verdaccio\bin\verdaccio
# 如果是linux，就用下面这个命令就好了
pm2 start `which verdaccio`

使用私仓

nrm 方式

安装nrm
npm install -g nrm
添加仓库
nrm add seeker http://{地址}:4873/
使用仓库
nrm use seeker

npmrc

直接添加
registry=http://{地址}:4873/

npm 包制作发布流程

要制作一个 npm 包，包含代码编写，本地测试，文件打包等关键点
首先需要搭建的是打包的工作流，这里采用的是 rollup + typescript 搭建的。

为什么要用 typescript 编写包呢？如果你是用的 vscode 写代码，一定会觉得 vscode 的代码提示非常好用，当你引用一个包时，包函数的使用方法都以 ts 函数定义的方式显示出来，这个是靠 typescript 的 .d.ts 文件做到的。而用 typescript 编写类库，就可以使用 tsc 自动生成 .d.ts 文件，让我们自己编写的库也能获得 vscode 代码提示的加持。这样来编写库，对库使用人员是非常友好的。

rollup工作流搭建

rollup 使用非常简单。安装rollup后，只需要编写一个简单的配置文件，就可以工作了。

import typescript from "@rollup/plugin-typescript";
import pkg from "./package.json";

export default {
  input: "src/index.ts",
  output: [
    {
      // 出口文件
      file: pkg.main,
      format: "umd",
      name: "seeker-fe-utils",
    },
    {
      // 出口文件
      file: pkg.module,
      format: "es",
      name: "seeker-fe-utils",
    },
  ],
  plugins: [typescript()],
};

我这里引用了 rollup 的 typescript 插件，可以看到我输出了两种模块规范的目标文件。注意这里我直接引入了 package.json，以其中的 main 字段和 module 字段直接作为输出路径，保证了入口文件路径的准确性，可以算是一个小技巧。

目前我使用的 @rollup/plugin-typescript 插件版本是 6.0.0，这个版本有一个 bug，即输出多个文件与自动生成 .d.ts 的配置是冲突的。要生成 .d.ts需要在 tsconfig 文件中设置 outDir，然后就会导致很蛋疼的冲突问题。参考了 stackoverflow 上的解决方法是，不使用 tsconfig配置，而是通过命令行传参的方式单独生成 .d.ts 文件。把以下命令配置到 package.json 的 script 中。

"scripts": {
  "gen-type": "npx tsc -d --emitDeclarationOnly --outDir types",
  "build": "npx rollup -c",
  "pub": "npx rollup -c && npm publish"
}

package.json 配置简要说明

如果要发布 npm 包，以下三个字段是必须的。
name - 包名
version - 版本号，每次发布的版本必须与之前的版本不同
main - 指定 cjs 模块入口文件的路径
module - 指定 esm 模块入口文件的路径，用来和webpack搭配只用
broswer - 指定 umd 模块入口文件的路径

版本迭代

npm 提供了 npm version 系列命令用来修改 package.json 中的版本号。
README 文件正常会在 npm 包发布的时候更新。

安装测试

在本地测试一般使用 npm link，具体方法是

在包项目根目录下使用npm link，这将会把包软连接到全局 npm 包中。
在项目目录下使用 npm link 包名，这将会把在全局包下的包软连接到项目的 node_modules 文件夹中。
在开发时可以指定 package.json 中的 main 为源文件的路径，这样就可以边修改包源码边测试了。

还可以使用 npm install {npm 包绝对路径} 在本地安装 npm 包测试

包发布

npm 同名包以版本区分，发布新的版本，旧的版本依旧存在
npm publish 发布该版本的包
npm unpublish 从 registry 中删除该版本的包