• 浅析内网私有模块的处理方式、从码云上通过git安装私有npm包、npm安装git仓库的协议介绍及npm link的使用和npm私有模块的3种方法


      npm 对于前端开发来说是一种必备的工具,对于开源项目来说,完全没有任何问题,安装包的依赖直接依赖于 Npm 即可。但是,对于公司内网的一些项目就不是太方便了。

      对于 npm 公用包来说是比较方便的,直接引用即可。而内网的代码应该怎么引入呢?大概有以下几种方式:

    1. npm 公有包
    2. npm 私有包
    3. 搭建 npm 私有服务器
    4. 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

  • 相关阅读:
    Below is a nice utility class for Enums
    ASP.NET页面与IIS底层交互和工作原理详解
    深入理解 __doPostBack
    DataList控件显示图片要的是效果
    Below is a nice utility class for Enums
    ExtensionMethods Class
    showModalDialog中打开新页面Session丢失
    Delegate,Action,Func,匿名方法,匿名委托,事件
    异步编程:IAsyncResult异步编程模型 (APM)
    C#线程系列讲座(1):BeginInvoke和EndInvoke方法
  • 原文地址:https://www.cnblogs.com/goloving/p/16482359.html
Copyright © 2020-2023  润新知