前端工程化详解

开发前

1.使用脚手架工具

根据选择的技术栈使用官方推荐的脚手架工具或者是自研脚手架工具。脚手架的作用：构建基本目录结构、本地调试、代码部署、热加载、单元测试。
例如：vue推荐的vue-lic、 vite 。

vue-cli是基于nodejs + webpack封装的命令行工具。你可以理解为汇集了各种命令的 bash，或者bat。
原生的webpack配置项较多，vue-cli减轻了开发者心智负担，按照vue开发者的习惯整理并且构建了一套配置和规范。

Vite 是一个现代的前端构建工具，它在开发环境中利用浏览器原生的 ES 模块加载机制实现快速启动和热更新，而在生产环境打包时，默认 基于 Rollup进行构建。Rollup 是一个JavaScript 模块打包器，尤其擅长处理 ES 模块并产出优化过的静态资源。

2.使用编译工具

编译工具目前主要用的是两个，webpack 和rollup。

开发中

1.代码规范

常用的代码规范：

1. 百度代码规范
2. standard规范

2.公共方法抽离

3.公共组件抽离

4.公共样式抽离

5.icon 图片 国际化文案 常量等静态数据规划管理

6.业务模块区分

7.项目版本管理工具

目前项目版本管理工具主要有git 和 svn。以git为例。
规范git commit 提交记录。内容明确简洁的提交信息方便codereview，让管理者明确代码功能的变化原因。

规范提交：commitize是一个格式化commit message的工具。

提交检验: validate-commit-msg 用于检查项目的 Commit message 是否符合格式。

生成日志: conventional-changelog-cli 可以从git metadata生成变更日志。

8.开发IDE以及代码检查工具

使用统一的开发工具IDE，安装相同的插件，有利于代码风格统一。例如vscode，使用插件eslint。通过配置， 统一代码基本格式，以及生成格式错误提示。

开发结束

1.单元测试

推荐使用jest，Jest 是一个由 Facebook 开发的测试运行器，致力于提供一个“bettery-included”单元测试解决方案。你可以在其官方文档学习到更多 Jest 的知识。

2.项目打包

webpack和rollip都是打包工具。通过使用不同的配置项，达到多线程，快速打包。

3.项目发布

推荐使用 Gitlab CI/CD 自动化打包部署前端（vue）项目