搭建私有仓库Nexus的流程以及npm包的开发和发布

搭建私有仓库 Nexus 的流程（Ubuntu）以及 npm 包的开发和发布

本文档是关于在 Ubuntu 上面搭建 Nexus，以及制作 npm 包并发布到 Nexus 的流程说明。

关于 Ubuntu

Ubuntu 是一个基于 Linux 的操作系统，通常会用在服务器或者嵌入式设备。当然也有桌面端版本（Ubuntu Desktop），带界面的，用于个人 PC 使用。如果你的电脑操作系统是 Ubuntu（或者其他 Linux 操作系统），你可以直接在电脑上进行该文档的流程。如果是 Windows 或者 Mac，建议使用虚拟机软件（VirtualBox， VM Ware等， 当然使用 Windows 操作系统部署 Nexus 也是可以的，但是一般人不会这样干，毕竟谁的服务器用 Windows）。

安装 Ubuntu 虚拟机

安装 Ubuntu 虚拟机的流程很简单，这里以 VirtualBox 为例，直接去官网下载安装包并安装，然后直接安装。然后再去Ubuntu官网下载 Ubuntu镜像，然后再 VirtualBox 里面建一个虚拟机实例，运行并安装系统即可。这里就不具体阐述步骤了。

关于 Nexus

因为我看公司运维给到我们的制品仓库使用的是 Nexus，因此我这边也是去大概了解了下。这是我查到的一些介绍：

这是由Sonatype公司开发的一款强大的仓库管理器，用于组织内部的依赖关系和工件（如Maven、npm、NuGet、Docker等）存储。
它简化了软件开发中的依赖管理，提供了组件的存储、版本控制、以及安全分发等功能，是持续集成和持续部署（CI/CD）流程中常用的工具。

Nexus 开源版具有以下优点：

  • 占用内存小（28 M 左右）
  • 具有基于 ExtJs 得操作界面，用户体验较好
  • 使用基于 Restlet 的完全 REST API
  • 支持代理仓库、宿主仓库和仓库组
  • 基于文件系统，不需要依赖数据库
  • 支持仓库管理
  • 支持构件搜索
  • 支持在界面上上传构件

下载安装包

直接去官网下载安装包，这里注意选择版本，因为我们使用 Ubuntu 安装，因此选择第三个。
在这里插入图片描述

安装 Java 运行环境

Nexus需要Java环境来运行，需要我们的系统中安装了 Java 运行环境 JDK，可以通过以下命令安装 OpenJDK：

sudo apt install openjdk-8-jdk-headless

按照提示安装完成后使用 version 命令验证安装是否成功

java -version

注意这里的命令是一个 - 而不是两个，安装成功的话会看到：

tribiani@tribiani-VirtualBox:/web$ java -version
openjdk version "1.8.0_402"
OpenJDK Runtime Environment (build 1.8.0_402-8u402-ga-2ubuntu1~20.04-b06)
OpenJDK 64-Bit Server VM (build 25.402-b06, mixed mode)
tribiani@tribiani-VirtualBox:/web$

安装 Nexus

解压安装包

将我们之前下载的 Nexus 安装包解压到我们希望的安装的目录，例如我安装在 /web/servers/

sudo tar -xvzf nexus-3.43.0-01-unix.tar.gz -C /web/servers/

设置 Nexus 用户和权限

sudo useradd -r -d /web/servers/nexus-3.43.0-01/ -s /bin/false nexus
sudo chown -R nexus:nexus /web/servers/nexus-3.43.0-1/

这里需要注意这里的路径是你自己自定义的安装路径。

配置 Nexus 服务

创建Systemd服务文件，方便管理 Nexus

sudo nano /etc/systemd/systemd/system/nexus.service

当然如果你习惯使用 vim 的话也可以使用 vim 来编辑。
注：这里可能会遇到没有权限创建文件或者编辑文件的问题，大家自行百度解决办法。实在不行先用 touch 命令创建这个文件，再使用 vim 命令编辑。

创建这个文件后写入以下配置：

[Unit]
Description=Nexus Repository Manager
After=network.target[Service]
User=nexus
Group=nexus
ExecStart=/web/servers/nexus-3.68.0-04/bin/nexus start
ExecStop=/web/servers/nexus-3.68.0-04/bin/nexus stop
Restart=always
RestartSec=10[Install]

注意：这里的路径是你自己自定义的安装路径。
编辑后保存并退出编辑，然后分别执行以下命令来配置和启动 Nexus：

sudo systemctl daemon-reload
sudo systemctl enable nexus
sudo systemctl start nexus

遇到的坑

上面操作完成后就可以访问 http://localhost:8081 来看一下是否启动完成了。 这里如果不出意外，Nexus 是无法正常启动的，实际上是报错了，但是 start 命令不会输出报错日志，这里我们就可以进入安装目录并使用 status 命令查看 Nexus的状态：

cd /web/servers/nexus-3.68.0-04/bin/
./nexus status

如果正常运行着会看到：

nexus is running

否则就代表没有启动成功，前面说了使用 start 命令没有日志输出，因此我们可以使用 run 命令来启动（run 命令只是在当前终端启动，终端关闭服务也会关闭）：
这里可能会输出日志告诉我们 java 在读取某些文件报没权限了，因此我们需要给这些文件配置访问权限，我的做法比较暴力，直接给出问题的根目录递归给到所有的权限：

sudo chmod -R 777 xxxxx

完成后再执行 run 命令，应该是可以正常启动了（测试用 run，真正运行用 start）。访问http://localhost:8081应该就可以看到对应的界面了。

登录以及配置权限

启动完成后就可以通过 web 界面访问，点击登录输入用户名和密码登录，Nexus 会默认创建用户名为 admin的用户，随便输入一个密码，界面会提示你默认的密码在哪里，然后按照提示在对应的文件里面去找到即可，建议登录后更改密码。

配置权限

admin用户是默认的超级管理员用户，我们可以在设置界面创建用户：
在这里插入图片描述

创建用户后可以给用户分配权限角色等。
踩坑记录：
本以为我创建了用户给了对应的角色和权限就可以发布包了，但是一直被一个报错困扰：
在这里插入图片描述

整了半天才知道需要配置这块儿（最开始问运维运维也没弄好，因此我才开始本地搭建 Nexus 的）：
在这里插入图片描述
弄好了后发包终于成功了。访问 web 界面也能正常看到该包了：

在这里插入图片描述

使用命令行登录也是正常的了：
在这里插入图片描述

注：这里可能会出现用户名和密码都正确但是登录还是失败的情况，使用以下命令

npm config ls

找到 User config from xxxxx/.npmrc 这个路径对应的文件，删除文件内容再登录即可（具体原因未知）。

创建 npm 仓库

Nexus默认没有创建 npm 仓库，因此我们第一步需要先创建 npm 仓库：
在这里插入图片描述

至此，Nexus 的安装就完成了。接下来介绍怎么封装自己的工具库或者组件库并且发布到npm仓库。

自己封装 vue3+ts 组件库并且发布到 NPM

创建项目

pnpm create vite

如果我们将文档和组件库放到一个项目中，我们还可以引入 vitepress:

pnpm add -D vitepress
pnpm vitepress init

按照提示完成即可。这里关于 vitepress 有关的就不多讲了。因为我们目前是有用它搭建的文档的，因此这里不需要（但是从技术的角度讲，这些都是可以整合到这一个项目的）。

配置 package.json

按照提示创建好项目，然后再 package.json 中进行如下配置：

{"name": "@gl/main","private": false,"version": "0.0.01","type": "module","repository": {},"types": "dist/lib/main.d.ts","module": "dist/main.es.js","files": ["dist"],"scripts": {"dev": "vite","build": "vue-tsc && vite build","pub": "vue-tsc && vite build && npm publish","preview": "vite preview","docs:dev": "vitepress dev docs","docs:build": "vitepress build docs","docs:preview": "vitepress preview docs"},"dependencies": {"ant-design-vue": "^4.2.1","vue": "^3.4.21"},"devDependencies": {"@types/node": "^20.12.10","@vitejs/plugin-vue": "^5.0.4","sass": "^1.77.1","typescript": "^5.2.2","vite": "^5.2.0","vite-plugin-dts": "^3.9.1","vitepress": "^1.1.4","vue-tsc": "^2.0.6"}
}

配置解读：

属性配置值
name包名称string
private是否私有boolean
types声明文件路径path
module模块path
files包含的文件路径dirs

如果我们是自己发布一些开源的包到开源的仓库，我们通常还会配置 author，keywords，homepage 等字段

配置 vite.config.ts

配置路径别名

为了方便开发的时候引入模块，优化开发体验，我们可以配置路径别名
// vite.config.ts

  resolve: {alias: {"@lib":resolve(__dirname, "./lib"),"@":resolve(__dirname, "./src"),"@libComponents":resolve(__dirname, "./lib/components"),"@components":resolve(__dirname, "./src/components"),}},

配置别名后 tsconfig.json 也需要做对应的配置：
// tsconfig.json

"compilerOptions": {................."paths": {"@lib/*": ["lib/*"],"@/*":["./src/*"],"@libComponents/*":["./lib/components/*"],"@components/*":["./src/components/*"]}},
配置库模式

这里需要配置库模式

 build: {lib: {// vite默认会打es和umd两种包，但是我们web开发只需要es模块的内容formats:['es'],// Could also be a dictionary or array of multiple entry pointsentry: resolve(__dirname, 'lib/main.ts'),name: 'MyLib',// the proper extensions will be added// fileName: 'my-lib',fileName(format, entryName) {return `${entryName}.${format}.js`},},rollupOptions: {// 确保外部化处理那些你不想打包进库的依赖external: ["vue", 'ant-design-vue'],output: {// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量globals: {vue: 'Vue',},},},

注：建议将 external 里面包含的依赖，在安装的时候就安装到 packages.json 里面的 peerDependencies。

使用 vite-plugin-dts 生成对应的声明文件
import dts from "vite-plugin-dts";
export default defineConfig({///plugins: [vue(), dts()],///
});
编写组件

我们简单的封装一个自己的组件和对应的一些方法，我的做法是直接在项目的根目录下面创建 lib 目录，然后创建以下文件和目录：

|-lib
|----components
|----|----HButton.vue
|----|----HClone.vue
|----|----index.ts
|----|----main.css
|----tools
|----|----deepClone.ts
|----|----index.ts
|----|----shallowClone.ts
|----main.ts

我们可以在 HButton 组件里面简单的写一下组件：

<script lang="ts" setup>import { CSSProperties, computed } from "vue";const props = defineProps<{ backgroundColor?: string; color?: string }>();const styleObj = computed<CSSProperties>(() => {return {backgroundColor: props.backgroundColor || "#3f51b5",color: props.color,};});
</script><template><button class="h-button" :style="styleObj"><slot>this is default button</slot></button>
</template><style lang="css" scoped></style>

以及编写 css 文件

.h-button {border-radius: 8px;border: 1px solid transparent;padding: 0.6em 1.2em;font-size: 1em;font-weight: 500;font-family: inherit;background-color: #1a1a1a;cursor: pointer;transition: border-color 0.25s;
}

然后在 index.ts 里面暴露出去

import "./main.css";
export { default as HButton } from "./HButton.vue";
export { default as HClone } from "./HCloneTest.vue";
打包和发布

使用命令直接打包，然后打包的文件会存放在 dist 目录，由于我们已经在 package.json 里面配置了 files 属性只想了 dist 目录，因此我么只需要使用 npm login 登陆到 npm 然后使用 npm publish 命令直接发布包到 npm 即可。
建议我们以这种 @gl/xxx 格式命名我们的仓库，方便后面如果我们有其他的 npm 包发布到仓库的话，我们在配置.npmrc不用重复配置：

@gl:registry=http://192.168.8.149:8081/repository/npm-release/

问题记录

组件国际化

我们的项目是需要国际化双语支持的，假如我们封装的组件有内置的文字，那么也是需要国际化的，但是我们在项目中每个调用组件的地方都去设置国际化的配置显然不合理，因此借用 ant-design-vue的设计，我们可以在我们的组件库暴露一个 ConfigProvider 组件，组件的内容如下：

<template><slot />
</template><script setup lang="ts">import { ConfigProviderProps, Languages } from "@lib/models";import { BASE_PROVIDER_INJECTION_KEY } from "@lib/models/constants";import { provide } from "vue";const props = withDefaults(defineProps<ConfigProviderProps>(), {locale: Languages.EN,});// export const BASE_PROVIDER_INJECTION_KEY = Symbol() as InjectionKey<ConfigProviderProps>;provide(BASE_PROVIDER_INJECTION_KEY, props);
</script><style lang="scss" scoped></style>

这是 ConfigProviderProps的定义：

export interface ConfigProviderProps {locale: Languages;
}

然后我们封装的组件就可以通过 inject 获取到对应的语言配置，这里我们还可以进一步封装 hook：

/
export const BASE_PROVIDER_INJECTION_KEY =Symbol() as InjectionKey<ConfigProviderProps>;/
import { BASE_PROVIDER_INJECTION_KEY } from "@lib/models/constants";
import { inject } from "vue";
import zh from "@lib/locale/zh";
import en from "@lib/locale/en";
import { ConfigProviderProps, Languages } from "@lib/models";const localeMap = new Map([[Languages.EN, en],[Languages.ZH, zh],
]);export default function useGlobalConfigInject() {const config = inject<ConfigProviderProps>(BASE_PROVIDER_INJECTION_KEY);const t = (key: keyof typeof zh) => {return localeMap.get(config.locale)[key];};return { config, t };
}

这个 hook 会帮我们返回所有的全局配置以及一个翻译函数 t，我们在封装组件的时候就可以使用这个 t 方法去做国际化：

<!--* @Description: 公共的抽屉组件* @Author: shufei.han* @LastEditors: shufei.han* @Date: 2024-04-11 09:38:44* @LastEditTime: 2024-05-11 10:08:52
-->
<template><Drawer> ................................... </Drawer>
</template><script setup lang="ts">import useGlobalConfigInject from '@lib/hooks/useGlobalConfig';// const { t } = i18n.globalconst {t} = useGlobalConfigInject()...................................// 底部按钮有关的配置const footerBtnConfig = computed(() => {return {ok: { show: props.showOkButton, text: props.okText || t('confirm') },cancel: { show: props.showCancelButton, text: props.cancelText || t('cancel') 		},}})...................................
</script>

ConfigProvider 组件作为我们组件库的根组件，使用我们组件库的时候，如果需要配置国际化就需要再根组件（App.vue）里面使用该组件（类似于 ant-design-vue）。传入 locale 这个属性即可：

<script setup lang="ts">import { RouterView } from "vue-router";import { Languages } from "@gl/main";import { ref } from "vue";const locale = ref(Languages.EN);const changeLocale = () => {if (locale.value === Languages.EN) {locale.value = Languages.ZH;return;}locale.value = Languages.EN;};
</script><template><ConfigProvider :locale="locale"><RouterView /></ConfigProvider>
</template>
怎么从一个 TS 文件到处其他的 TS 文件
export * from "./tools";
export * from "./components";
export * from "./deepClone";
export { default as shallowClone } from "./shallowClone";
怎么从一个 TS 文件导出多个 vue 组件
export { default as HButton } from "./HButton.vue";
export { default as HClone } from "./HCloneTest.vue";
将公共样式写在 vue 组件里面导致其他项目引入该组件的时候样式不生效

因为我们如果直接在 vue 组件的 style 标签里面写的样式，这些 css 代码是会被 vue 打包的，最终会变成类名假属性的选择器，因此不生效，解决方案就是用单独的 css 文件去写，然后其他项目在用的时候直接引入这个 css 文件即可。

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

串口属性中的BM延时计时器问题

串口属性中的BM延时计时器问题

如果使用程序修改则需要修改注册表对应位置如下 第一个示例&#xff08;217&#xff09; 第二个示例&#xff08;219&#xff09; 需要注意的事情是修改前必须点查看串口名称&#xff08;例如上图是com5&#xff09; 程序修改&#xff1a; 有没有办法以编程方式更改USB <…
阅读更多...
品鉴中的平衡之美：如何欣赏红酒的口感与风格和谐

品鉴中的平衡之美：如何欣赏红酒的口感与风格和谐

品鉴云仓酒庄雷盛红酒的过程&#xff0c;是对其口感与风格和谐的追求和欣赏。平衡是红酒品质的重要标志之一&#xff0c;它体现在红酒的色泽、香气、口感和余味等多个方面。通过欣赏红酒的平衡之美&#xff0c;我们可以更好地领略其精妙之处&#xff0c;感受其带来的美妙滋味。…
阅读更多...
计算机毕业设计 | springboot+vue小米商城 购物网站管理系统(源码+论文+讲解视频)

计算机毕业设计 | springboot+vue小米商城 购物网站管理系统(源码+论文+讲解视频)

1&#xff0c;项目背景 国家大力推进信息化建设的大背景下&#xff0c;城市网络基础设施和信息化应用水平得到了极大的提高和提高。特别是在经济发达的沿海地区&#xff0c;商业和服务业也比较发达&#xff0c;公众接受新事物的能力和消费水平也比较高。开展商贸流通产业的信息…
阅读更多...
【Linux】-网络请求和下载、端口[6]

【Linux】-网络请求和下载、端口[6]

目录 一、网络请求和下载 1、ping命令 2、wget命令 3、curl命令 二、端口 1、虚拟端口 2、查看端口占用 一、网络请求和下载 1、ping命令 可以通过ping命令&#xff0c;检查指定的网络服务器是否可联通状态 语法&#xff1a;ping [ -c num ] ip或主机名 选项&…
阅读更多...
【git】通过JetBrains IDE对git的操作

【git】通过JetBrains IDE对git的操作

应该适用于所有jetbrains产品。 一、拉取(pull)代码 上方工具栏-Git-克隆。然后填写git地址与本地存放地址。 二、搁置 修改代码后搁置代码（不提交，但是也不撤销已修改的代码，把它暂存起来）。 界面的左上角。1->2->3。完事就可以写换到其他分支肆意妄为^^。 三…
阅读更多...
LibreNMS简介

LibreNMS简介

目录 1 LibreNMS简单介绍1.1 LibreNMS介绍 2 安装2.1 Ubuntu安装1、安装依赖2、添加 librenms 用户3、下载 LibreNMS4、设置权限5、安装 PHP 依赖项6、设置时区7、配置 MariaDB8、配置 PHP-FPM9、配置 Web 服务器10、启用 lnms 命令11、配置 snmpd12、cron13、启用调度程序14、…
阅读更多...
【回溯算法】【Python实现】最大团问题

【回溯算法】【Python实现】最大团问题

文章目录 [toc]问题描述回溯算法Python实现时间复杂性 问题描述 给定无向图 G ( V , E ) G (V , E) G(V,E)&#xff0c;如果 U ⊆ V U \subseteq V U⊆V&#xff0c;且对任意 u u u&#xff0c; v ∈ U v \in U v∈U有 ( u , v ) ∈ E (u , v) \in E (u,v)∈E&#xff0c;则称…
阅读更多...
王麻子1651商标被王麻子跨类无效宣告！

王麻子1651商标被王麻子跨类无效宣告！

近日“王麻子1651”商标被王麻子跨类无效宣告&#xff0c;最后不予注册&#xff0c;普推知产老杨了解“王麻子”是我国著名的老字号&#xff0c;创始于1651年&#xff0c;以刀剪闻名于世&#xff0c;刀剪的商标分类主要是在8类手工器械&#xff0c;而被无效宣告的商标在16类办公…
阅读更多...
grid的常见使用场景

grid的常见使用场景

场景1&#xff1a;固定几列显示&#xff0c;显示不下会自动换行 <div id"container"><div class"item item-1">1</div><div class"item item-2">2</div><div class"item item-3">3</div>&l…
阅读更多...
libcity笔记：

libcity笔记：

1 __init__ 2 encode 得到的内容如下&#xff1a; data_feature的内容&#xff1a; 一共有多少个location1【包括pad的一个】最长的时间间隔&#xff08;秒&#xff09;最长的距离间隔&#xff08;千米&#xff09;多少个useer idpadding 的locationidpad_item的内容 location…
阅读更多...
截图文字怎么识别？这里有三种识别方法

截图文字怎么识别？这里有三种识别方法

截图文字怎么识别&#xff1f;在数字化时代&#xff0c;信息的快速处理和转换成为了提高工作效率的关键。截图文字识别技术&#xff0c;作为连接视觉信息与数字文本的桥梁&#xff0c;极大地便利了我们的工作和生活。它允许用户从图像中提取文字内容&#xff0c;进而编辑、搜索…
阅读更多...
中东电商Noon测评Hepsiburada贺百狮，Souq，Temu，Nice One，MEIG如何自己养号补单？

中东电商Noon测评Hepsiburada贺百狮，Souq，Temu，Nice One，MEIG如何自己养号补单？

养买家号进行中东跨境电商测评&#xff0c;是一个需要细心和技术的过程&#xff0c;特别是在不同的电商平台上Noon&#xff08;Namshi&#xff09;、Hepsiburada&#xff08;贺百狮&#xff09;、Souq&#xff08;亚马逊&#xff09;、Nice One、MEIG、Wadi、Temu。需要搭建完整…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023