搭建组件库并上传到私有npm

私有库方案对比

• 购买npm官方私有库，花钱，服务器在国外，代码在别人手中
• cnpm 配置及安装复杂
• sinopia 已经停止维护
• verdaccio 使用简单

使用verdaccio

• 安装verdaccio npm install -g verdaccio
• 配置修改 配置文件是在~/.config/verdaccio 文件夹的config.yaml文件

storage: ./storage              // 已发布的包的存储位置
plugins: ./plugins              // 插件所在的目录
search: true                    // 支持对npm包的搜索
web:
  title: Verdaccio
auth:                           // 用户相关，比如注册，鉴权
  htpasswd:
    file: ./htpasswd
    max_users: -1              // 设置为-1，禁止注册

# a list of other known repositories we can talk to
uplinks:                        // 用于提供对外部包的访问
  npmjs:
    url: https://registry.npmjs.org/

packages:                       // 用于配置发布包、删除包、查看包的权限
  '@*/*':
    # scoped packages
    access: $authenticated
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs

  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
server:
  keepAliveTimeout: 60

middlewares:
  audit:
    enabled: true

# log settings
logs: { type: stdout, format: pretty, level: http }
notify:
  'dingtalk':
    method: POST
    headers: [{'Content-Type': 'application/json;charset=utf-8'}]
    endpoint: https://oapi.dingtalk.com/robot/send?access_token=e66cebe2e7e8911861b39375edc53774a678a382a7a80d52c9776b33e774f837 # 钉钉机器人的 webhook
    content: '{"msgtype":"text","text": {"content":"发布通知: 大大的新包发布了：* {{ name }}*"}}'

docker安装私有库

docker pull verdaccio/verdaccio mkdir -p /opt/docker/verdaccio/conf #config.yaml和htpasswd存放在这里 mkdir -p /opt/docker/verdaccio/storage #包文件等 需要给verdaccio文件手动添加权限，并重启容器，否则将没有权限向storage文件夹添加脚本，导致出错 docker run -it --name verdaccio -p 4873:4873 -v /opt/docker/verdaccio/conf:/verdaccio/conf -v /opt/docker/verdaccio/storage:/verdaccio/storage verdaccio/verdaccio

基本使用

• 添加删除源 使用nrm来切换源

npm adduser --registry `你的ip地址: 4873`
npm install -g nrm
nrm add myUnlinenpm `你的ip地址: 4873`
nrm use myUnlinenpm

• 发布

npm publish --registry=`你的ip地址:4873`

vue组件编写

vue2项目正常安装，新建packages文件下存放组件

新建YrcToast文件夹，下面新建YrcToast.vue和index.js文件

// YrcToast/YrcToast.vue
<template>
  <div>
    <transition name="fade">
      <div class="little-tip" v-show="showTip">
        <img class="lazy" referrerpolicy="no-referrer" data-src="assets/img/success.png" alt="" width="36" v-if="type=='success'" />
        <img src="assets/img/fail.png" alt="" width="36" v-if="type=='fail'" />
        <img src="assets/img/warning.png" alt="" width="36" v-if="type=='warning'" />
        <img src="assets/img/loading.png" alt="" width="36" v-if="type=='loading'" class="loading" />
        <span>{{msg}}</span>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'YrcToast',
    data() {
      return {
        showTip: true,
        msg: '',
        type: ''
      }
    },
    mounted() {
      setTimeout(() => {
        this.showTip = false
      }, 1500)
    }
  }
</script>
<style scoped>
  /* 样式略 */
</style>

// YrcToast/index.js
import YrcToast from './YrcToast.vue';
YrcToast.install = function (Vue) {
    Vue.component(YrcToast.name, YrcToast);
}
export default YrcToast

// packages/index.js
/*
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2021-08-23 11:30:43
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-23 14:05:41
 */
import YrcToast from './YrcToast/index'
const components = [
    YrcToast
  ]


  const install = function (Vue) {
    components.forEach((component) => {
      if (component.install) {
        Vue.use(component)
      } else if (component.name) {
        Vue.component(component.name, component)
      }
    })
    Vue.prototype.$YrcToast = YrcToast
  }
  
  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
  }

  export {
    install,
    YrcToast
  }
  export default {
    install: install,
  }

• 配置package.json文件

{
  "name": "yx-common",
  "version": "0.2.6",
  "private": false,
  "main": "./packages/index.js",
}