Skip to content

前端工程化

前端工程化 是指将前端开发的流程规范化、标准化,包括开发流程、技术选型、代码规范、构建发布等,用于提升前端工程师的开发效率和代码质量。

diagram1.jpg

复杂度高:前端项目的多功能、多页面、多状态、多系统 规模大:团队开发,多人协作,代码质量管理 要求高:页面性能优化(CDN、异步,请求合并),CSS兼容性、单页面应用、服务端渲染...

实践流程介绍

diagram2.jpg

缺陷控制工具

代码类: ESLint、JSLint、StyleLint... 流程类:Jira、禅道、Redmine、tapd... 工具类:Trello、Teambition、钉钉、石墨...

diagram3.jpg

diagram4.jpg

落地考虑

业务着手

简单的单页面应用,使用 gulp 打包+同步工具实现开发全流程

复杂度考虑

Jenkins git/gitlab webpack react、vue、 angular

从已知向未知扩展

不同的技术有不同的适应点,选择适合的才是最好的

考虑:

  • 前后端技术是否更好的融合
  • 前后端分离,接口安全性
  • vue 或 react 是否适合制作静态页面
  • 后端技术点是否更好的集合

项目实践:

  • 组件化实现代码复用
  • 脚手架让我们代码成为一种框架,在多个项目进行使用
  • 工程cli工具提高我们项目构建与发布
  • Git flow
  • webpack,gulp
  • Jenkins,Docker

前端理想架构

diagram5.jpg

Layout Switch

Adjust the layout style of VitePress to adapt to different reading needs and screens.

Expand all
The sidebar and content area occupy the entire width of the screen.
Expand sidebar with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Expand all with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Original width
The original layout width of VitePress

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.

Spotlight

Highlight the line where the mouse is currently hovering in the content to optimize for users who may have reading and focusing difficulties.

ONOn
Turn on Spotlight.
OFFOff
Turn off Spotlight.