带你入门前端工程

https://woai3c.gitee.io/introduction-to-front-end-engineering/

前端工程化，其实是软件工程在前端方面的应用。什么是软件工程？来看一下百度百科的定义：

软件工程是一门研究用工程化方法构建和维护有效的、实用的和高质量的软件的学科

换句话说，工程化的目的就是为了提升团队的开发效率。例如大家所熟悉的构建打包、性能优化、自动化部署等知识，都属于工程化的内容。

我写这本小书的原因，是想对过去两年的工程化实践经验和学习心得做一个总结。希望能全面地、系统地对前端工程化知识做一个总结。

小书大部分的内容都是以理论知识 + 代码示例 + 图片的方式来讲解的，努力争取让读者更容易理解。另外还有小部分的章节在讲解完理论知识后，还有相应的实践教程。例如前端监控这一节，在讲解完前端监控原理后，将会教你如何利用现有的监控工具对项目实行监控。

可能有人会问，什么时候开始做工程化？我认为在需求评审阶段就可以做工程化了，根据需求选用适当的技术栈（技术选型），然后制定相关规范...

在线访问

• 访问入口一
• 访问入口二

目录

1. 技术选型：如何进行技术选型？
2. 统一规范：如何制订规范并利用工具保证规范被严格执行？
3. 前端组件化：什么是模块化、组件化？
4. 测试：如何写单元测试和 E2E（端到端） 测试？
5. 构建工具：构建工具有哪些？都有哪些功能和优势？
6. 自动化部署：如何利用 Jenkins、Github Actions 自动化部署项目？
7. 前端监控：讲解前端监控原理及如何利用 sentry 对项目实行监控。
8. 性能优化（一）：如何检测网站性能？有哪些实用的性能优化规则？
9. 性能优化（二）：如何检测网站性能？有哪些实用的性能优化规则？
10. 重构：为什么做重构？重构有哪些手法？
11. 微服务：微服务是什么？如何搭建微服务项目？
12. Severless：Severless 是什么？如何使用 Severless？

微服务、Severless 按理说不属于工程化的内容，但从提升开发效率的角度来看，也可以归纳到这一范围。

目录的顺序是以一个项目的生命周期来分配的：

1. 接到新需求，进行需求评审后根据具体情况做技术选型。
2. 开发前需要统一规范。
3. 学会模块化、组件化，对于写代码很有好处。
4. 开发完，需要对代码进行测试。
5. 构建打包。
6. 部署上线。
7. 对项目进行监控，随时发现问题。
8. 根据项目运行情况决定是否要做性能优化。
9. 项目越来越复杂，需要重构以提高可维护性。
10. 项目越来越大，可以考虑是否用微服务对其进行拆分（或者使用 git submodule 和 monorepo 的方式管理项目）。
11. 不想自己管理服务器或数据库，可以考虑使用 Serverless。

注意

本书的定位是入门级教程，主要对前端能接触到的工程知识做一个较全面的介绍。适合对前端工程化不了解或了解得不多的“菜鸟”同学。如果你是个“老鸟”，那本书可能不太适合你。

另外，建议读者在阅读本书时，能够配合书本的实践部分去做实践。如果读者能够严格按照指示去做实践，在阅读完本书后，不仅会收获前端工程化的理论知识，还会获得对应的实践经验。

你会学到什么？

• 对前端工程化有一个全面、清晰的了解
• 为架构师之路打下扎实的基础

适宜人群

• 想学习工程化的前端
• 具备基础的 HTML、CSS、JavaScript 知识

扩展

由于这本小书主要就是针对一个技术点讲解它是什么？怎么做？对于更细的点不会有深入的讲解。为了弥补这一点，我写了一些其他文章来对此做为补充：

• 手把手教你写一个脚手架
• 深入了解 webpack 模块加载原理
• 实现一个 webpack loader 和 webpack plugin
• 从 rollup 初版源码学习打包原理

from https://github.com/woai3c/introduction-to-front-end-engineering

-----

https://github.com/woai3c/Front-end-basic-knowledge

-----

前端文章

• 手把手教你写一个脚手架
• 可视化拖拽组件库一些技术要点原理分析（三）
• 可视化拖拽组件库一些技术要点原理分析（二）
• 可视化拖拽组件库一些技术要点原理分析
• chrome 开发者工具——前端实用功能总结
• 而立之年——回顾我的前端转行之路
• 手把手带你入门前端工程化——超详细教程
• 前端项目自动化部署——超详细教程（Jenkins、Github Actions）
• 前端国际化辅助工具——自动替换中文并翻译
• 深入了解 webpack 模块加载原理
• 实现一个 webpack loader 和 webpack plugin
• 从 rollup 初版源码学习打包原理
• 前端学习计算机理论知识的好处
• HTML 元素标签语义化及使用场景
• 三年前端路：分享我的工作经验与学习经历
• 前端发展历程
• 事件循环
• 如何编写高质量代码
• 栅格化系统的原理以及实现
• 前端性能和错误监控
• ESlint + Stylelint + VSCode自动格式化代码(2020)
• 移动端开发一些常见问题的解决方案
• 前端工程化建设
• 手写 Promise

Vue

• 手把手教你搭建 Vue 服务端渲染项目
• Vue3 响应式原理
• Vue3 模板编译原理
• 多个请求下 loading 的展示与关闭
• Vue 实现前进刷新，后退不刷新的效果
• Vue 改变数据，页面不刷新的问题
• 开发一个简单的 Vue 弹窗组件
• Vue 动态添加路由及生成菜单
• Vue 页面权限控制和登陆验证

性能优化

• 前端性能优化 24 条建议（2020）
• JavaScript性能优化
• 优化循环的方法-循环展开
• 程序局部性原理

疑难问题

• 手机软键盘弹起导致页面变形的一种解决方案
• 用canvas实现手写签名功能
• 在浏览器调起本地应用的方法
• 前端下载二进制流文件
• element-ui 表格打印
• Vue Cli 3 打包配置--自动忽略 console.log 语句

Node

• 用 node 搭建个人博客
• 阿里云服务器部署个人网站

数据结构与算法

• 用递归的思想实现二叉树前、中、后序迭代遍历

编译原理

• 编译原理实战入门：用 JavaScript 写一个简单的四则运算编译器（修订版）
• 编译原理实战入门：用 JavaScript 写一个简单的四则运算编译器（一）词法分析
• 编译原理实战入门：用 JavaScript 写一个简单的四则运算编译器（二）语法分析
• 编译原理实战入门：用 JavaScript 写一个简单的四则运算编译器（三）模拟执行
• 编译原理实战入门：用 JavaScript 写一个简单的四则运算编译器（四）结语

计算机网络

• 半小时搞懂 HTTP、HTTPS和HTTP2

git

• git commit 提交规范
• git 常用命令介绍

其他

• 强烈推荐的两个神级教学项目: nand2tetris 与 MIT6.828

frm https://github.com/woai3c/Front-end-articles