前端工程化
machao07 opened this issue · comments
工程化
以前是 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