前端工程化

[马超]

工程化

以前是 html css js，结构层、表现层和行为层分离

将前端项目当成一项系统工程进行分析，提高团队配合默契、开发效率

核心概念包括模块化、打包构建、自动化部署、自动化测试和 持续集成等

模块化

将一个大的应用程序划分成多个小的模块，每个模块可以独立开发、测试和维护

常见的js模块化 CommonJS、ES6、AMD、CMD

常见的css模块化 less、sass、stylus

打包构建

• 将多个模块组合起来，生成可以在浏览器中运行的代码
• 打包构建的过程包括代码压缩、文件合并、资源管理等

常见的打包构建工具有 webpack、rollup、gulp等

自动化部署

将打包构建后的代码部署到测试或生产环境中
可以减少手动部署的错误和工作量，缩短部署的时间

常见的自动化部署工具有 Jenkins

自动化测试

使用自动化工具对代码进行测试，分为单元测试和端到端测试

单元测试
测试最小的可测试单元，如一个函数或一个类

端到端测试
测试整个流程，包括用户界面和后端逻辑

前端工程化主要工具

• 包管理工具：npm、Yarn、Bower
• 构建工具：Webpack、Rollup、Parcel、Gulp、Grunt
• 自动化测试工具：Jest、Mocha、Karma、Cypress、Puppeteer
• 集成工具：Travis CI、Jenkins、CircleCI、GitLab CI/CD、GitHub Actions