标签：npm git package 私有 ui anyi com
npm 对于前端开发来说是一种必备的工具，对于开源项目来说，完全没有任何问题，安装包的依赖直接依赖于 Npm 即可。但是，对于公司内网的一些项目就不是太方便了。
对于 npm 公用包来说是比较方便的，直接引用即可。而内网的代码应该怎么引入呢？大概有以下几种方式：
- npm 公有包
- npm 私有包
- 搭建 npm 私有服务器
- git 仓库
公有包肯定是满足不了需求的，因为所有人都能下载包，也就意味着代码是被泄漏了，首先被排除。
npm 私有包是收费的，而搭建 npm 服务器也是需要一定成本的，所以最好的方案自然是采用 npm 安装 git 仓库的方式了。下面就来实践一下具体如何操作
一、从码云上通过git安装私有npm包
首先从码云上新建一个仓库，然后将插件代码 git push 进去
然后在本地创建一个npm工程，或使用之前的工程。在相应的package.json中添加私有的npm包，输入：git+仓库位置，如下图所示：
然后执行npm install即可，此时在node_modules中就会有自己的私有nmp包，如下图所示
PS：可能在执行npm install时出现错误，提示是没有权限，此时需要输入用户名和密码即可。
如在package.json包中只需要在网址中加入密码即可，格式为：git+https://username:passworld@gitee.com/sunxj888/widget.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/***/vue-summary.git
2、看下 npm 安装 git 仓库的协议
格式：<protocol>://[<user>[:<password>]@]<hostname>[:<port>][:][/]<path>[#<commit-ish> | #semver:<semver>]
我们来一个一个分析：
// 1、<protocol> : 协议
<protocol> is one of git, git+ssh, git+http, git+https, or git+file.
// 例如：
git://github.com/user/project.git#commit-ish
git+ssh://user@hostname:project.git#commit-ish
git+ssh://user@hostname/project.git#commit-ish
git+http://user@hostname/project/blah.git#commit-ish
git+https://user@hostname/project/blah.git#commit-ish
//对应案例中的git+http
"devDependencies": {
"@anyi/anyi-ui": "git+http://xiaohua:xiaohua123@gogs.pms.anyi-tech.com/anyi-front/anyi-ui.git#1.2.37"
}
// 2、[<user>[:<password>]@]
// 前面是用户名，后面是密码，对应案例中的xiaohua:xiaohua123@
"devDependencies": {
"@anyi/anyi-ui": "git+http://xiaohua:xiaohua123@gogs.pms.anyi-tech.com/anyi-front/anyi-ui.git#1.2.37"
}
// 3、<hostname>[:<port>][:][/] 主机名/域名 + 端口号
// 对应 案例中的 gogs.pms.anyi-tech.com/
"devDependencies": {
"@anyi/anyi-ui": "git+http://xiaohua:xiaohua123@gogs.pms.anyi-tech.com/anyi-front/anyi-ui.git#1.2.37"
}
// 4、<path> 路径名
// 对应案例中的 anyi-front/anyi-ui.git
"devDependencies": {
"@anyi/anyi-ui": "git+http://xiaohua:xiaohua123@gogs.pms.anyi-tech.com/anyi-front/anyi-ui.git#1.2.37"
}
// 5、[#<commit-ish> | #semver:<semver>] semver 版本号
// 对应 案例中的 #1.2.37
"devDependencies": {
"@anyi/anyi-ui": "git+http://xiaohua:xiaohua123@gogs.pms.anyi-tech.com/anyi-front/anyi-ui.git#1.2.37"
}
如果使用 #<commit-ish>，它将被用于克隆该提交。如果commit-ish的格式为#semver<semver>;， <semver>可以是任何有效的semver范围或确切版本，NPM将在远程存储库中查找与该范围匹配的任何标记或引用，就像它查找注册表依赖项一样。如果没有指定#<commit-ish>或#semver:<semver>，则使用master。
3、简单总结
（1）protocol 支持 git, git+ssh, git+http, git+https, git+file，私有仓库需要用户名和密码时需要填写用户名和密码，semver 表示需要使用的版本号
（2）直接写 #branch 表示需要安装的分支号
// 所以在开发过程中我们可以这么写包： npm i git+https://username:password@git.example.com/path/reposity#master // 或者使用打的 tag npm i git+https://username:password@git.example.com/path/reposity#1.0.0
（3）可能存在的问题是：
由于新版 npm install 在安装时会使用 package-lock.json, 有时候同一分支不会从 github 上拉取最新的，可能需要手动再安装一下(拿自己的仓库试了下，果然不会更新)，所以安装时尽量以 tag 为标签进行安装，这样确保代码是正确的
此外，由于私有仓库都是需要密码的，这个时候需要提供一个公共账号和密码，某种程度上不利于管理吧
三、npm link 的使用
很多时候我们需要修改 private-package 模块，但又不想每次先提交git，再执行 npm install 命令来看效果，这样效率太低也太麻烦，npm link 可以帮助我们很方便的实现这样的功能。来看一下如何使用
# clone 私有包 git clone https://xxx.com/private-package.git # 进入私有包目录 cd private-package # 创建全局的link npm link # 进入项目目录 cd ../project/abc # 将private-package link 到项目 npm link private-package # 取消link npm unlink private-package
也可以直接进入项目目录
cd ~/project/abc # link 相对路径的 private-package npm link ../private-package # 取消相对路径的 private-package npm unlink ../private-package
注意包名还是使用的 npm_publish 的 package.json 里的 name 的名字哦。然后本地将包改几个字，发现是生效的
四、npm私有模块的3种方法
方法一：git + npm link
方法二：CNPM 私服：cnpm 是淘宝开发的包管理工具，大多数的同学应该都用 cnpm 的客户端命令，其实 cnpm 还有一个很重要的功能，就是搭建私服。
方法三：Nexus 私服：这个就厉害了，Nexus 大家应该知道是对 Maven 包管理的私服工具，其实他还支持 npm 、docker 、yum 等等。
详见这篇文章：https://www.jianshu.com/p/a9540d9f8d9c
标签：npm,git,package,私有,ui,anyi,com 来源： https://www.cnblogs.com/goloving/p/16482359.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。