使用 AWS CodeArtifact 在多个 Vue 项目中共享代码

1. 简介

在开发多个项目时，我们常常会遇到相似的业务逻辑。例如，在 Project A 和 Project B 中可能都需要对某个字符串进行相同的处理。

如何管理这些重复的代码呢？一种方法是分别在 Project A 和 Project B 中编写相同的逻辑，但这样会导致代码冗余，维护成本随着项目的增长而增加。

更好的解决方案是将这些通用代码打包成一个独立的 npm 包，并在 Project A 和 Project B 中通过 npm install 进行安装，如此一来，我们可以更加方便地管理和更新通用代码。

然而，在 AWS 环境中，为了保证代码的安全性，我们通常不会直接使用 npm 的公共仓库，即便它支持私有仓库功能。AWS 提供了 CodeArtifact 作为私有的 npm 仓库，既能在多个项目间共享代码，又能确保代码安全。

本文将介绍如何使用 AWS CodeArtifact 在多个 Vue 项目中共享代码。

---

2. 创建 AWS CodeArtifact

2.1 创建 Domain

首先，我们需要在 AWS 控制台 中创建一个 CodeArtifact 的 Domain（域）。这里我们将其命名为 hushukang-repo。

⚠️ 注意：在同一个 AWS 区域（Region）内只能创建一个 CodeArtifact Domain。

2.2 创建 Repository

接下来，我们需要在 Domain 内创建一个 Repository（仓库），这里我们将其命名为 common-ui。

在创建 Repository 时，有一个 Public upstream repositories 选项。如果不配置这个选项，那么在前端项目中，npm 依赖将分别从 npm 公共仓库 和 CodeArtifact 下载，如下所示：

但如果我们将 Public upstream repositories 设为 npm-store，CodeArtifact 会自动创建一个名为 npm-store 的代理仓库，它可以直接访问 npm 公共仓库。这样，我们就可以直接通过 CodeArtifact 安装所有依赖，而无需分别访问 npm 和 CodeArtifact，如下所示：

2.3 连接 Repository

要在本地开发环境连接到 CodeArtifact Repository，可以使用以下命令：

在 Step 3 中，我们可以看到 AWS 提供的 aws codeartifact login 命令：

aws codeartifact login --tool npm --repository <repository_name> --domain <domain_name> --domain-owner <aws_account> --region <aws_region>

执行该命令后，如果返回以下信息，则表示连接成功：

Successfully configured npm to use AWS CodeArtifact repository https://-.d.codeartifact..amazonaws.com/npm//
Login expires in 12 hours at 2025-02-10 05:01:57+09:00

---

3. 创建公共组件项目

3.1 初始化 Vue 项目

首先，使用 Vite 创建一个 Vue 组件库项目：

# npm 7+, extra double-dash is needed:
npm create vite@latest common-ui -- --template vue-ts

然后，将 package.json 中的 dependencies 修改为 peerDependencies，以避免 Vue 版本冲突：

"peerDependencies": { // <- dependencies
  "vue": "^3.5.13"
}

为什么使用 peerDependencies？ 当我们开发插件时，如果需要依赖宿主环境的某些库，应该使用 peerDependencies，这样可以确保插件不会安装重复的依赖。

同时，在 package.json 中添加如下字段：

{
  "name": "@hushukang/common-ui", // 这个名字就是发布后的插件的名字，我们将使用 npm install @hushukang/common-ui 来下载发布后的插件
  "version": "0.0.0",
  "main": "dist/common-ui.umd.js",
  "module": "dist/common-ui.es.js",
  "types": "dist/index.d.ts",
  "type": "module",
  "files": ["dist"]
  // other config
  // ...
}

---

3.2 配置 TypeScript

创建完项目之后，在根目录中添加tsconfig.build.json文件，并且添加如下内容。这个tsconfig用来生成发布到 CodeArtiract 用的代码：

{
  "extends": "./tsconfig.app.json",
  "compilerOptions": {
    "declaration": true, // 启用生成声明文件
    "declarationMap": true, // 为声明文件生成 Source Map
    "emitDeclarationOnly": true, // 仅生成声明文件，不生成 JS 文件
    "outDir": "./dist", // 输出目录
    "module": "ESNext", // 模块类型与 Vite 一致
    "target": "ES2022", // 目标 ECMAScript 版本
    "strict": true, // 启用严格模式
    "skipLibCheck": true // 跳过库检查以提升速度
  },
  "include": ["src/**/*.ts", "src/**/*.vue"], // 包括 TS 和 Vue 文件
  "exclude": ["node_modules", "dist"] // 排除不需要的内容
}

---

3.3 配置 Vite

安装 vite-plugin-dts 以生成 .d.ts 声明文件：

npm i -D vite-plugin-dts

在 vite.config.ts 中添加以下内容：

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    dts({
      outDir: 'dist', // 生成的文件目录
      insertTypesEntry: true, // 生成入口类型声明文件 index.d.ts
      tsconfigPath: 'tsconfig.build.json', // tsconfig 路径
    }),
  ],
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'CommonUI',
      fileName: (format) => `common-ui.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

3.4 创建一个UI组件

在 src/components 文件夹下创建一个 HelloWorld.vue 的组件，添加如下内容：

<script setup lang="ts">
  defineProps({
    msg: String,
  });
</script>

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

然后再在 src/components 文件夹下添加一个 index.ts 文件，添加如下内容：

export { default as HelloWorld } from './HelloWorld.vue';

然后再 src 文件夹下添加一个 index.ts 文件。添加如下内容：

export * from './components';

此时，我们的文件夹结构是这样的：

|-- src
|   |-- components
|   |   |-- HelloWorld.vue
|   |   |-- index.ts
|   |-- index.ts
|-- package.json
|-- tsconfig.app.json
|-- tsconfig.build.json
|-- tsconfig.json
|-- tsconfig.node.json
|-- vite.config.ts

---

4. 构建并发布组件库

执行 npm run build，生成 dist 目录后，使用以下命令发布到 AWS CodeArtifact：

# 登录到AWS CodeArtifact
aws codeartifact login --tool npm --repository <repository_name> --domain <domain_name> --domain-owner <aws_account> --region <aws_region>

# 发布代码
npm publish

---

5. 在项目中使用组件库

在 Project A 或 Project B 中，执行以下命令安装组件库：

# 登录到AWS CodeArtifact
aws codeartifact login --tool npm --repository <repository_name> --domain <domain_name> --domain-owner <aws_account> --region <aws_region>

# 安装组件库
npm install @hushukang/common-ui

然后在 Vue 组件中使用：

<script setup lang="ts">
  import { HelloWorld } from '@hushukang/common-ui';
</script>

<template>
  <HelloWorld msg="Hello World" />
</template>

---

6. 总结

通过 AWS CodeArtifact，我们可以安全、高效地在多个 Vue 项目中共享组件库，并且避免了代码重复，提高了可维护性。