章
目
录
前端工程化涵盖了项目从启动到上线的一系列环节，包括项目组织、开发、构建、测试以及部署等。其中，从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自动化部署的前端工程化流程。这个流程能有效提升开发效率、保障代码质量，还能实现项目的自动化部署，还是挺不错的，大家感兴趣可要试试。
