首页教程软件教程正文

从Monorepo到CI/CD自动化部署全流程实现前端工程化

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 309 浏览 4344 个字

摘要 :

文章目录一、搭建Monorepo项目（一）初始化项目（二）配置Yarn Workspaces （三）创建子项目（四）安装依赖二、项目开发与构建（一）开发前端项目（二）构建……

文
章
目
录

一、搭建Monorepo项目

（一）初始化项目
（二）配置Yarn Workspaces
（三）创建子项目
（四）安装依赖

二、项目开发与构建

（一）开发前端项目
（二）构建工具配置

三、代码检查与测试

（一）代码检查
（二）单元测试

四、CI/CD自动化部署

（一）选择CI/CD平台
（二）创建工作流文件
（三）配置服务器部署

前端工程化涵盖了项目从启动到上线的一系列环节，包括项目组织、开发、构建、测试以及部署等。其中，从Monorepo到CI/CD自动化部署的实现，是优化开发流程、提升项目质量与效率的关键。接下来，咱们就深入探讨这一系统流程。

一、搭建Monorepo项目

Monorepo是一种将多个项目集中放在同一个代码仓库进行管理的方式，就像是把多个不同功能的“小房子”建在了同一个“大院”里。这种管理方式能方便地实现代码复用，统一管理项目依赖和版本等。下面以使用Yarn Workspaces为例，一步步搭建Monorepo项目。

（一）初始化项目

首先，创建一个新的目录作为项目的根目录，然后在这个目录下初始化package.json文件，这一步就像是为项目打造一个“基础框架”。在命令行中执行以下操作：

mkdir my-monorepo
cd my-monorepo
yarn init -y

上述命令依次完成了创建项目根目录my-monorepo、进入该目录以及使用yarn init -y快速初始化package.json的操作。

（二）配置Yarn Workspaces

在项目根目录的package.json中添加workspaces字段，这一步就好比给“大院”里的“小房子”规划好位置。配置内容如下：

{
  \"name\": \"my-monorepo\",
  \"version\": \"1.0.0\",
  \"private\": true,
  \"workspaces\": [
    \"packages/*\"
  ]
}

这里的配置表示packages目录下的所有子目录都将作为项目的工作区，每个工作区都可以看作是一个独立的“小项目”。

（三）创建子项目

在packages目录下创建具体的子项目。比如，创建一个名为web-app的前端项目和一个名为utils的工具库项目，它们就像是“大院”里不同功能的“小房子”。在命令行中执行：

mkdir packages/web-app packages/utils
cd packages/web-app
yarn init -y
cd ../utils
yarn init -y

这些命令分别完成了创建web-app和utils子项目目录，并在各自目录下初始化package.json的操作。

（四）安装依赖

在项目根目录安装依赖时，Yarn会自动处理各个工作区之间的依赖关系，这就像有一个“管家”自动安排好各个“小房子”所需的物资。执行以下命令安装依赖：

cd ../../
yarn add react react-dom --install-strategy=linked -W

其中，-W参数表示在根工作区安装依赖，这样安装的依赖可以被各个子项目共享。

二、项目开发与构建

（一）开发前端项目

在packages/web-app目录中，我们使用React进行前端开发，并选择Vite作为构建工具，Vite就像是一个高效的“建筑工人”，能快速搭建起项目的“框架”。首先安装相关依赖：

cd packages/web-app
yarn add vite @vitejs/plugin-react -D

安装完成后，在web-app项目的package.json中添加构建脚本，这些脚本就像是给“建筑工人”的工作指令：

{
  \"name\": \"web-app\",
  \"version\": \"1.0.0\",
  \"scripts\": {
    \"dev\": \"vite\",
    \"build\": \"vite build\"
  },
  \"dependencies\": {
    \"react\": \"^18.2.0\",
    \"react-dom\": \"^18.2.0\"
  },
  \"devDependencies\": {
    \"@vitejs/plugin-react\": \"^4.0.0\",
    \"vite\": \"^4.4.9\"
  }
}

dev脚本用于启动开发服务器，方便实时预览项目效果；build脚本则用于构建生产版本的代码。

（二）构建工具配置

在web-app项目根目录创建vite.config.js文件，对Vite进行配置，这一步就像是给“建筑工人”详细的施工图纸。配置内容如下：

import { defineConfig } from \'vite\';
import react from \'@vitejs/plugin-react\';

export default defineConfig({
  plugins: [react()],
});

这段配置代码引入了React插件，让Vite能够正确处理React项目的构建工作。

三、代码检查与测试

（一）代码检查

为了保证代码质量，我们使用ESLint和Prettier进行代码检查和格式化，它们就像是项目的“质检员”和“排版师”。在根目录安装相关依赖：

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier -D -W

安装完成后，在根目录创建.eslintrc.js和.prettierrc.js文件进行配置：

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    \'eslint:recommended\',
    \'plugin:react/recommended\',
    \'prettier\',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: \'latest\',
    sourceType: \'module\',
  },
  plugins: [\'react\', \'prettier\'],
  rules: {
    \'prettier/prettier\': \'error\',
  },
};

// .prettierrc.js
module.exports = {
  singleQuote: true,
  semi: false,
  trailingComma: \'es5\',
};

.eslintrc.js文件配置了ESLint的检查规则，包括启用哪些插件、遵循哪些规范等；.prettierrc.js文件则定义了代码格式化的规则。

之后，在根目录的package.json中添加检查脚本，方便执行代码检查和格式化操作：

{
  \"scripts\": {
    \"lint\": \"eslint packages --ext .js,.jsx,.ts,.tsx\",
    \"format\": \"prettier --write packages\"
  }
}

lint脚本用于检查packages目录下指定类型的文件是否符合代码规范；format脚本则用于对这些文件进行格式化。

（二）单元测试

使用Jest进行单元测试，Jest就像是一个“小测试员”，负责检查项目中各个“小零件”（函数、组件等）是否正常工作。在根目录安装Jest和相关依赖：

yarn add jest @testing-library/react @testing-library/jest-dom -D -W

安装完成后，在根目录的package.json中添加测试脚本：

{
  \"scripts\": {
    \"test\": \"jest\"
  }
}

执行yarn test命令，Jest就会自动运行项目中的单元测试用例，检查代码的正确性。

四、CI/CD自动化部署

（一）选择CI/CD平台

这里我们以GitHub Actions为例，它与GitHub集成得非常好，就像是GitHub自带的一个“自动化助手”，能帮助我们自动完成一系列部署任务。

（二）创建工作流文件

在项目根目录创建.github/workflows目录，并在其中创建一个deploy.yml文件，这个文件就像是“自动化助手”的工作指南。内容如下：

name: CI/CD Deployment

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: yarn install

      - name: Lint code
        run: yarn lint

      - name: Run tests
        run: yarn test

      - name: Build project
        run: yarn workspace web-app build

      - name: Deploy to server
        # 这里可以根据实际情况使用 SSH 或其他方式将构建产物部署到服务器
        run: |
          echo \"Deploying to server...\"

这个工作流文件定义了在main分支有代码推送时，自动执行的一系列操作，包括拉取代码、安装依赖、检查代码、运行测试、构建项目以及部署到服务器（当前只是示例，实际部署部分需要根据具体情况完善）。

（三）配置服务器部署

如果采用SSH方式进行部署，可以在GitHub仓库的Secrets中配置服务器的SSH密钥，然后在deploy.yml中使用appleboy/ssh-action进行部署，这就像是给“自动化助手”一把服务器的“钥匙”，让它能把构建好的项目送到服务器上。配置如下：

- name: Deploy to server
  uses: appleboy/ssh-action@v0.1.8
  with:
    host: ${{ secrets.SERVER_HOST }}
    username: ${{ secrets.SERVER_USERNAME }}
    key: ${{ secrets.SERVER_SSH_KEY }}
    script: |
      cd /path/to/deployment/directory
      rm -rf *
      scp -r /path/to/local/build .

上述配置中，通过secrets获取服务器的相关信息，然后执行一系列命令，将本地构建产物部署到服务器指定目录。

通过以上完整的步骤，我们就实现了从Monorepo项目搭建到CI/CD自动化部署的前端工程化流程。这个流程能有效提升开发效率、保障代码质量，还能实现项目的自动化部署，还是挺不错的，大家感兴趣可要试试。

赏

微信扫一扫

支付宝扫一扫

版权：转载请注明出处：https://www.zuozi.net/6990.html