前端私有仓库搭建


前言

随着公司的业务愈来愈复杂,项目迭代速度也愈来愈快,那么项目间的经常使用的业务代码共享变得很是之有必要。可是对于公司的业务代码是不能对外开放的,所以有必要搭建一个相似于http://npmjs.org这个的一个私有平台来管理公司业务相关的组件及代码。html

更简单的描述就是咱们须要在公司内部搭建一个npm仓库,管理包的同时,也能够借助npm的命令行工具快速用代码模块或业务组件。node

可是在没有npm私有仓库以前,咱们都是手动复制某个项目的某个模块到相关的项目中,这样操做比较繁琐,所以咱们须要一个npm私有仓库存放相关公用的组件及模块。git

关于做者

一个工做八年的草根程序员。程序员

内容

npm及私有npm的工做原理?

咱们使用npm安装,共享和分发代码,npm帮助咱们管理项目中的依赖关系,当咱们使用npm install去安装一个模块时,会先检查node_modules目录是否已经存在这个模块,若是没有便会向远程仓库查询。github

那如今若是咱们搭建了私有的npm,当咱们使用npm install后会向私有的npm发起请求,服务器会先查询所请求的这个模块是不是咱们本身的私有模块或已经缓存过的公共模块,若是是则直接返回给用户,若是不是的话,那么则会继续向上查找(也就是开源的npm仓库)去查找该模块并返回给用户。web

如何搭建一个私有的npm仓库呢?

搭建npm仓库通常有以下基本方法:sql

  1. 使用 Sinopia
  2. 使用cnpmjs.org

1、cnpm搭建(我没试过,你们能够尝试一下)

官方网站npm

1.1 安装cnpm

npm install -g --build-from-source cnpmjs.org cnpm sqlite3
# 若是报错或者警告经过下面方式安装
npm install -g --unsafe-perm --verbose --build-from-source cnpmjs.org cnpm sqlite3

复制代码

若是安装不流畅经过下面形式安装:json

npm install -g --build-from-source \
  --registry=https://registry.npm.taobao.org \
  --disturl=https://npm.taobao.org/mirrors/node \
  cnpmjs.org cnpm sqlite3

复制代码

若是报警告或者安装错误,请添加参数--unsafe-perm --verbose浏览器

1.2 启动并配置服务

管理员:myname,othername 范围:my-company-name,other-name 默认端口:7001-registry, 7002-web

启动服务

$ nohup cnpmjs.org start --admins='myname,othername' \
  --scopes='@my-company-name,@other-name' &
复制代码

1.3 设置注册地址

将cnpm默认注册地址更改成私有注册地址

cnpm set registry http://localhost:7001
复制代码

1.4 登陆cnpm

$ cnpm login
Username: myname
Password: ***
Email: (this IS public) test@test.com
复制代码

1.5 包上传到私有仓库

新建项目

$ cd /tmp
$ mkdir helloworld && cd helloworld
$ cnpm init
name: (helloworld) @my-company-name/helloworld
version: (1.0.0)

{
  "name": "@my-company-name/helloworld",
  "version": "1.0.0",
  "description": "my first scoped package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

复制代码

上传到私有仓库

$ cnpm publish
+ @my-company-name/helloworld@1.0.0
复制代码

1.6 查看预览包

浏览器中预览

open http://localhost:7002/@my-company-name/helloworld
复制代码

使用cnpm预览

cnpm info
复制代码

1.7 安装私有包

全部公共包均可直接使用cnpm安装

cnpm install hotkeys-js
复制代码

2、经过verdaccio搭建

verdaccio是一个轻量级的私有npm代理注册。

2.1 安装

# 使用 npm 安装
npm install -g verdaccio

复制代码

2.2 启动服务

安装完成后,咱们就能够在命令行中 输入verdaccio命令运行,以下所示:

而后在浏览器中 运行http://localhost:4873就能够看到 以下图所示:

说明服务启动成功了;

固然还能够经过pm2启动,这里不重复说明,有兴趣能够参考相关资料。

2.3 verdaccio的使用

在使用verdaccio以前,咱们能够先安装nrm来管理本身的npm代理,nrm能够快速修改,切换,增长npm镜像地址。

先安装nrm,命令以下:

npm install -g nrm
复制代码

想要了解更多有关的nrm命令,可使用 nrm --help, 会列出全部的命令行的。

2.3.1 添加别名

我这边为了演示下,搭建的地址为http://localhost:4873,大家本身能够修改本身的服务器ip地址了;以下命令:

nrm add verdaccio http://localhost:4873
复制代码

如今咱们可使用 nrm ls 命令查看 使用的全部镜像源地址,verdaccio 就是咱们刚刚新增的,以下图所示:

若是咱们如今不想从私有npm上下载包的话,咱们可使用 nrm use xx命令,use下地址。

npm adduser --registry  http://localhost:4873
复制代码
2.3.2 发布私有包

首先创建一个私有模块

# 假设你创建了一个Git仓库,先克隆下来
git clone git@km-git1.kemai.cn:xiaonengwu/hello.git

# 生成 `package.json` 配置, 注意限定 `@scope` 范围
npm init --scope=xdd
# 提交到仓库
git push origin master

复制代码

若是咱们尚未帐号的话,经过输入命令 npm adduser, 而后依次输入用户名,密码便可建立完毕。若是已有帐号,经过输入命令 npm login,而后依次输入用户名,密码便可登陆。命令分别以下:

// 添加用户
npm adduser 记得回车

// 登陆
npm login 

复制代码

而后发布咱们的代码:咱们可使用 npm publish命令来发布包;以下所示:

npm publish --registry http://localhost:4873
复制代码

发布完成后,在刷新下 http://localhost:4873/#/ 就能够看到咱们刚刚发布的包了,如图

2.3.3 npm下载包

最后咱们再验证下,咱们新建一个文件夹为 npmtest2,进入到该项目的根目录下,使用命令 npm install @xdd/hello 下载咱们刚刚发布到私有的npm包;

以下图所示:

参考资料

联系做者

平凡世界,贵在坚持。

相关文章
相关标签/搜索