# webpack5-react19
**Repository Path**: liuguojia/webpack5-react19
## Basic Information
- **Project Name**: webpack5-react19
- **Description**: webpack@5.102.1
react@19.2.0
eslint@8.57.0
antd@5.27.4
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-11
- **Last Updated**: 2025-10-13
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
### 项目说明
> 本平台为微前端的子服务；
> track.bmwbrill.cn track-dev.bmwbrill.cn track-stg.bmwbrill.cn track-int.bmwbrill.cn
> 集成 LingYue 前端开发规范、阿里 ARMS 前端监控、Sonar_Qube
### 基本依赖
| Package | Version | Description |
| ---------------- |---------| ----------- |
| webpoack | 5.102.1 | |
| react | 19.2.0 | |
| react-dom | 19.2.0 | |
| react-router-dom | 7.9.4 | |
| qiankun | 2.10.16 | |
| antd | 5.27.4 | |
| typescript | 5.9.3 | |
| eslint | 8.57.0 | |
### 依赖包安装
> `npm i --legacy-peer-deps` 安装依赖包命令(忽略包依赖问题)
>
> `sudo npm cache clean --force` 清除NPM缓存
>
> `yarn config set ignore-engines true` 忽略安装依赖错误
>
> `npm install --unsafe-perm=true --allow-root`
>
> `yarn install` 推荐使用该方式安装依赖包
### 目录说明
```
/fe-{project-name} // 项目名称
|--/dist // 存放项目的打包文件
|--/node_modules // 使用npm或yarn包管理工具自动创建的文件夹，存放下载的代码依赖模块
|--/config // 存放项目的公共配置文件 如 Webpack 等基本配置
|--/env // 存放项目的环境配置常量文件
| |--.env // 全局环境配置常量文件
| |--.env.stg // STG 环境配置常量文件
| |--.env.int // INT 环境配置常量文件
| |--.env.development // DEV 环境配置常量文件
| |--.env.production // PROD 环境配置常量文件
|--/public // 存放项目的静态资源，如HTML页面，公共的图片或者字体文件
| |--index.html // 存放项目的 HTML Template 文件
| |--/favicon.ico // 存放项目的地址栏和标签标题的个性化图标文件
| |--/font // 存放项目的字体文件
| |--/media // 存放项目的媒体文件
| |--/images // 存放项目的图片文件
| |--/icons // 存放项目的ICON文件
| |--/svgs // 存放项目的SVG文件
|--/src // 存放项目的源代码
| |--/components // 存放项目的公共组件文件
| |--/containers // 存放项目的容器组件文件
| |--/IndexedDB // 存放项目的IndexedDB 的相关配置文件
| |--/assets // 存放项目的其他静态资源，如CSS、JS、图片等
| |--/enum // 存放项目的公共的枚举数据或字典数据
| |--/hooks // 存放项目的公共的 React Hooks
| |--/service // 存放项目的公共的服务层代码，如API请求
| |--/locales // 存放项目的国际化配置文件
| | |---/en-US // 存放项目的国际化 US语言 配置文件
| | |---/zh-CN // 存放项目的国际化 CN语言 配置文件
| |--/utils // 存放项目的公共工具函数文件
| |--/router // 存放项目的路由配置
| |--/styles // 存放项目公共的样式文件
| |--/pages // 存放项目的页面组件
| | |---{modules} // 存放项目的页面的根文件
| | | |---/components // 存放项目的页面的专用组件文件
| | | |---/config // 存放项目的页面的专用配置
| | | |---index.js // 存放项目的页面的根文件
| | | |---_mock.js // 存放项目的页面的模拟数据或函数
| | | |---service.js // 存放页面相关的服务层代码，如API请求
| | | |---dao.js // 存放页面相关的服务层操作 IndexedDB 的逻辑代码
| | | |---style.css // 存放页面相关的样式文件
| | | |---reducer.js // 存放页面相关的actions和reducers
| |--App.js // 项目入口文件
|--/tests // 存放项目的测试文件
|--/docs // 存放项目的文档
|--package.json // 定义项目的元数据和依赖项
|--package-lock.json // 锁定安装时的包的版本号，并且提供了一个安装的包的确切来源
|--.babelrc // Babel的配置文件
|--.eslintrc // ESLint的配置文件
|--.gitignore // Git配置文件，用来指定哪些文件或目录不应提交到Git仓库
|--.editorconfig // 定义代码格式
|--.prettierrc // Prettier 的配置文件
|--sonar_qube.groovy // Sonar Qube 的配置文件
|--nginx // Nginx 的配置文件
|--Dockerfile // Docker 配置文件
|--README.md // 项目说明文件
|--VERSION.md // 平台版本说明文档
|--LICENSE // 项目许可证文件
```
### 项目执行脚本说明
| 脚本命令 | 说明 |
| -------------- | ----------------------------------- |
| start | 本地开发 |
| build:dev | 打包为DEV |
| build:stg | 打包为STG |
| build:pre | 打包为PRE |
| build:gray | 打包为GRAY |
| build:prod | 打包为PROD |
| lint | 检查代码规范 |
| lint-staged | 检查代码格式化 |
| lint-staged:js | 检查代码格式化只检查`js/jsx/ts/tsx` |
| lint:fix | 检查代码并自动修复 |
| lint:js | 检查代码只检查`js/jsx/ts/tsx` |
| lint:prettier | 检查代码格式化 |
| lint:style | 检查代码`css/less/sass/scss` |
| prepare | husky install |
| tsc | `TS`代码检查 |
### 版本号管理规范
#### 目的与适用范围
本规范旨在为《LingYue数字平台》的版本号管理提供一个统一的标准，以确保版本号的唯一性、规范性和可追溯性。本规范适用于公司内部开发的各类互联网平台，包括但不限于Web应用、移动应用、小程序等。
版本号要与 `package.json` 内的 `version` 一致。
#### 版本号格式
版本号应遵循主版本号次版本号修订号的格式，例如：`1.2.1`。
主版本号和次版本号均为整数，用于表示产品的重大更新和功能迭代。
修订号可以为整数或小数，用于表示小范围修复和优化。
#### 版本号命名规范
1. 主版本号（Major Version）：当产品发生不向后兼容的重大更新或重构时，主版本号加一。
2. 次版本号（Minor Version）：当产品向后兼容地增加新功能或修复非安全性的bug时，次版本号加一。
3. 修订号（Patch Version）：当产品修复安全性的bug或进行小范围优化时，修订号加一。
#### 版本号管理流程
1. 开发阶段：在开发阶段，根据产品迭代和修复情况，更新版本号。在代码仓库中，将版本号信息作为元数据存储，以便于跟踪和管理。
2. 测试阶段：在测试阶段，如发现bug需修复，开发人员根据修复内容更新相应的版本号。测试人员需验证新版本的兼容性和功能完整性。
3. 发布阶段：在发布新版本之前，确保所有相关的文档、界面和宣传资料都已更新至最新版本号。发布后，将旧版本的文档、界面和宣传资料归档或标记为历史版本。
4. 回滚策略：如因新版本出现问题需要回滚，需确保所有相关资料（如文档、界面等）也同步回滚到相应版本。同时，记录回滚的原因和解决方案，以供未来参考。
5. 版本号审查：定期对所有互联网平台的版本号进行审查，确保没有重复或冲突的版本号存在。对于长期未更新的项目，也应关注其版本号的动态，避免出现管理上的混乱。
6. 文档化：对于每个版本号的更新记录、功能特性和兼容性等信息，都应详细记录在相关文档中，以便于用户和开发者了解和使用。
7. 交流与协作：在开发和维护过程中，如涉及多个团队或第三方合作，应确保所有人对版本号的更新和管理都有明确的了解和共识，以避免出现混淆或冲突。
8. 自动化工具：考虑使用自动化工具来管理版本号，例如使用构建脚本自动生成和更新版本号，可以大大提高效率和准确性。
9. 培训与意识：对团队成员进行培训，使其了解并遵循此版本号管理规范，提高整个团队的意识和协作效率。
10. 持续改进：随着项目的进展和团队的发展，此规范可能需要调整或优化。应定期审查和改进此规范，以适应新的需求和技术发展。
### 分支规范
#### 分支类型
| 前缀 | 说明 |
| :-----: | :-------------: |
| develop | 开发分支 |
| feature | 特性分支 |
| hotfix | 修复分支 |
| release | 测试/预发布分支 |
| master | 主分支 |
#### 分支的创建与使用
* 创建分支：
* 创建规范：分支按照一定格式创建，具体格式如下：
* develop
* 开发分支可以按照`JIRA_ID`编号创建：例如：`develop/CISCDP-240130`
* feature
* 特性分支命名规则为`feature/{年月日}F{三位数字}`
* hotfix
* 修复分支命名规则为`hotfix/{年月日}H{三位数字}`
* release
* `{分支类型}/{YYMM}{发版日期描述}` 例如：`release/24013M`
* YYMM：为项目发版的年月。
* 发布日期描述
* **M** 为月中发版
* **E** 为月末发版
* 例：`release/2401E` 表示该分支在24年01月末发版
* 使用分支：不允许在`release/master`分支上开发工作。
* 分支保护：对于主分支和开发分支，应设置相应的权限保护，确保只有经过授权的开发者才能进行合并操作。
* 分支清理
* 分支归档：在任务完成后，应对不再使用的特性分支进行归档清理，以便释放资源。归档清理的分支应确保没有未合并的代码。
* 分支合并历史审查：定期对代码库的合并历史进行审查，以便发现潜在的问题并进行清理。例如，通过查看提交记录和代码修改记录，可以发现潜在的代码冲突和混乱问题。
* 定期清理：为了保持代码库的整洁，应定期进行代码清理工作。清理的对象包括过时的代码、未使用的变量和方法、冗余的配置文件等。清理工作应由团队共同完成，以确保代码质量。
* 备份与恢复：在进行任何清理操作之前，应对当前代码库进行备份，以便在必要时恢复到之前的状态。备份工作应由专人负责，并定期检查备份的有效性。
### 注释规范
| 说明 | 标签 |
| ---------------- | :------------: |
|即将着手编写的代码，说明需要完成的任务或实现的功能| TODO |
|代码有问题或具有误导性，需要引起警惕| XXX |
|代码存在缺陷，需要修复| FIXME |
|代码存在已知的错误或BUG，需要修正| BUG/DEBUG |
|变通办法(多指差强人意的解决方案)| HACK/BODGE/KLUDGE |
|对之前代码改动的撤销| UNDONE |
|用来强调值得注意的地方，特别是代码编写者的想法、意图和灵感| NOTE |
|用来强调这里不符合SonarQube规范，又暂时无法处理，请求FIX的标记| QUBE |
### Git 提交规范
| 前缀 | 说明 | 备注 |
| :------: | ------------------------------- | ------------------------------------------------ |
| feat | 新功能、新特性 | |
| fix | 修改 bug | |
| perf | 更改代码，以提高性能 | 在不影响代码内部行为的前提下，对程序性能进行优化 |
| refactor | 代码重构 | 在不影响代码内部行为、功能下的代码修改 |
| docs | 文档修改 | |
| style | 代码格式修改, 注意不是 css 修改 | 例如分号修改 |
| test | 测试用例新增、修改 | |
| build | 影响项目构建或依赖项修改 | |
| revert | 恢复上一次提交 | |
| chore | 其他修改 | 不在上述类型中的修改 |
| release | 发布新版本 | |
| | | |
### 代码格式化配置 Prettierrc
```javascript
tabWidth: 2, // 缩进长度
printWidth: 100, // 单行长度
semi: true, // 句末使用分号
useTabs: false, // 使用空格代替tab缩进
singleQuote: true, // 使用单引号
insertPragma: false, // 在已被preitter格式化的文件顶部加上标注
jsxSingleQuote: true, // jsx中使用单引号
bracketSpacing: true, // 在对象前后添加空格 { foo: bar }
requirePragma: false, // 无需顶部注释即可格式化
jsxBracketSameLine: true, // 多属性html标签的‘>’折行放置
endOfLine: 'lf', // 结束行形式
trailingComma: 'all', // 多行时尽可能打印尾随逗号
proseWrap: 'preserve', // 不知道怎么翻译
arrowParens: 'always', // 单参数箭头函数参数周围使用圆括号(x) => x
quoteProps: 'as-needed', // 仅在必需时为对象的key添加引号
vueIndentScriptAndStyle: false, // 不对vue中的script及style标签缩进
htmlWhitespaceSensitivity: 'ignore', // 对HTML全局空白不敏感
embeddedLanguageFormatting: 'auto', // 对引用代码进行格式化
```