搭建私有仓库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 points
      entry: 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/

多入口配置

很多时候，我们的 npm 包可能包含多种类型的模块，比如组件和工具这两种，当然我们都在一个入口里面暴露所有内容也是没问题的，但是如果我们的内容特别多，最好还是模块化管理。因此就需要我们去配置多个入口：

{
  ..............
  lib: {
        formats:['es'],
        // Could also be a dictionary or array of multiple entry points
        entry: {main: resolve(__dirname, "lib/main.ts"), tools: resolve(__dirname, "lib/tools/index.ts")},
        name: "MyLib",
        // the proper extensions will be added
        fileName(format, entryName) {
          return `${entryName}.${format}.js`;
        },
    }
    ..............
}

这里面就把 main 和 tools 分为了两个入口。然后配置package.json:

{
  ..............
  "exports": {
    ".": {
      "import": "./dist/main.es",
      "types": "./dist/lib/main.d.ts"
    },
    "./tools": {
      "import": "./dist/tools.es",
      "types": "./dist/lib/tools/index.d.ts"
    },
    "./style.css": {
      "import" :"./dist/style.css"
    }
  },
  ..............
}

注意：这里需要配置样式文件，否则无法引入我们的样式
这样子，我们在使用包的时候就可以实现我们想要的导入方式：

// 配置后这里的目录层级直接指向package.json中配置的exports字段里面的层级
import "@gl/main/style.css";
import { BaseDrawer } from "@gl/main";
import { deepCopy, getToken, isGLCompany } from "@gl/main/tools";
//..........................

当然，我们如果想要将组件也单独管理也是没问题的，做对应的配置，也可以用以下方式引入组件：

import { BaseDrawer } from "@gl/main/components";

问题记录

组件国际化

我们的项目是需要国际化双语支持的，假如我们封装的组件有内置的文字，那么也是需要国际化的，但是我们在项目中每个调用组件的地方都去设置国际化的配置显然不合理，因此借用 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.global
  const {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 文件即可。