内外网npm私服verdaccio搭建及依赖包的上传

因为公司基于内网开环境开发，所有依赖包必须从外网拷贝到内网，而且当有依赖包变动时，还得再同步更新到内网，无疑升高了开发效率。再者咱们也能够将罕用开发组件封装公布于本人的npm仓库，不便复用。

一、外网全局装置 verdaccio

npm install -g verdaccio

首先启动 verdaccio，任意控制台执行命令

verdaccio

呈现以下信息表明装置胜利

   warn --- config file  - /home/yg/.config/verdaccio/config.yaml  // 配置文件所在位置   warn --- Plugin successfully loaded: htpasswd    warn --- Plugin successfully loaded: audit    warn --- http address - http://localhost:4873/ - verdaccio/3.10.1 // 仓库所在地址 4873示意默认端口

浏览器中输出地址 http://localhost:4873/,启动服务。这里显示了我之前上传过的组件。

二、config.yaml配置阐明

# #号前面是正文# 所有包的缓存目录storage: ./storage# 插件目录plugins: ./plugins#开启web 服务,可能通过web 拜访web:  # WebUI is enabled as default, if you want disable it, just uncomment this line  #enable: false  title: Verdaccio#验证信息auth:  htpasswd:    #  用户信息存储目录    file: ./htpasswd    # Maximum amount of users allowed to register, defaults to "+inf".    # You can set this to -1 to disable registration.    #max_users: 1000# a list of other known repositories we can talk to#私有仓库配置uplinks:  npmjs:    url: https://registry.npmjs.org/packages:  '@*/*':    # scoped packages    access: $all    publish: $authenticated    #代理 示意没有的仓库会去这个npmjs 外面去找 ,    #npmjs 又指向  https://registry.npmjs.org/ ,就是下面的 uplinks 配置    proxy: npmjs  '**':    # 三种身份,所有人,匿名用户,认证(登陆)用户    # "$all", "$anonymous", "$authenticated"    #是否可拜访所须要的权限    access: $all    #公布package 的权限    publish: $authenticated    # 如果package 不存在,就向代理的上游服务发动申请    proxy: npmjs# To use `npm audit` uncomment the following sectionmiddlewares:  audit:    enabled: true# 监听的端口 ,重点, 不配置这个,只能本机能拜访listen: 0.0.0.0:4873# 容许离线公布publish:  allow_offline: true# log settingslogs:  - {type: stdout, format: pretty, level: http}  #- {type: file, path: verdaccio.log, level: info}

须要分外留神的是必须配置 listen: 0.0.0.0:4873 能力运行其余机子拜访！！！
在离线时要公布依赖包必须设置 allow_offline: true ！！！

三、增加用户并设置npm镜像源

#以后npm 服务指向本地 npm set registry http://localhost:4873# 注册用户 在本地注册一个用户而后指向咱们的地址而后咱们就能够公布包了npm adduser --registry http://xxx:4873Username: xxxPassword: xxxPassword:  xxxEmail: (this IS public) xxx Logged in as yg-ui on http://xxx/ （你的ip地址）这时候咱们就注册一个用户，咱们能够用这个用户名和明码去登录去上图窗口去登录了

下次咱们再登录时，只须要输出

npm login

而后顺次输出账户明码，接着查看以后用户。

npm who am i

查看以后用户用户是否登录胜利

四、公布依赖包

首先必须设置镜像源:

npm set registry http://localhost:4873

为了方便管理npm源，举荐装置 nrm, 具体如何应用这里不多介绍能够间接百度。

接着，以vuecli3库模式为例子，公布vue组件到私服

1、 package.js 中新增一条编译为库的命令

"lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"

--target : 构建指标，默认为利用模式。这里批改为 lib 启用库模式。
--dest : 输入目录，默认 dist 。这里咱们改成 lib
[entry] : 最初一个参数为入口文件，默认为 src/App.vue 。这里咱们指定编译 packages/ 组件库目录。
在库模式中，Vue是外置的，这意味着即便在代码中引入了 Vue，打包后的文件也是不蕴含Vue的。
如果咱们在依赖中引入了 lodash 等生产环境必须装置的依赖库等，咱们能够在vue.config.js中配置 external 属性, 使之不打包对应的依赖包。

   module.exports = {      configureWebpack:{          externals: {             'vue': 'Vue',             'vue-router':'VueRouter',             'axios': 'axios',             'lodash' : '\_'          }      }   }

2、配置 package.json

  {    "name": "packagename",    "version": "0.1.5",    "description": "基于 Vue 组件库",    "main": "lib/index.js",    "keyword": "vcolorpicker colorpicker color-picker",    "files": ['dist', 'page'],    "private": false  }

其中

private : 必须设置为 fasle
files : 设置要上传到npm库的文件目录
main : 我的项目入口，默认为同级目录的 index.js
name : npm包名，就是咱们 import xxx from packagename 中的包名

也能够这么了解 import xxx from packagename， xxx 就是引入 main 入口中 lib/index.js暴露出的变量名。

3、增加.npmignore 文件，设置疏忽公布文件
和package.json的 files 属性一样,咱们公布到 npm 中，只有编译后的 lib、package.json、README.md等文件才是须要被公布的。所以咱们须要设置疏忽目录和文件。
语法同.gitignore 的语法一样，具体须要提交什么文件，看各自的理论状况。

# 疏忽目录examples/packages/public/ # 疏忽指定文件vue.config.jsbabel.config.js*.map

4、登录到 npm

npm login

具体登录过程同上，具体不多说了。

5、公布到 npm

npm publish

执行后显示公布胜利即可在npm私服上找到本人的包，如果没有公布胜利，有可能是包名称或者版本反复了，改个配置即可。

五、内网npm私服搭建

将以下对应的外网目录拷贝到内网环境中

文件：C:\\Users\\用户名\\AppData\\Roaming\\npm\\verdaccio

文件：C:\\Users\\用户名\\AppData\\Roaming\\npm\\verdaccio.cmd

目录：C:\\Users\\用户名\\AppData\\Roaming\\npm\\node\_modules\\verdaccio

文件：C:\\Users\\用户名\\AppData\\Roaming\\verdaccio\\config.yaml

目录：C:\\Users\\用户名\\AppData\\Roaming\\verdaccio\\storage

留神，其中 storage 目录是寄存npm依赖包的中央， 咱们能够先间接在外网公布好npm包，而后把storage文件夹复制到内网，接着关上内网verdaccio地址，就能发现这些依赖包主动公布到内网了。

咱们公布依赖包到npm私服，有两种包，一种是本人开发的包，另一种是外网npm上的开源包，如果想要将开源包公布到本人的私服上应用，请留神一下几点（踩着坑过去的！！！）：

1：要公布的npm依赖包，最好用npm下载，别用cnpm，因为cnpm蕴含了各种快捷方式，拷贝到其余电脑会呈现各种问题
2：留神查看公布的npm包中package.json中的 script 中是否含有 republish等钩子属性，republish 会在公布之前执行该命令，而往往咱们并不具备执行该命令的环境，从而报错，咱们能够将它删除
3：依赖包中有可能嵌套了其余依赖包，该依赖包中子目录的 node_modules文件夹查看依赖状况，公布之前也必须一并将它公布。因为 node_modules 是冒泡向上查找依赖的，雷同依赖包有不同版本，公共版本被提取到了依赖包的最外层，非凡版本只能存在于当前目录底下 node_modules文件夹
4：如果想公布指定package.json下的所以npm包，失常状况下至多有100多个依赖包，咱们手动公布是很辛苦的。然而，verdaccio又不反对一键导入，所以咱们只能一个个公布。这里我写了一个node主动读取node_modules目录下的文件并且主动公布依赖包到npm的publish的文件，供大家试用！

参考文档

《npm 模块装置机制简介》
《node_modules 窘境》