最佳实践:基于vite3的monorepo前端工程搭建 | 京东云技术团队

京东云开发者
• 阅读 306

一、技术栈选择

1.代码库管理方式-Monorepo: 将多个项目存放在同一个代码库中

最佳实践:基于vite3的monorepo前端工程搭建 | 京东云技术团队

▪选择理由1:多个应用(可以按业务线产品粒度划分)在同一个repo管理,便于统一管理代码规范、共享工作流

▪选择理由2:解决跨项目/应用之间物理层面的代码复用,不用通过发布/安装npm包解决共享问题

2.依赖管理-PNPM: 消除依赖提升、规范拓扑结构

▪选择理由1:通过软/硬链接方式,最大程度节省磁盘空间

▪选择理由2:解决幽灵依赖问题,管理更清晰

3.构建工具-Vite:基于ESM和Rollup的构建工具

▪选择理由:省去本地开发时的编译过程,提升本地开发效率

4.前端框架-Vue3:Composition API

▪选择理由:除了组件复用之外,还可以复用一些共同的逻辑状态,比如请求接口loading与结果的逻辑

5.模拟接口返回数据-Mockjs

▪选择理由:前后端统一了数据结构后,即可分离开发,降低前端开发依赖,缩短开发周期

二、目录结构设计:重点关注src部分

1.常规/简单模式:根据文件功能类型集中管理

```
mesh-fe
├── .husky                  #git提交代码触发
│   ├── commit-msg            
│   └── pre-commit                  
├── mesh-server             #依赖的node服务
│   ├── mock   
│   │   └── data-service   #mock接口返回结果 
│   └── package.json
├── README.md
├── package.json
├── pnpm-workspace.yaml     #PNPM工作空间
├── .eslintignore           #排除eslint检查
├── .eslintrc.js            #eslint配置
├── .gitignore
├── .stylelintignore        #排除stylelint检查
├── stylelint.config.js     #style样式规范
├── commitlint.config.js    #git提交信息规范
├── prettier.config.js      #格式化配置
├── index.html              #入口页面
└── mesh-client #不同的web应用package
    ├── vite-vue3 
        ├── src
            ├── api                 #api调用接口层
            ├── assets              #静态资源相关
            ├── components          #公共组件
            ├── config              #公共配置,如字典/枚举等
            ├── hooks               #逻辑复用
            ├── layout              #router中使用的父布局组件
            ├── router              #路由配置
            ├── stores              #pinia全局状态管理
            ├── types               #ts类型声明
            ├── utils
            │   ├── index.ts        
            │   └── request.js     #Axios接口请求封装
            ├── views               #主要页面
            ├── main.ts             #js入口
            └── App.vue
```

2.基于domain领域模式:根据业务模块集中管理

```
mesh-fe
├── .husky                  #git提交代码触发
│   ├── commit-msg            
│   └── pre-commit                  
├── mesh-server             #依赖的node服务
│   ├── mock   
│   │   └── data-service   #mock接口返回结果 
│   └── package.json
├── README.md
├── package.json
├── pnpm-workspace.yaml     #PNPM工作空间
├── .eslintignore           #排除eslint检查
├── .eslintrc.js            #eslint配置
├── .gitignore
├── .stylelintignore        #排除stylelint检查
├── stylelint.config.js     #style样式规范
├── commitlint.config.js    #git提交信息规范
├── prettier.config.js      #格式化配置
├── index.html              #入口页面
└── mesh-client             #不同的web应用package
    ├── vite-vue3 
        ├── src                    #按业务领域划分
            ├── assets              #静态资源相关
            ├── components          #公共组件
            ├── domain              #领域
            │   ├── config.ts
            │   ├── service.ts 
            │   ├── store.ts        
            │   ├── type.ts                       
            ├── hooks               #逻辑复用
            ├── layout              #router中使用的父布局组件
            ├── router              #路由配置
            ├── utils
            │   ├── index.ts        
            │   └── request.js     #Axios接口请求封装
            ├── views               #主要页面
            ├── main.ts             #js入口
            └── App.vue
```

可以根据具体业务场景,选择以上2种方式其中之一。

三、搭建部分细节

1.Monorepo+PNPM集中管理多个应用(workspace)

▪根目录创建pnpm-workspace.yaml,mesh-client文件夹下每个应用都是一个package,之间可以相互添加本地依赖:pnpm install

packages:
  # all packages in direct subdirs of packages/
  - 'mesh-client/*'
  # exclude packages that are inside test directories
  - '!**/test/**'

pnpm install #安装所有package中的依赖

pnpm install -w axios #将axios库安装到根目录

pnpm --filter | -F <name> <command> #执行某个package下的命令

▪与NPM安装的一些区别:

▪所有依赖都会安装到根目录node_modules/.pnpm下;

▪package中packages.json中下不会显示幽灵依赖(比如tslib@types/webpack-dev),需要显式安装,否则报错

▪安装的包首先会从当前workspace中查找,如果有存在则node_modules创建软连接指向本地workspace

▪"mock": "workspace:^1.0.0"

2.Vue3请求接口相关封装

▪request.ts封装:主要是对接口请求和返回做拦截处理,重写get/post方法支持泛型

import axios, { AxiosError } from 'axios'
import type { AxiosRequestConfig, AxiosResponse } from 'axios'

// 创建 axios 实例
const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_URL,
  timeout: 1000 * 60 * 5, // 请求超时时间
  headers: { 'Content-Type': 'application/json;charset=UTF-8' },
})

const toLogin = (sso: string) => {
  const cur = window.location.href
  const url = `${sso}${encodeURIComponent(cur)}`
  window.location.href = url
}

// 服务器状态码错误处理
const handleError = (error: AxiosError) => {
  if (error.response) {
    switch (error.response.status) {
      case 401:
        // todo
        toLogin(import.meta.env.VITE_APP_SSO)
        break
      // case 404:
      //   router.push('/404')
      //   break
      // case 500:
      //   router.push('/500')
      //   break
      default:
        break
    }
  }
  return Promise.reject(error)
}

// request interceptor
service.interceptors.request.use((config) => {
  const token = ''
  if (token) {
    config.headers!['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
  return config
}, handleError)

// response interceptor
service.interceptors.response.use((response: AxiosResponse<ResponseData>) => {
  const { code } = response.data
  if (code === '10000') {
    toLogin(import.meta.env.VITE_APP_SSO)
  } else if (code !== '00000') {
    // 抛出错误信息,页面处理
    return Promise.reject(response.data)
  }
  // 返回正确数据
  return Promise.resolve(response)
  // return response
}, handleError)

// 后端返回数据结构泛型,根据实际项目调整
interface ResponseData<T = unknown> {
  code: string
  message: string
  result: T
}

export const httpGet = async <T, D = any>(url: string, config?: AxiosRequestConfig<D>) => {
  return service.get<ResponseData<T>>(url, config).then((res) => res.data)
}

export const httpPost = async <T, D = any>(
  url: string,
  data?: D,
  config?: AxiosRequestConfig<D>,
) => {
  return service.post<ResponseData<T>>(url, data, config).then((res) => res.data)
}

export { service as axios }

export type { ResponseData }

▪useRequest.ts封装:基于vue3 Composition API,将请求参数、状态以及结果等逻辑封装复用

import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { ResponseData } from '@/utils/request'
export const useRequest = <T, P = any>(
  api: (...args: P[]) => Promise<ResponseData<T>>,
  defaultParams?: P,
) => {
  const params = ref<P>() as Ref<P>
  if (defaultParams) {
    params.value = {
      ...defaultParams,
    }
  }
  const loading = ref(false)
  const result = ref<T>()
  const fetchResource = async (...args: P[]) => {
    loading.value = true
    return api(...args)
      .then((res) => {
        if (!res?.result) return
        result.value = res.result
      })
      .catch((err) => {
        result.value = undefined
        ElMessage({
          message: typeof err === 'string' ? err : err?.message || 'error',
          type: 'error',
          offset: 80,
        })
      })
      .finally(() => {
        loading.value = false
      })
  }
  return {
    params,
    loading,
    result,
    fetchResource,
  }
}

▪API接口层

import { httpGet } from '@/utils/request'

const API = {
  getLoginUserInfo: '/userInfo/getLoginUserInfo',
}
type UserInfo = {
  userName: string
  realName: string
}
export const getLoginUserInfoAPI = () => httpGet<UserInfo>(API.getLoginUserInfo)

▪页面使用:接口返回结果userInfo,可以自动推断出UserInfo类型,

// 方式一:推荐
const {
  loading,
  result: userInfo,
  fetchResource: getLoginUserInfo,
} = useRequest(getLoginUserInfoAPI)

// 方式二:不推荐,每次使用接口时都需要重复定义type
type UserInfo = {
  userName: string
  realName: string
}
const {
  loading,
  result: userInfo,
  fetchResource: getLoginUserInfo,
} = useRequest<UserInfo>(getLoginUserInfoAPI)

onMounted(async () => {
  await getLoginUserInfo()
  if (!userInfo.value) return
  const user = useUserStore()
  user.$patch({
    userName: userInfo.value.userName,
    realName: userInfo.value.realName,
  })
})

3.Mockjs模拟后端接口返回数据

import Mock from 'mockjs'
const BASE_URL = '/api'
Mock.mock(`${BASE_URL}/user/list`, {
  code: '00000',
  message: '成功',
  'result|10-20': [
    {
      uuid: '@guid',
      name: '@name',
      tag: '@title',
      age: '@integer(18, 35)',
      modifiedTime: '@datetime',
      status: '@cword("01")',
    },
  ],
})

四、统一规范

1.ESLint

注意:不同框架下,所需要的preset或plugin不同,建议将公共部分提取并配置在根目录中,package中的eslint配置设置extends。

/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')

module.exports = {
  root: true,
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    '@vue/eslint-config-prettier',
  ],
  overrides: [
    {
      files: ['cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}'],
      extends: ['plugin:cypress/recommended'],
    },
  ],
  parserOptions: {
    ecmaVersion: 'latest',
  },
  rules: {
    'vue/no-deprecated-slot-attribute': 'off',
  },
}

2.StyleLint

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  plugins: ['stylelint-order'],
  customSyntax: 'postcss-html',
  rules: {
    indentation: 2, //4空格
    'selector-class-pattern':
      '^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\[.+\])?$',
    // at-rule-no-unknown: 屏蔽一些scss等语法检查
    'at-rule-no-unknown': [true, { ignoreAtRules: ['mixin', 'extend', 'content', 'export'] }],
    // css-next :global
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global', 'deep'],
      },
    ],
    'order/order': ['custom-properties', 'declarations'],
    'order/properties-alphabetical-order': true,
  },
}

3.Prettier

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  tabWidth: 2,
  semi: false,
}

4.CommitLint

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      ['build', 'feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore', 'revert'],
    ],
    'subject-full-stop': [0, 'never'],
    'subject-case': [0, 'never'],
  },
}

五、附录:技术栈图谱

最佳实践:基于vite3的monorepo前端工程搭建 | 京东云技术团队

作者:京东科技 牛志伟

来源:京东云开发者社区

点赞
收藏
评论区
推荐文章
Peter20 Peter20
3年前
mysql中like用法
like的通配符有两种%(百分号):代表零个、一个或者多个字符。\(下划线):代表一个数字或者字符。1\.name以"李"开头wherenamelike'李%'2\.name中包含"云",“云”可以在任何位置wherenamelike'%云%'3\.第二个和第三个字符是0的值wheresalarylike'\00%'4\
Wesley13 Wesley13
2年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
React 世界的一等公民
Choerodon猪齿鱼平台使用React作为前端应用框架,对前端的展示做了一定的封装和处理,并配套提供了前端组件库ChoerodonUI。结合实际业务情况,不断对组件优化设计,提高代码质量。本文将结合Choerodon猪齿鱼平台使用案例,简单说明组件的分类、设计原则和设计模式,帮助开发者在不同场景下选择正确的设计和方案编写组件(示例代码基于ES6
Stella981 Stella981
2年前
Hibernate纯sql查询结果和该sql在数据库直接查询结果不一致
问题:今天在做一个查询的时候发现一个问题,我先在数据库实现了我需要的sql,然后我在代码中代码:selectdistinctd.id,d.name,COALESCE(c.count_num,0),COALESCE(c.count_fix,0),COALESCE(c
Wesley13 Wesley13
2年前
00_设计模式之语言选择
设计模式之语言选择设计模式简介背景设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。设计模式(Designpattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
京东云开发者 京东云开发者
8个月前
微前端无界机制浅析 | 京东物流技术团队
简介随着项目的发展,前端SPA应用的规模不断加大、业务代码耦合、编译慢,导致日常的维护难度日益增加。同时前端技术的发展迅猛,导致功能扩展吃力,重构成本高,稳定性低。为了能够将前端模块解耦,通过相关技术调研,最终选择了无界微前端框架作为物流客服系统解耦支持。