npm package编码与私有部署的操作教程

一、Verdaccio私库软件搭建（使用者可跳过本段）

1.1 安装

在npm官网上有这一段话，推荐使用 Verdaccio 来搭建npm私库。自行部署的原因是：通过npm账户提交的package默认是公开的，只有私有/组织账户才可以切换私有访问(需要每月支付$7)；另一方面，公开访问的package可能存在一些安全隐患。

You can also use a private npm package registry like GitHub Packages or the open source Verdaccio project. This lets you develop packages internally that are not shared publicly.

可以通过Docker方式部署项目，本地可以通过http://localhost:4873访问verdaccio，也可以通过http://IP地址:4873的形式给其他同事/人员提供服务。

1

docker run -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio

1.2 配置(verdaccio)

verdaccio的配置文件在/verdaccio/conf/config.yaml，可以通过内置浏览器或者vi命令调整文件配置。

(1) uplinks

当需求的包在verdaccio内未读取到时，会通过uplinks的配置内容进行外部包访问。

1
2
3
4
5

uplinks:
  taobao:
    url: https://registry.npmmirror.com/
  npmjs:
    url: https://registry.npmjs.org/

二、本地开发环境调整

2.1 本机NPM配置调整

实际开发时，建议使用** (2) 单项目配置**

(1) 全局配置

执行下面的命令后，会修改npm的配置信息（Linux是~/.npmrc，windows是C:\Users\用户\.npmrc），该操作对本地所有项目生效。

1

npm set registry http://localhost:4873/

(2) 单项目配置

执行下面的命令后，会在项目根目录生成.npmrc，该操作仅对当前项目生效。

1

npm set registry http://localhost:4873/ --location project

(3) 作用域配置

有些时候我们只想引用内部的一些package，而通常这些package都会使用相同的前缀名称，如：@vue/cli-service、@vue/cli-plugin-vuex，此时通过@my-scope的方式可以单独设置某个作用域使用Verdaccio。

1

npm config set @vue:registry http://localhost:4873

命令执行后，全局配置文件会多出一行配置：
@vue:registry=http://localhost:4873

(4) 其他：每次执行安装时单独配置

可以在每次安装依赖时指定registry，实际意义及作用不大，此处仅作为一个知识面补充。

1
2
3

npm ci --registry http://localhost:4873
npm install --registry http://localhost:4873
npm install lodash --registry http://localhost:4873

2.2 注册Local NPM账号

(1) 执行注册命令

1

npm adduser --registry http://localhost:4873

(2) 输入用户名

(3) 输入密码

(4) 输入邮箱

(5) 注册成功

当出现**Logged in as 用户名 on http://localhost:4873/**的提示时，代表注册成功。

注册成功后，全局配置文件会多出一行配置：

1

//localhost:4873/:_authToken="ETLeBFyqcPkXNj/zXXdcDA=="

verdaccio 目前不支持 Web 登录，通过在注册命令后添加--auth-type=legacy后，可以实现页面登录，但实际上并无什么作用。

三、编写package

此处以TheFloorPlan.vue组件为例(劳工项目的平面图组件)，从头编写一个Package Demo。

注：为了方便理解，组件移除了关于element-ui的引用内容。以一个单组件的形式，来俯瞰Package的全部操作过程。

3.1 配置开发环境

使用vue create创建一个新项目，之后清理项目中的无用文件，如HelloWorld.vue等。

1

vue create <项目名称>

3.2 编码

(1) 将组件拷贝至项目中

(2) 在components目录下创建导出文件

(3) 在main.js中引用内容

(4) 编写测试页面&配置路由

(5) 配置package.json

主要调整三个地方

• privates属性从true改为false，否则无法上传到npm私库。

• 配置一条打包命令，把入口指向到导出文件。

  1	"lib": "vue-cli-service build --target lib src/components/index.js --dest lib"

• 设置files属性，指定需要上传到npm私库的目录。

3.3 编译

执行npm run lib命令进行打包，编译完成后项目根目录下就多出一个lib目录。

3.4 提交

（1）登录npm私库

输入下方命令后，再依次输入用户名、密码、邮箱。

1

npm login

（2）验证当前登录账号

1

npm who i am

（3）提交

1

npm publish

出现下图时，则表示npm包提交私库成功。

在verdaccio页面上也可以看到已经上传成功了。

四、使用package

之后就可以在项目中使用刚开发的包了。

（1）NPM - 配置&安装私有package

1
2
3
4
5

# 在项目中配置好verdaccio地址，后续执行命令就不用添加 --registry http://localhost:4873 了。
npm set registry http://localhost:4873/ --location project

# 此处就可以直接执行安装了，不用每次命令都指定私库地址了。
npm install component-kit

（2）main.js - 依赖引入

1
2

import ComponentKit from 'components-kit/lib/components-kit.umd.min'
import 'components-kit/lib/components-kit.css'

（3）具体页面 - 使用组件

此处可以拷贝3.2的第3步代码，验证是否可以在项目中展示。

五、附录

5.1 版本管理的基本概念

版本号组成规则：**..[-]**。

名词解释：

• major：代表主版本号，通常在需要提交不能向下兼容的情况下对该版本号进行升级。
• minor：代表次版本号，通常在新增功能时才对该版本号进行升级。
• patch：代表修复版本号，升级该版本号代表修复一些bug，但没有新增功能或者存在不向下兼容的功能。
• prerelease：带有该版本号的包通常表示在测试阶段，尚未稳定，通常不建议用户安装。

其中prerelease又有三个可选项：alpha、beta、rc。

• alpha：代表内部测试版，会有很多Bug，是比beta更早的版本，一般不建议对外发布。
• beta：相对alpha版本已有了很大的改进，但还是存在一些缺陷，需要经过多次测试来进一步消除。
• rc：Release Candidate顾名思义就是正式发布的候选版本。和Beta版最大的差别在于Beta阶段会一直加入新的功能，但是到了RC版本，几乎就不会加入新的功能了，而主要着重于除错！RC版本是最终发放给用户的最接近正式版的版本，发行后改正bug就是正式版了，就是正式版之前的最后一个测试版。

例如：1.1.0-alpha.1、1.1.0-beta.1、1.1.0-rc.1。

5.2 组成规则中的<>、[]分别代表的意思

**<>**：表示必填。
**[]**：表示选填，可填可不填。
**{}：表示必填，并且需要从{}**提供的内容里选择一项。