• Gitlab私有npm包构建 前端


    前言:

    很久没发博客,时间进入2022年,更加忙碌更加卷,其实平时积攒了不少笔记,但都没时间转化为博客

    2022年主要核心是 vue3 + ts 开发,踩过很多坑,躺过很多雷,后续有空会陆续把 vue3 + ts 学习一些值得分享的内容写出来

    创建群组

    可以在这里查看群组


    群组创建项目
    每个项目就是一个独立npm包;这个很重要请记住!!!

     项目的创建就比较随意了,不强制要求什么

    项目ID等会要用要留意:


    项目创建令牌
    官网个人访问令牌详细说明:https://gitlab.com/help/user/profile/personal_access_tokens.md
    允许以只读权限访问镜像仓库;(不勾选)
    read_package_registry允许对包注册表进行只读访问;(要勾选,不勾选就无法上传更新代码)
    write_package_registry允许对包注册表进行读写访问;(要勾选,不勾选就无法上传更新代码) 

    这个很重要只会出现一次,页面刷新后就没了,所以一定要记得保存下来


    接下来到代码编写
    在群组里拉取项目(怎么拉不用教了吧):

    项目设置身份验证
    官网教程:https://gitlab.com/help/user/packages/npm_registry/index.md#use-the-gitlab-endpoint-for-npm-packages
    (基本都是私有公共项目不安全)
    当项目是公共:则不需要身份验证。
     
    当项目是私有:须通过包注册表进行身份验证
    要进行身份验证,请使用以下方法之一:
    使用个人访问令牌或部署令牌进行身份验证
    要使用包注册表进行身份验证,您需要个人访问令牌或部署令牌。
     
    项目级 npm 端点:群组内所有项目都可访问
    实例级 npm 端点:只有项目自己能访问
    本次教程只演示项目级 npm 端点,实例级 npm 端点基本不用
     
    输入命令设置 npm 配置:npm config set -- '//gitlab.syc-cms.com/api/v4/projects/60/packages/npm/:_authToken' "这里填令牌"
    1) 字段解释:
    1.1) gitlab.syc-cms.com // 公司内部gitlab网址
    1.2) 60 // 项目ID
    1.3) 人访问令牌

    项目根目录创建 .npmrc 文件
    官网教程:https://gitlab.com/help/user/packages/npm_registry/index.md#project-level-npm-endpoint-1
    输入以下内容:@syc-web-packages:registry=https://gitlab.cms.syc/api/v4/packages/npm/
    字段解释:
    2.1) syc-web-packages // 群组名
    2.2) gitlab.syc-cms.com // gitlab网站地址

    发布 npm 包
    官网教程:https://gitlab.com/help/user/packages/npm_registry/index.md#publish-an-npm-package
    项目 package.json 文件 publishConfig 字段添加以下内容:"@syc-web-packages:registry":"https://gitlab.syc-cms.com/api/v4/projects/60/packages/npm/"
    1) 字段解释:
    1.1) publishConfig // 决定了我们发布包发布到哪里去,此时发布包就不是往 www.npmjs.com 了
    1.2) syc-web-packages // 群组名
    1.3) gitlab.syc-cms.com // gitlab网站地址
    1.4) 60 // 项目ID

    输入命令发布npm包到组:npm publish

    每次发布包都要更新版本号:

    在这里能看到刚才更新的包:

    2) 关于403报错

    线上有同名且版本号一致的包则无法上传,gitlab包策略是递增更新不覆盖旧版本,实际上也可以手动删除旧包然后再上传

    以上就是npm包的生产上传过程,接下来就是到项目中下载npm包


    下载npm包
    设置群组包的下载地址:npm config set @syc-web-packages:registry https://gitlab.syc-cms.com:8443/api/v4/packages/npm/
    设置群组令牌:npm config set -- '//gitlab.syc-cms.com:8443/api/v4/packages/npm/:_authToken' "群组令牌"
    1) 字段解释:
    1.1) syc-web-packages // 群组名
    1.2) gitlab.syc-cms.com:8443 // gitlab网址:端口
    1.3) mnsxssDZgo1X9xirE3TT // 群组令牌
     
    根据群组内的包名下载npm包:npm install @syc-web-packages/test3
     
     
    参考文章:
    https://gitlab.com/help/user/packages/npm_registry/index.md
    https://segmentfault.com/a/1190000005790827
     
  • 相关阅读:
    空间数据可视化:1. 3D_Bar图表| 空间柱状图
    关系网络数据可视化:3. 案例:公司职员关系图表 & 导演演员关系网络可视化
    关系网络数据可视化:2. Python数据预处理
    关系网络数据可视化:1. 关系网络图&Gephi
    Python图表数据可视化Seaborn:4. 结构化图表可视化
    Python图表数据可视化Seaborn:3. 线性关系数据| 时间线图表| 热图
    Python图表数据可视化Seaborn:2. 分类数据可视化-分类散点图|分布图(箱型图|小提琴图|LV图表)|统计图(柱状图|折线图)
    Python图表数据可视化Seaborn:1. 风格| 分布数据可视化-直方图| 密度图| 散点图
    vue-UI(mui和muit-UI)
    sublime相关操作
  • 原文地址:https://www.cnblogs.com/konghaowei/p/16281513.html
Copyright © 2020-2023  润新知