使用verdaccio搭建私有npm服务

使用verdaccio搭建私有npm服务

安装

npm install -g verdaccio

启动

verdaccio

配置相关

storage: ./storage
plugins: ./plugins
web:
  title: Verdaccio
auth:
  htpasswd:
    file: ./htpasswd
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
server:
  keepAliveTimeout: 60
middlewares:
  audit:
    enabled: true
logs:
    { type: stdout, format: pretty, level: http }

storage 已发布的包的存储位置，默认存储在 ~/.config/Verdaccio/ 文件夹下

plugins 插件所在的目录

web 界面相关的配置

auth 用户相关，例如注册、鉴权插件（默认使用的是 htpasswd）

uplinks 用于提供对外部包的访问，例如访问 npm、cnpm 对应的源

packages 用于配置发布包、删除包、查看包的权限

server 私有库服务端相关的配置

middlewares 中间件相关配置，默认会引入 auit 中间件，来支持 npm audit 命令

logs 终端输出的信息的配置

权限管控

packages:
  '@*/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

这里的 key 代表对应权限需要匹配的包名，例如对于第一个，如果我们发布的包名是这样的 @wjc/test 就会命中。每个规则中对应 4 个参数。其中 proxy 代表如果在私有 npm 库找不到，则会代理到 npmjs（对应 unlinks 中的 npmjs 的 https://registry.npmjs.org/）。而剩下的 3 个参数，都是用来设置包相关的权限，它有三个可选值 $all（所有人）、$anonymous（未注册用户）、$authenticated（注册用户）。那么，下面我们分别看一下这 3 个参数的含义：

access 控制包的访问权限
publish 控制包的发布权限
unpublish unpublish 控制包的删除权限

用户名密码添加到verdaccio

npm who am i
// 查看自己登陆情况
npm adduser --registry http://localhost:4873
// 新增用户 
// 依次输入官网注册的用户、密码和邮箱即可
// 注册登录成功后，可以看到verdaccio的配置文件夹 多了一个文件：htpasswd

上传包

npm init -y
npm publish --registry http://localhost:4873

vuecli3配置 使用Vue插件模式

Vue提供的一个公开方法：install。这个方法会在你使用Vue.use(plugin)时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
在package目录下新建index.js文件，代码如下：

//package/index.js
import PigButton from "../package/pig-button/index.vue"; // 引入封装好的组件
const coms = [PigButton]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};
export default install; // 这个方法以后再使用的时候可以被use调用

组件打包 package.json 添加

"package": "vue-cli-service build --target lib ./src/package/index.js --name esri-map --dest esri-map"

打包命令解释：

–target lib 关键字 指定打包的目录
–name 打包后的文件名字
–dest 打包后的文件夹的名称

然后执行打包命令：npm run package

在打包文件夹执行：npm publish

删除仓库包：npm unpublish 包名 --force --registry 仓库地址