公共资源包发布流程详解

news2024/10/6 17:35:27

文章目录

    • 公有包发布并使用
    • npm安装git仓库协议
    • 创建及使用 npm 私有包
    • 创建及使用 group npm 私有包
    • 私有仓账密存放位置

当公司各个系统都需要使用特定的业务模块时，这时候将代码抽离，发布到 npm 上，供下载安装使用，是个比较好的方案。

将开源项目发布到 npm 上，完全没有任何问题。但对于公司私有模块就不大行了，所有人都能下载，也就意味着代码被泄漏了。

为了让我们可以在公司内部安装和使用私有模块, 我们需要一个 npm 私有仓库(npm private repository)来集中存放公司的私有模块, 要使用这些私有模块只需要添加依赖安装即可。

但是 npm 私有仓库是收费的，而自己搭建 npm 私有仓库也是需要一定成本的。

所以最好的方案自然是采用 npm 安装 git 仓库的方式了。当然这个方案是有弊端的, 但这并不妨碍它做为我们初期的一个免费快速解决方案, 后期是可以慢慢过渡升级到使用自己搭建的 npm 私有仓库。

公有包发布并使用

若代码为公共模块，允许发布到公共的npm仓库。

  1. 在npm官网上新建账号，并验证邮箱。

  2. 先新建一个vue项目

    vue create userful-component

  3. 在新建项目中加入公共的组件模块

    加入LayoutHeader组件代码,并新建一个index.js用来export组件

    import LayoutHeader from './LayoutHeader'
export {
  LayoutHeader
}

  4. 在package.json中将private设置为false。若没有文件，则npm init初始化一个文件。

    "private": false,
"module": "index.js",

    部分module使用main替代，推荐使用名称module

  5. 账号相关命令操作

    • 执行命令行npm whoami，查看是否登陆npm。若出现用户，则登陆成功。
    • 否则执行npm login进行登录
    • 执行npm logout进行退出

    注：

    npm adduser 和 npm login 是 npm 命令行工具中的两个命令，用于创建和登录 npm 账户。

    npm adduser 是一个过时的命令，它在 npm v5.0 及以前的版本中可以使用。它用于创建 npm 账户，并将账户信息存储在本地的 .npmrc 文件中，该文件在window系统上一般放在C:\Users\UserName目录下

    npm login 是一个替代命令，它在 npm v5.0 及以后的版本中可以使用。它用于创建 npm 账户和登录 npm 账户。它通过询问用户名、密码和邮箱地址来创建新账户，并在登录过程中验证用户名和密码。账户信息存储在本地如上。

    因此，如果您使用的是较新版本的 npm，建议使用 npm login 命令。

  6. 发布模块

    npm publish

    常见易错点：

    易错一:

    使用了淘宝镜像，切换一下即可

    npm config set registry http://registry.npmjs.org/

    可以通过 npm config get registry 命令来获取当前npm的镜像源地址

    易错二:

    包名重复，在package.json中换一个name

  7. 发布成功后就可以在npm官网找到你的项目了。

  8. 使用，可在需要的使用组件的项目的package.json文件中执行

    yarn install 组件库包名 或 npm i 组件库包名

  9. 再在需要使用组件的地方进行引入组件即可

    import { LayoutHeader } from 'userful-component'

  10. 更新包

    项目每次发布都需要更新版本号，否则也会报错。

    npm包修改后，手动把package.json里的version版本号修改了，或者使用以下命令自动更新版本号，再执行npm publish。

    命令：

    • 升级补丁版本号(修改bug)：npm version patch // 1.0.x

    • 升级次版本号(新增功能)：npm version minor // 1.x.0

    • 升级主版本号(较大改版)：npm version major // x.0.0

    然后在使用的项目中，重新安装包即可更新到最新版本。

  11. 下架公有包

    有两种方式可以下架已发布的npm 包

    1. npm unpublish userful-component@1.0.0或者npm unpublish --force userful-component

    2. 点击npm包 --> settings ,底部会出现删除包选项

    以上2种方式都可删除已发布的npm包。

到这里公有包从创建到发布，再从下载到使用已经介绍完毕。那么私有包该如何处理呢？我们可以继续阅读，了解git仓库代码该如何以npm方式下载使用。

npm安装git仓库协议

看下 npm 对于安装 git 仓库的命令：

npm install <git remote url>

实际上就是直接 install 一个 URL 而已。

更具体的语法如下：

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

protocol 支持 git, git+ssh, git+http, git+https, git+file

直接写 #branch 表示需要安装的分支号。

所以在开发过程中我们可以这么写包：

npm i git+https地址#master

或者使用打的 tag

npm i git+https地址#1.0.0

或者使用部分或完整的commit id

部分commit id
npm i git+https地址#d45b4e44

完整的commit id
npm i git+https地址#d45b4e44a01d22a6254156add498df46529d8234

由于新版的 npm install 在安装时会使用 package-lock.json, 同一分支不会从 github 上拉取最新的，需要手动将仓库再安装一下，即npm i 仓库名，所以安装时尽量以最新 tag 为标签进行安装，这样确保代码是最新的。

也可以在package.json中来使用 dependencies

  "dependencies": {
    "componentName": "git+https地址#tag"
  }

私有仓库在下载时，会出现弹框提示输入用户名和密码。

也可以如下，将用户名和密码填写在协议地址上。

  "dependencies": {
    "componentName": "git+https://username:password@https路径#tag"
  }

不推荐这种

  1. 不利于账户密码管理。比如提供该账户密码成员已离职。
  2. 容易增加代码泄露风险。该下载地址只要泄露，任何人均可下载。
  3. 无法进行权限控制。该私有库本身即为代码仓库，大多数人只需要下载权限即可，不需要代码编辑操作权限，否则恶意提交错误代码，所有其他共用这块代码的项目立马会出错，造成严重的线上事件。

创建及使用 npm 私有包

建立远程仓库，将仓库clone到本地，添加项目资源，并在package.json中将private设置为true

  1. 确保项目运行无误后，将项目push到git库上。

  2. 在需要的使用组件的项目的package.json文件中的dependencies中添加组件库名和git代码地址

    "dependencies": {
  "componentName": "git+https地址#tag"
}

  3. 执行依赖拉取，即可在node_modules中找到你的组件库

    yarn install componentName 或 npm i componentName

  4. 再在需要使用组件的地方进行引入组件即可

    import { LayoutHeader } from 'componentName'

    以上进行到这一步，私人仓库已较为完善可用。但还有一个问题没有解决。那就是没有体现出团队仓库的概念。因为一个稍大的公司组织，会有各个不同的团队，然后不同的团队所需要的公共业务代码也不尽相同。如果在相同的git仓库上，发布各个不同团队的私有仓库代码，则显得混乱不堪。所以还需要有个group的概念。

创建及使用 group npm 私有包

下面以一个实例来说明如何在 Gitee 中新建一个 npm 私有模块, 假设我们要新建的私有模块名为: userful-component

  1. 在 Gitee 上新建一个 git project, 名字为: userful-component。

    对于公共模块, 最好是放在同一个 group 下, 例如放在 companyfe 这个 group 下. 那么以后所有公共模块的 git 地址就可以统一为: https://gitee.com/{group}/{project}.git。

  2. 将项目 clone 下来 。git clone http://gitee.com/companyfe/userful-component.git

  3. 添加 package.json 配置, 注意限定 @scope

    npm init --scope=companyfe

    package.json中"name"的值需要添加scope前缀，如：

    "name": "@companyfe/userful-component"

  4. 然后提交 push 上去。到这里私有模块就已经发布好了, 如果有项目要使用, 就配置下项目的 dependencies 即可。

  5. 添加私有模块的依赖

    在项目的 package.json 中添加依赖, 例如: 依赖 @companyfe/userful-component 这个私有模块。

    "@companyfe/userful-component": "git+http://gitee.com/companyfe/userful-component.git"

  6. 安装私有模块

    跟安装开源的模块一样, 使用 npm install @companyfe/userful-component 安装依赖即可. 私有模块会安装在 @scope 的子文件夹中, 例如: node_modules/@companyfe/userful-component。

  7. 使用私有模块

    跟使用开源的模块一样, 我们只要写对应的包名即可. 私有模块的包名只是带有 @scope 而已.

    import { LayoutHeader } from 'userful-component'

  8. 更新私有模块

    如果私有模块的版本更新了, 由于 npm+git 方案的弊端, 我们使用 npm install 是无法更新私有模块的, 只能通过 npm update 或进一步的 npm install @companyfe/userful-component 这样的方式来重新安装一次私有模块, 才能获取到最新版本的私有模块.

注意: package.json的规范

  • name 必须限定 @scope

    @scope 一般为 Gitee group 的名字, 例如 @companyfe, 那么 name 为: @companyfe/userful-component

  • private 设置为 true

    防止你一不小心将私有模块 publish 上去就麻烦了

私有仓账密存放位置

当进行私有库的下载时，会让你输入账号密码，如下弹框

当填写完账号密码后，仓库代码顺利下载，后续操作则无需再次输入，那么这个账号密码存放在电脑哪里呢？

在windows系统，可以如下路径看到。

进入控制面板=>点击用户账号=>点击凭据管理器(页面右半部分)=>点击管理Windows凭据。可在右半部分内容，普通凭据中看到之前输入的git账号密码。

我们可以删除该记录，验证git 私有库账号密码的校验流程。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/455185.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SQL Server基础 第七章 连接查询（内连接、表别名、左外连接、右外连接）

SQL Server基础 第七章 连接查询（内连接、表别名、左外连接、右外连接）

前言 连接查询是关系数据库中最主要的查询&#xff0c;主要包括内连接、外连接和交叉连接等。通过连接运算符可以实现多个表查询。前面章节的查询均是基于单表进行&#xff0c;但有时需要获取的信息存储于多张表中&#xff0c;此时就必须使用本章所介绍的多表连接查询技术来获取…
阅读更多...
关于debug一晚上的一些思考，做开发到底要养成什么习惯？

关于debug一晚上的一些思考，做开发到底要养成什么习惯？

总结&#xff1a;日志一定要写&#xff0c;日志一定要写&#xff0c;日志一定要写&#xff01; 今天晚上是我学开发过程中很不一样的一晚&#xff0c;今晚学到了很多。 虽然我也只是一个开发的初学小白&#xff0c;今天的debug分享是我的一个小方法和一个小记录&#xff0c;如…
阅读更多...
第四章——数学知识2

第四章——数学知识2

欧拉函数 欧拉函数表示的是1-n中与n互质数的个数。 如1-6中&#xff1a;1&#xff0c;5都和6互质&#xff0c;因此互质数为2 欧拉函数分解质因数后表示为&#xff1a; 互质数个数可表示为 int main() {int n;cin >> n;while(n--){int a;cin >> a;//分解质因数int r…
阅读更多...
TypeScript自学笔记

TypeScript自学笔记

目录 1.什么是Ts? 1.1 设计公司&#xff1a;微软 1.2 TS概述 1.3 TS是静态类型 JS是动态类型 1.4 TS是强类型语言 JS是弱类型语言 2.TypeScript编译器 2.1 安装 2.2 TS自动编译和编译选项设置 3.TS的数据类型 3.1 基础数据类型number、string、boolean 3.2 Arrays&a…
阅读更多...
大数据架构（二）大数据发展史

大数据架构（二）大数据发展史

1.传统数仓发展史 传统数据仓库的发展史这里不展开架构细讲&#xff0c;只需快速过一遍即可。了解这个历史发展过程即可。 1.1 传统数仓历史 1.1.1 5个时代 传统数仓发展史可以称为5个时代的经典论证战。按照两位数据仓库大师 Ralph kilmball、Bill Innmon 在数据仓库建设理念上…
阅读更多...
吃透Redis面试八股文

吃透Redis面试八股文

Redis连环40问&#xff0c;绝对够全&#xff01; Redis是什么&#xff1f; Redis&#xff08;Remote Dictionary Server&#xff09;是一个使用 C 语言编写的&#xff0c;高性能非关系型的键值对数据库。与传统数据库不同的是&#xff0c;Redis 的数据是存在内存中的&#xf…
阅读更多...
Python Review 01

Python Review 01

1、Anaconda Installation 使用Anaconda Navigator进行python环境管理&#xff0c;使用conda进行依赖管理。 2、Use of Jupyter 将代码写入一个个cell&#xff0c;代码文件由一个个cell组成&#xff0c;书写代码时就像一行一行在写笔记&#xff0c;这就是notebook的代码编辑环…
阅读更多...
无宿主机权限情况下，获取pod的日志文件

无宿主机权限情况下，获取pod的日志文件

如果没有宿主机权限，是无法访问宿主机及里边的文件的，但是如果想获取某些文件，如日志等如何操作呢？ 整体思路：通过抓包工具，抓取websocket的的信息，然后把信息处理拼接后导出即可。 1、启动抓包工具 我这里使用的是charles抓包工具 2、打开对应pod的命令行窗口 3、抓…
阅读更多...
基于灰度图像和小波图的双模态卷积神经网络在心血管疾病分类中的应用

基于灰度图像和小波图的双模态卷积神经网络在心血管疾病分类中的应用

目录 一、研究对象和ECG记录预处理 二、机器学习和LSTM 三、将一维ECG记录转换为二维图像 四、双模态CNN模型 五、性能评估 参考文献 一、研究对象和ECG记录预处理 本研究采用Chapman大学和Shaoxing人民医院&#xff08;浙江大学医学院绍兴医院&#xff09;收集的12导联…
阅读更多...
领导力专题︱如何培养与提升领导力

领导力专题︱如何培养与提升领导力

本文内容结构 一、领导力的核心技能 1、完美领导者&#xff1f; 2、认识你的组织需要什么 3、不同层面领导力共有的特征和技能 4、你的个人行为准则 5、领导风格 6、创造个人影响力 7、完善自己的领导网络 二、领导力与领导者 1、领导力与组织环境 2、领导者还是管理…
阅读更多...
2023/4/23总结

2023/4/23总结

项目&#xff1a; 做出了个人信息界面&#xff0c;通过点击头像的方式&#xff1a; 然后就是点击头像可以选择文件&#xff08;后面考虑是存储该文件到自己的文件夹还是只是加载该文件比较好&#xff09;只是能选择文件&#xff0c;写了指定文件后缀名的代码但是好像没什么用…
阅读更多...
如何将Edge插件迁移至Google?

如何将Edge插件迁移至Google?

问题描述&#xff1a; 因为无法访问谷歌&#xff0c;无法从谷歌插件市场下载插件 第一步&#xff1a;在电脑上找到插件地址 高亮部分&#xff1a;自己电脑上的用户名【不同用户可能会有所不同】 C:\Users\star-dream\AppData\Local\Microsoft\Edge\User Data\Default\Extensi…
阅读更多...
rust的现状和未来发展

rust的现状和未来发展

rust现状: Stack Overflow 的开发者调研显示只有 7% 的开发者在使用 Rust&#xff0c;对比 JavaScript、Python 等语言&#xff0c;使用 Rust 的开发者占比并不高&#xff1b;但从 2016 年开始&#xff0c;Rust 每年都是开发者最爱的编程语言。 根据 JetBrains 2021 年的调研报…
阅读更多...
SSH远程访问及控制

SSH远程访问及控制

文章目录 1.SSH远程管理1.1 SSH的概述1.2 OpenSSH服务器1.3 sshd_ config常用选项设置1.4 SSH端口、配置文件 2.配置OpenSSH服务端2.1 更改端口号2.2 用户登录控制 3.登录验证方式3.1 密码验证3.2 密钥对验证3.3 配置密钥对验证 5.TCP Wrappers访问控制5.1 TCPWrappers机制的基…
阅读更多...
第37讲：Python if-elif-else流程控制语句核心概念以及案例演示

第37讲：Python if-elif-else流程控制语句核心概念以及案例演示

文章目录 1.流程控制的概念2.Python中代码块的相关注意事项3.if流程控制语句的语法格式4.if流程控制的简单使用4.1.单分支的if流程控制语句4.2.加else语句的if流程控制4.3.多分支的if流程控制4.4.多分支if代码优化 5.对象的布尔值6.if-else条件表达式6.1.if-else条件表达式语法…
阅读更多...
String的那些事儿

String的那些事儿

String作为我们最常用的Java类之一&#xff0c;在日常开发过程中充当着重要角色&#xff1f;那么大家真的了解String吗&#xff1f;让我们一起看看下面的问题&#xff1a; String内存结构&#xff1f;对象存储在堆上还是栈上&#xff1f;一个String有多长&#xff1f;占内存多…
阅读更多...
享元设计模式解读

享元设计模式解读

目录 问题引进 展示网站项目需求 传统方案解决网站展现项目 传统方案解决网站展现项目-问题分析 享元模式基本介绍 基本介绍 享元模式的原理类图 对类图的说明 内部状态和外部状态 享元模式解决网站展现项目 应用实例要求 思路分析和图解(类图) 代码实现 享元模式…
阅读更多...
创建一个 vue 3 项目

创建一个 vue 3 项目

vue create projectNameVue CLI v5.0.8 ? Please pick a preset: ❯ Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)Manually select featuresbabel : ES2015 and beyond。Babel 默认使用一组 ES2015 语法转换器&#xff0c;允许你使用新的语法&#xff0c…
阅读更多...
vue2数据响应式原理(6) 处理数组特殊遍历

vue2数据响应式原理(6) 处理数组特殊遍历

打开一直在写的案例 然后 找到src下的 dataResp.js 这里 我们Observer中 数数组和对象还是要分开处理 因为他们还是有所不同 我们修改 Observer 类代码如下 class Observer{constructor(value) {//相当于 给拿到的对象 其中的__ob__绑定 值为thsi,在类中用this 表示取实例本…
阅读更多...
数据结构入门（C语言版）一篇文章教会你手撕八大排序

数据结构入门（C语言版）一篇文章教会你手撕八大排序

八大排序 排序的概念常见的排序算法排序算法的实现一、直接插入排序二、希尔排序三、选择排序四、堆排序五、冒泡排序六、快速排序1.递归写法①三位取中函数②hoare版本③挖坑法④前后指针版本⑥快排主函数 2.非递归写法 七、归并排序1.递归写法2.非递归写法 八、非比较排序1.基…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023