# 原因

  1. 组件库,公司内部使用
  2. npm公开库乱发东西不太好,在私有库测试发布自己的包

# 用verdaccio搭建私服

网上看到sinopia,在github上查了一下,已经多年没有维护。 而verdaccio是sinopia的分支,如果想要深入了解可以去看看源码和详细介绍

# 1. 环境需要

# 2. 个性verdaccio配置

修改配置的目的就是让我们的私库可以通过公网的ip访问,首先查看npm全局安装包的所在位置:

其中/usr/local/node/node_modules是我们全局安装的地址。

pwd
/usr/local/lib/node_modules/verdaccio/conf

下面的 default.yaml中加入可访问端口

然后对 default.yaml 问题

# 3.对外开放4873端口

verdaccio继承了sinopia,端口号4873依然不变。

在配置的最后一行加入

然后:wq保存并退出vim模式。

# 入口文件

import CustomSwitch from './custom-switch.vue'

/* istanbul ignore next */
CustomSwitch.install = function(Vue) {
  Vue.component(CustomSwitch.name, CustomSwitch);
};

export default CustomSwitch;

# 改下入 webpack.config.js

var path = require('path')
var webpack = require('webpack')

const NODE_ENV = process.env.NODE_ENV

module.exports = {
  // 修改打包入口
  entry: NODE_ENV == 'development' ? './src/main.js' : './packages/switch/index.js',

  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'custom-switch.js',
    library: 'custom-switch', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  }

激动人心的时刻到了,切换到项目根目录运行 npm run build 看有没有生成dist目录,我这里是运行成功了

# 发布到私服

npm set registry http://172.29.xx.39:4873 

npm install xxxx 

npm install 发布的名称

还原镜像

npm config set registry http://registry.npmjs.org 

# 使用pm2守护verdaccio进程

常用命令

  • 安装:npm install pm2 -g
  • 启动:pm2 start verdaccio
  • 停止:pm2 stop verdaccio
  • 重启:pm2 restart verdaccio
  • 删除应用:pm2 delete verdaccio
  • 查看日志:pm2 logs verdaccio

# 启动服务

# 展示页面

# 添加用户

# 发布包到本地

发布包到本地其实也npm发包是一样的只是加了--registry http://loaclhost:4873

具体的npm发包配置,可以自行查阅其它文档,这里就不在讲解。

# 结束

经过上面的流程下来,就可以用自己的私有包了

# 引入文件

Import xxx from '名字/路径'