使用npm加git仓库在内网环境下构建和使用私有模块

2,792 阅读4分钟

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第2篇文章,点击查看活动详情

背景介绍

npm 对于前端工程师来说是一种必备的基础环境工具了。如果你需要安装使用开源项目,那就完全没有任何问题,安装包的依赖直接依赖于 npm 仓库源即可。如果你自己写了一个插件或组件库之类的,想公开发布给别人使用,那么也是可以直接发布到 npm 源上去的。

但是,对于一些中大型公司,比如国企项目、政府项目、银行项目等,通常都会因为网络安全问题,要求使用公司内网。所以针对这种公司内网的一些项目,我们想去构建或使用自己的私有模块,就不是太方便了。

通常我们使用第三方库,都是使用的 npm 公用包,直接 npm install module_name 引用即可。而内网的代码应该怎么引入呢?总结一下大概有以下几种方式:

  1. npm 私有包
  2. 公司自己搭建 npm 私有服务器
  3. git 仓库

npm 公有包肯定是不能满足我们需求的,因为所有人都能下载,也就意味着代码泄漏了。npm 私有包是收费的,而搭建 npm 服务器也是需要一定人力和服务器成本的。所以对于中大型公司来说,有钱有人,通常都会搭建自己的 npm 私服。但是对于一些小型初创公司来说,最好的方案往往是采用 npm 安装 git 仓库的方式。下面我就来实践一下具体如何操作。

从码云上通过git安装私有包

首先,从码云上新建一个仓库,然后将插件代码 git push 进去(为了方便我使用之前演示的自定义插件项目 npm_test)

图片.png

然后,在本地创建一个npm工程,或使用之前的工程。在相应的package.json中添加私有的npm包,输入:git+仓库位置,如下图所示:

图片.png

然后,执行npm install即可。此时在node_modules中就会有自己的私有nmp包,如下图所示

图片.png

PS:可能在执行npm install时出现错误,提示是没有权限,此时需要输入用户名和密码即可。

也可以在package.json中,在网址中加入用户密码即可,格式为:git+https://username:password@gitee.com/***/npm_test.git

npm 安装 git 仓库的协议

1、下面我们看一下 npm 对于安装 git 仓库的命令

npm install <git remote url>

实际上就是直接 install 一个 URL 而已。对于一些公有仓库,npm 还是做了一些集成的,比如 github 等(示例全部出自 npm 官方文档):

npm install github:mygithubuser/myproject
npm install bitbucket:mybitbucketuser/myproject
npm install gitlab:myusr/myproj#semver:^5.0

如果我们直接安装 github 上,使用网址的方式可以表示为

npm install git+https://github.com/***/npm_test.git

2、看下 npm 安装 git 仓库的协议

格式如下:

<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]

很好理解,分别是: 协议://用户名:密码@主机域名:端口号/路径#提交记录或者是semver语义化规范

3、我们主要需要了解下 protocol 支持 git、git+ssh、git+http、git+https、git+file,私有仓库需要用户名和密码时需要填写用户名和密码即可,其他那些内容其实直接就输入你的git仓库地址即可

4、这里还需要注意的一个问题就是:npm install 在安装时会使用 package-lock.json, 有时候同一分支不会从 github 上拉取最新的,可能需要手动再安装一下(拿自己的仓库试了下,果然不会更新),所以安装时尽量以 tag 为标签打版本号进行安装,这样确保代码是正确的

npm link 的使用

虽然 npm + git 解决了我们内网私有模块的问题,但是大家想过没有,如果私有模块有点bug需要修复下,那么岂不是每次都要在私有模块项目 npm_test 修复,然后再打 tag 标签 push 到仓库,然后使用的项目再 npm install 安装下来,再去验证,好麻烦是不是。

所以很多时候我们需要修改 private-package 模块,但又不想每次先提交 git,再执行 npm install 命令来看效果,这样效率太低也太麻烦,npm link 可以帮助我们很方便的实现这样的功能。来看一下如何使用

# clone 私有包
git clone https://xxx.com/private-package.git
# 进入私有包目录
cd private-package
# 创建全局的link
npm link

# 进入项目目录
cd ../project/demo
# 将private-package link到项目
npm link private-package

# 取消link 
npm unlink private-package

也可以直接进入项目 demo 目录

cd ~/project/demo
# link 相对路径的 private-package
npm link ../private-package

# 取消相对路径的 private-package
npm unlink ../private-package

下面是我的2个演示项目

图片.png 图片.png

注意包名还是需要使用 npm_publish 的 package.json 里的 name 的名字哦。

link 好之后,本地将私有包改几个字,发现就可以生效了,这样本地开发联调测试就非常方便了

图片.png