工程化
type
status
date
slug
summary
tags
category
icon
password
Blocking
Blocked by
top
URL
Sub-item
Parent item
概念
前端工程化是指以降低成本、提高效率和质量（降本增效）为目标，通过流程、工具、规范为手段的解决方案。
内容
- 包管理工具：使用工具如Node.js的npm或Yarn来管理和安装项目所需的第三方库和插件。
- 模块化：将前端代码拆分为多个模块，使用模块化的开发方式，例如CommonJS、ES Modules或AMD。
- 构建工具：使用构建工具如Webpack或Parcel来自动化处理前端代码的打包、压缩、合并等操作。
- 自动化测试：通过使用测试框架和工具，编写单元测试、集成测试和端到端测试，以确保代码质量和功能的稳定性。
- 代码规范和静态检查：使用工具如ESLint或TSLint来强制执行代码规范，并进行静态代码分析，以避免常见的错误和潜在问题。
- 性能优化：对前端代码进行性能分析，并采取相应的优化策略，如资源合并、缓存优化、懒加载等，以提升页面加载速度和用户体验。
- 版本控制：使用版本控制工具如Git来管理前端代码的版本，并支持团队协作和代码的回滚和合并。
项目脚手架
一个业务项目脚手架应该内置这些（不局限于）：
- react, react-dom, react-router, antd, reset.css 等基础库，并CDN引入。
- 统一css模块化方案css module，styled-components。
- 前端容器化部署，构建私有镜像库，内置符合业务的dockerfile。以及合理的镜像资源优化（如：镜像分层）
- 代码规范：eslint+prettier+lint-staged
- 单元测试：Jest进行自动化测试
- 常见的gitigore
- typescript配置：tsconfig.js+babel 配置。
- 请求接口封装：通过hooks方式调用，根据后端接口数据结构，状态码进行相应处理。
- 工具库集成：集成redux，react-router，路由权限控制，自定义hooks库，自定义组件库
- 构建脚本：引入CI/CD流程，将代码集成到主干分支后进行自动化构建、自动化测试和部署。
- 接入公司监控系统，封装埋点和性能监控。
- 封装iconfont图标引用组件。
面试题
谈谈对前端工程化的理解
通过各种技术方式，提高开发效率，减少重复工作，减少bug。应该从模块化、组件化、规范化、自动化4个方面去思考
模块化
将大的文件拆分成互相依赖的小文件，再进行统一的拼装和加载。
js的模块化：利用webpack+babel的模式将所有模块系统进行打包，同步加载，也可以搭乘多个chunk异步加载。
利用浏览器的script标签，type类型选modules类型即可。
css模块化： css modules、css in js 解决全局污染问题。
资源的模块化：webpack的成功不仅仅是因为将js系统进行模块化处理，而是它的模块化原理，即任何资源都可以模块
组件化
页面上所有的东西都可以看成组件，页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件
- 组件化≠模块化。模块化只是在文件层面上，对代码和资源的拆分；组件化是在设计层面上，对于UI的拆分
- 目前市场上的组件化的框架，主要的有Vue，React，Angular2
规范化
在项目规划初期制定的好坏对于后期的开发有一定影响。包括的规范有
- 目录结构的制定
- 编码规范
- 前后端接口规范
- 文档规范
- 组件管理
- Git分支管理
- Commit描述规范
- 定期codeReview
- 视觉图标规范
自动化
也就是简单重复的工作交给机器来做，自动化也就是有很多自动化工具代替我们来完成，例如持续集成、自动化构建、自动化部署、自动化测试等等
怎么从前端工程化层面，减少代码频繁上线出现问题？
- 版本控制：使用版本控制系统（如Git）来管理代码，确保每个代码更改都有版本记录。这样可以轻松地回滚到之前的稳定版本，以防出现问题。
- 自动化构建：建立自动化构建流程，使用工具（如Webpack、Grunt、Gulp等）自动处理编译、压缩和打包等任务。这样可以减少手动操作带来的错误，并确保每次上线的代码都是经过验证的。
- 持续集成（CI）和持续交付（CD）：引入CI/CD流程，将代码集成到主干分支后进行自动化构建、自动化测试和自动化部署。这样可以及早发现和修复问题，并确保代码能够快速、稳定地部署到生产环境。
- 单元测试和端到端测试：编写全面的单元测试和端到端测试，覆盖代码的各个功能和场景。在每次代码更改后运行这些测试，以确保代码的正确性和稳定性。可以使用测试框架（如Jest、Mocha、Selenium等）来辅助编写和运行测试。
- 代码评审：建立代码评审机制，通过同行间的代码审查来发现潜在问题和改进点。代码评审可以帮助发现一些易被忽视的错误，并促使团队成员保持高质量的代码风格和最佳实践。
- 监控和日志：在生产环境中设置监控系统，实时监测应用程序的性能、错误和异常。同时，记录详细的日志信息，以便在出现问题时能够进行快速排查和定位。
- 建立一些平台，例如监控平台、发布平台。
CI和CD值之间的区别和联系
- CI就是持续集成(Continuous Integration)：当代码仓库代码发生变更，就会自动对代码进行测试和构建，反馈运行结果。
- CD就是持续交付(Continuous Delivery)：持续交付是在持续集成的基础上，可以将集成后的代码依次部署到测试环境、予发布环境、生产环境等中
