前端组件库发布到npm仓库的流程

知行_行知
83 阅读4分钟

前言

众所周知，在前端的日常开发中，封装组件是很常规的操作。一个封装的好的组件库可以在项目的任何地方调用，例如ElementUI。虽然ElementUI已经足够好用，但因为公司业务场景的开发人员为了满足开发场景还是得封装自己的组件，或者基于某个UI如ElementUI进行二次封装。这是单一个开发人员同时管理着多份代码（非monorepo模式），同时每份代码里面又有相似的开发场景时，如果需要把之前写过的代码复制一份到新项目，折旧稍显的麻烦。这时我们就可以把封装好的组件上传到npm仓库，这样就可以像ElementUI一样一键导入使用了。

准备工作

1、首先，我们需要明确的是我们要发布的组件库的作用：用ElementUI的封装举例，作为后台管理项目的常用组件。

2、创建一个vue2空项目，并安装ElementUI，安装和引入见官网

3、创建一个存放组件的文件夹，如：src/elementConfig，封装组件，如：src/elementConfig/ui-form/index.vue，封装好后在app.vue里面引入看看效果。

4、导出组件，这里需要使用到Vue的install方法，这个方法会把我们封装的组件通过Vue.use(plugin)的方式作为插件全局调用，导出文件src/elementConfig/index.js

 import UiForm from ../elementConfig/ui-form/index.vue

 const components = [UiForm]

 const install = function(Vue) {
     components.forEach(component => {
         Vue.component(component.name, component)
     })
  }
  
  export default install

5、组件打包，需要修改package.json文件，新增打包配置命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "package": "vue-cli-service build --target lib ./src/elementConfig/index.js --name backend-management-ui --dest backend-management-ui"
  }

package，为打包的命令名，随便起

--target lib 关键字，指定打包的目录

--name 打包后的文件名

--dest 打包后的文件夹名称

执行完打包命令后可以看到以下内容：

image.png

发布流程

1、在打包好的文件夹下，如backend-management-ui文件夹下，执行npm的初始化命令

npm init -y

生成package.json文件后，给这个文件的名称、描述、关键字等字段写上，不写也可，但名称不能和现有的npm包重名。

2、发布到npm，先检查有没有npm账号，如果没有就先到npm去注册，发布时一定要先把npm源切换回官方源：

npm config set registry=https://registry.npmjs.org

3、注册好账号后，回到backend-management-ui文件夹下，执行如下命令，添加npm用户

npm adduser

执行后会让你打开浏览器去授权，照做就行

4、执行发布命令

npm publish

这里如果包名称有重复会报403，如下图：

image.png

如果你的npm账号没有开启双因素认证也会报403，如图：

image.png

这时需要去npm账号Account下找到 Two-Factor Authentication 按钮，一路操作即可，记得保存好恢复码。

解决完上述报错后，再次执行命令会要求你打开浏览器授权，授权即可，然后到npm账号点击packages，即可查看到刚刚发布的包

5、如果想要撤回发布的包，请在72小时内撤回，删除的包24小时内不允许重复发布，撤回命令如下：

npm unpublish xx包名 --force

加上--force的原因是为了规避权限方面的报错

6、回到刚刚的项目，安装刚发布的包即可测试效果，发布流程结束。

7、更新包。如果要更新组件库，可以先把项目上传到远程仓库，等下次要更新功能或者修复bug时方便找到代码。

修改或者新增功能后，重新打包，重新打包后package.json会丢失，可以通过命令找回，或者复制仓库里面的package.json，然后修改版本号。

用命令找回流程：

方法一：

// 找到最近的提交的 dist名/package.json 文件的记录
git log --oneline -- dist名/package.json

// 用最近一次提交 dist名/package.json 文件 的hash 恢复 package.json文件
git checkout hash值 -- dist名/package.json

// 1、找到dist名/package.json后直接编辑版本名即可
// 2、npm version x.y.z --no-git-tag-version --prefix dist名/
// 3、使用下方的命令修改版本名

代码版本更新（"version": "x.y.z"）应该遵循以下原则：

更新补丁/bug修复/修改文档等，更新z，如：1.0.0 -> 1.0.1，使用命令为 npm version patch

小版本更新/新增功能，更新y，如：1.0.0 -> 1.1.0，使用命令为 npm version minor

大版本更新/重构/删除API等，更新x，如：1.0.0 -> 2.0.0，使用命令为 npm version major

修改好package.json后，检测npm的登录状态

npm whoami

如果没登录会报错，如下：

image.png

没登录就执行如下命令进行登录：

npm login

如果登录了会直接返回用户名

然后执行发布命令：

npm publish

这样就更新成功了。

avatar
文章
阅读
粉丝