前端工程化现在web项目虽则发展越来越复杂，涉及到的内容越来越多，为了保证业务的高质量推进，引入了工程化的思想，从各个方

现在web项目虽则发展越来越复杂，涉及到的内容越来越多，为了保证业务的高质量推进，引入了工程化的思想，从各个方向来优化项目质量

1、Git 版本控制

基于 gitlab flow 工作流设计，核心要点，长期维护 master 分支，不直接提交代码，只接受其他分支合并。

master : 受保护，不能提交代码，只接受其他分支 MR(merge request)
feature/xxx 、 bugfix/xxx : 特性分支，修复分支，分别从 master 拉取。
develop/xxx ：版本分支，日常版本推进需求，从 master 拉取。可以合并 feature 、bugfix 分支
代码发布前：非master分支均可发布发布前需要 merge 合并 master 分支。（配合工具强制校验）
代码发布后：发起 MR , 邀请其他同事 CR (Code Review) ，合并 master。通知其他同时及时合并 master 分支。

2、编码管理

代码规范： ESlint、Prettier 、函数圈复杂度
提交规范： husky 、lint-staged、commitlint
代码安全：代码安全扫描（ password 、 ip 等）

3、项目管理

推荐 pnpm workspace 实现 monorepo 。 pnpm 采用软硬链接的方式大幅优化了安装包的速度和占用空间

// packages 为业务代码，按业务划分
// commons 为功能代码，包含公共lib、 公共组件、模板代码等
packages:
  - 'packages/*'
  - 'common/*'

.npmrc : 用于设置 Registry 、Proxy 等；
.pnpmfile.cjs : 用于 hook 安装过程；比如不同的package安装了项目包的不同版本，可以通过hook，强制指定某个版本

module.exports = {
  hooks: {
    readPackage(packageJson) {
      if (packageJson.dependencies) {
        if (packageJson.dependencies['packageA']) {
          packageJson.dependencies['packageA'] = '1.0.0';
        }
      }
      return packageJson;
    },
  },
};

package.json : package.json 描述的项目相关信息，还包含了很多
- private：是否隐私项目，涉及到发布包
- scripts：重要，定义 pnpm run xxx 脚本，涉及到项目的编译，执行，运行等, 如下
```
{
    "dev": "vite",
    "build": "rimraf dist && vue-tsc && vite build",
    "preview": "vite preview",
    "debug": "vite build --minify false",
    "format": "prettier --cache --parser typescript \"src/**/*.[jt]s?(x)\" ",
    "format:check": "pnpm format --check --debug-check",
    "format:fix": "pnpm format --write",
}
```
- dependencies：安装的依赖，项目运行时包含的
- devDependencies：开发依赖，项目开发过程中需要用的，一般是工具
- engines: 指定 node 版本，不符合无法执行命令
- resolutions: 指定 npm包的版本，安装过程中会以此为准。
- browserslist: 用于 Babel 、 postcss-preset-env 等工具

4、项目构建

目前市面上主流构建工具为 webpack 、vite 。 vite 发展很迅速，得益 ESM 速度非常快。构建工具的作用主要在于2个阶段，开发阶段，构建阶段。

开发阶段
- 开发服务器 : 为前端静态资源提供开发服务器，用户访问
- HMR : 热更新，编码之后可以快速在开发服务器更新代码
构建阶段
- 编译： TS(X)-> JS ， ESNext -> ES2015
- 资源处理：CSS 、JS、图片等压缩，MD5计算
- 优化代码：TreeShaking
- 优化项目：分割 trunk , 按需加载
- 性能优化：为项目添加预加载等

5、CI \ CD

CI ：持续集成，CD ：持续部署。为了提高研发效率，通过我们期望修改代码之后可以快速的将代码推到测试环境，方便测试同学快速验证，这个过程就需要用到 CI/CD。不管CI 还是 CD , 都需要很多步骤，一般需要一个脚本文件来维护这个过程。

CI 过程：用 git hook 监听代码编码，拉取分支最新代码，执行构建命令build.sh，获取构建文件。
CD 过程：拉取构建文件，推送到指定ip，执行项目重启脚本restart.sh

为了避免构建环境代理的影响，一般需要使用 docker 构建一个与项目运行环境一致的构建环境。

docker 镜像： docker 镜像的目的就是为了解决一直性问题，主要关注以下问题。
- node 版本
- 包管理器
- git 版本