透过工程基建，架构有迹可循。你好，我是侯策（LucasHC），目前任职于某互联网独角兽公司，带领 6 条业务线前端团队，负责架构设计和核心开发、工程方案调研和选型，以及团队管理、人才梯队建设等工作。

从海外开启职业生涯、浸淫工匠般的 Coding 规范打磨，到深入国内一线大厂接受亿级流量的洗礼，我的工作方向始终没有离开前端开发。

前端开发是一个庞大的体系，纷杂的知识点铸成了一张信息密度极高的图谱。通过下面这张选自《Front-end Developer Handbook 2019》中的“前端技术学习路线图”，你可以清楚地看见前端开发的全貌。

前端技术学习路线图（来源：https://github.com/kamranahmedse/developer-roadmap）

在开发中，一行代码就可能触发宿主引擎的性能瓶颈；团队中的代码量几何级数式增长，可能就愈发尾大不掉，掣肘业务的发展。这些技术环节，或宏观或微观，都与工程化基建、架构设计息息相关。

如何打造一个顺滑的工程化流程，为研发效率不断助力？如何建设一个稳定可靠的基础设施，为业务产出保驾护航？这些问题我在多年的工作中反复思考，不断结合实践，如今也有一些经验和感悟。

但事实上，让我将这些积累幻化成文字是需要一个契机的，我先从做这个专栏的初心，以及专栏内容涉及的技术谈起。

求贤若渴的伯乐和凤毛麟角的人才

作为团队管理者，一直以来我都被人才招聘所困扰。经历了数百场面试，我看到了太多千篇一律的“皮囊”：

「我精通 Vue.js，看过 Vue.js 源码」=== 「我能熟记 Object.defineProperty / Proxy，也知道发布订阅模式」

「我精通 AST」===「我知道 AST 是抽象语法树，知道能用它做些什么」

「我熟练使用并了解 Babel」===「我能记清楚很多 Babel 配置项，甚至默写出 Babel Plugin 模板代码」

当知识技术成为应试八股文，人才招聘就沦为“面试造火箭，工作拧螺丝”的逢场作戏。对于上述问题，我不禁多问：

「你知道 Vue.js 完整版和运行时版本的区别吗？」

如果你不理解「Vue.runtime.js 运行时版本不包含模板编译器」，就大概率无法说清 Vue 在模板编译环节具体做了什么。如果只知道几个 APIs 实现数据劫持和发布订阅模式，又何谈精通原理？

「请你手写一个“匹配有效括号”算法？」

如果连 LeetCode 上 easy 难度的编译原理相关算法题都无法做出，那么何谈分词、AST 这些概念？

「如何设计一个 C 端 Polyfill 方案？」

如果不清楚 @babel/preset-env 的 useBuiltIns 不同配置背后的设计理念，又何谈了解 Babel，更别说设计一个性能更好的降级方案。

另一方面，我很理解求职者也面临困惑：

我该如何避免相似的工作做三年，而不是具备了三年的工作经验？

我该如何从繁杂且千篇一律的业务需求中抽身出来，有时间总结提高自己？

我该如何为团队带来更大的价值，体现经验能力？

为了破局，焦虑的开发者渐渐成为“短期速成知识”的收集者。你以为收藏的是知识，其实收藏的是“知道”，你以为掌握了知识，其实只是囤积了一堆“知道”。

于是，近些年我也一直在思考：“如何抽象出真正有价值的开发知识”，“如何发现并解决技术成长瓶颈，培养人才”。因此，我将自己在海外和 BAT 服务多年积累的经验分享给大家，把长时间以来我认为最有价值的信息系统性整理输出——这正是我做这个专栏的初心。

从前端工程化基建和架构设计的价值谈起

从当前招聘情况和开发社区的现象上看，短平快、碎片化的内容（比如快速搞定“面经题目”）很容易演变成跳槽加薪的兴奋剂，但是在某种程度上它只能成为缓解焦虑的精神鸦片。

试想，如果你资质平平，又缺少团队中“大牛”的指点，工作内容就是在已有项目中写几个页面或运营活动，如此往复技术无法提高，三四年后和应届校招生也许并无差别。

这种情况出现的主要原因还是大部分开发者无法接触到好项目。这里的“好项目”是指：从 0 到 1 打造应用的基础建设、制定应用的工程化方案、实现应用的构建和发布流程、设计应用中公共方法和底层架构。系统性地研究这些知识，才能真正打通开发者“任督二脉”，实现个人和团队更大的价值。

我把这样的内容总结定义为：前端工程化基建和架构设计。

它是每位开发者成长道路上的稀缺资源。一轮又一轮的业务需求是烦琐而机械的，工程化基建和架构设计却是万丈高楼的根基，是巨型航母的引擎和发动机，是区分一般开发者和一流架构师的分水岭。因此，前端工程化基建和架构设计的价值对于个人、对于业务，更是不言而喻。

我理解的“前端工程化基建和架构设计”

我们知道，前端目前处在前所未有的地位高度：前端职位既收获着快速发展，也迎接着批量劣汰；前端技术有着与生俱来的混乱，也有着与之抗衡的规范。这都对前端工程化和基础建设提出了更高的挑战，对技术架构设计能力提出了更高的要求。

对于业务来说，在工程化基建当中：

团队并非一个人单打独斗，那么如何设计工作流程，如何打造一个众人皆赞的项目根基？

项目依赖纷繁复杂，如何做好依赖管理和公共库管理？

如何深入理解框架，真正做到框架的精通和技术选型的准确拿捏？

从最基本的网络请求库说起，如何设计一个稳定灵活的多端 Fetch 库？

如何借力 Low Code / No Code 技术，实现越来越智能的应用搭建方案？

如何统一中后台项目架构，实现跨业务线的产研效率提升？

如何开发设计一套适合业务的组件库，封装分层样式，最大限度做到复用，提升开发效率？

如何制定跨端方案，Write Once，Run Everywhere 是否真的可行？

如何处理各种模块化规范，以及精确做到代码拆分的最佳实践？

如何区分开发边界，比如前端如何更好地利用 Node.js 方案开疆扩土？

这都直接决定了前端的业务价值，体现了前端团队的技术能力。

那具体什么是我心中的“前端架构设计和工程化建设”呢？

我以身边常见的一些小细节作为例子：不管是菜鸟还是经验丰富的开发者，都有过被配置文件搞到焦头烂额的时候，一不小心就引起了命令行报错，编译不通过，终端上几行英文字母铺满 warning / error。

也许你可以通过搜索引擎找到临时解决方案，匆匆忙忙又重新回到业务开发中追赶工期。但报错的本源到底是什么，究竟什么是真正高效的解决方案？如果不深入探究，你很快还会因为类似的情况浪费大把时间，同时技术能力毫无提升。

再试想，对于开发时遇见的一些诡异问题，你也许删除一次 node_moudles ，并重新执行 npm install ，然后发现“重启大法”有时候真能奇迹般地解决问题。可是你对其中原理却鲜有探究，也不清楚这是否是一种优雅的解决方案。

又或者，为了实现一个通用功能（也许就是为了找到一个函数的参数用法），你不得不翻看项目中“屎山代码”，浪费了大把时间。可是面对历史代码，你却完全不敢重构，日积月累“历史”逐渐成为“天坑”，“屎山代码”成为业务桎梏。

基于多年对一线开发的观察，以及对人才成长的思考，我心中的“前端工程化基建和架构设计”不是简单的思维模式输出，不是纯粹阳春白雪的理论，也不是社区搜索即得的 Webpack 配置罗列和原理复述。而是从项目中的痛点提取基础建设的意义，从个人发展瓶颈总结工程化架构和底层设计，于是这门课程的内容呼之欲出。

如何学习前端工程化基建和架构设计？

事实上，前端工程化基建和架构设计相关话题在网上的内容少之又少。我几乎翻遍社区上所有的相关联课程，它们更多是对 Webpack 的配置讲解、相关源码的复制粘贴，或 npm 基础用法的列举等。

我一直在思考，什么样的内容能够帮助读者突破“会用”的层面，能从更高的角度看待问题。在本课程中，我主要从以下几个方向展开讲解：

前端工程化管理工具

现代化前端开发和架构生态

核心框架原理与代码设计模式

前端架构设计实战

前端全链路——Node.js 全栈开发

在第一部分前端工程化管理工具中，我会以 npm 和 Yarn 包管理工具切入工程化主题，以 Webpack 和 Vite 构建工具加深读者对工程化的理解。事实上，工具的背后是原理，因此我并不会枯燥地枚举某项工具的优缺点和基本使用方式，而是深入几项极具代表性的技术原理和演变，我认为只有吃透这些内容，才能真正理解工程化架构和工具选型。希望通过第一部分，你能够感知到如何刨根问底地学习，如何像一名架构师一样思考。

在第二部分现代化前端开发和架构生态中，我将一网打尽那些大部分开发者每天都会接触到，但很少真正理解的知识点。希望通过第二部分，你能够真正意识到：Webpack 工程师并不是写写配置文件那么简单，Babel 生态体系也不是使用 AST 技术玩转编译原理而已。这部分内容能够帮助你培养前端工程化和基础建设的整体思想，这些知识也是设计一个公共库、主导一项技术方案的基础。

第三部分我们一起来体验经典代码，设计模式和数据结构的艺术。通过再学习经典思想和剖析源码内容，相信你能够有新的收获。

在第四部分架构实战搭建中，我会一步一步带领大家从 0 到 1 实现一个完整的应用项目或公共库。这些工程实践并不是社区上泛滥的 Todo MVC，而是代表先进设计理念的现代化工程架构项目（比如设计实现前端 + 移动端离线包方案等）。同时在这个环节，我也会对编译和构建、部署和发布这一热门话题进行重点讨论。

最后一部分，我们以实战的方式，灵活运用并实践 Node.js。这一部分不会讲解 Node.js 的基础内容，这也就需要你先储备相关知识。我们的重点会放在 Node.js 的应用层面和建设发展话题上，比如我会带你设计并完成一个真正意义上的企业级网关，其中涉及网络知识、Node.js 理论知识、权限和代理知识等，这会是对前端开发能力的综合培养；再比如我会带你研究并实现一个完善可靠的 Node.js 服务系统，它可能涉及异步消息队列、数据存储，以及相关微服务等传统后端知识， 让你能够真正在团队中落地 Node.js 技术，不断开疆扩土。

总之，这门课程内容很多，干货满满。

客观来说，我绝不相信一本“武功秘籍”就能让每个人一路打怪升级、一步登天。但我更想把这个专栏当作一个和你交流的机会，输出自己经验积累的同时，能帮助到每一个人。你准备好了吗？来和我一起，像架构师一样思考。

对标阿里P7技术需求 + 每月大厂内推，6 个月助你斩获名企高薪 Offer。点此链接，快来领取！

-– ### 精选评论 ##### **见的瓦房： > 老师你好，前端基建和前端工程化有什么区别的，感觉这两个词没啥明显界限呢？ ######     讲师回复： >     其实基建和工程化都是一个比较模糊和宽泛的概念，在这个课程中：基建（基础建设）包括了工程化建设，是包含关系。它还包括了其他内容：比如公共代码设计，前端生态，甚至 NodeJS 内容。 举一个不是那么恰当的例子。盖房子，需要打地基，除此外，还需要更多建设，比如铸造外立面和主体结构设计，承重设计，脚手架搭建，这一系列，相当于基建；基建做好了，就可以在基建成果上去具体搬砖，具体盖楼层了。 基建过程中涉及到的：调度挖掘机，运输建筑材料，组织工人，这些就相当于工程化。用工程的手段，让各种环节串联起来（工程化的概念），这是基础建设的一部分。 或者这么说，如果没有一个好的工程化方案，各个环节和流程不能顺畅的串联起来，那么基础建设肯定是失败的；但是反过来，基础建设失败，不一定就是工程化环节有问题，也可能是代码管理有问题，公共逻辑抽象有问题。。。等等 ##### **看看： > 前端基建和业务有什么联系呢？ ######     讲师回复： >     前端基建其实也是为了辅助业务。从业务中抽离问题，用基建解决问题，从而辅助业务。同时需要提前考虑，不能被业务牵着走。 ##### *野： > 前端学习时长会感到迷茫，关键就在于眼界不开阔，见解太少，希望通过这个专栏的学习，养成正确的思考习惯~ ##### *添： > “试想，如果你资质平平，又缺少团队中“大牛”的指点，工作内容就是在已有项目中写几个页面或运营活动，如此往复技术无法提高，三四年后和应届校招生也许并无差别。”，简直对我就是灵魂暴击😭😭 ##### **伟： > 最近很迷茫 感觉很多东西都是泛泛而学，却没有真正掌握原理，一直在想着有机会在看有时间再看，成了麻醉自己的毒药，这次购买小册希望能跟着老师脚步，一步一步夯实走过的路。 ##### **生： > 之前就有关注老师的知乎专栏，社区能输出这些干货的真的不多，期待接下来的文章 ##### **宝： > 正好也在读书，感觉脉络清晰 ##### *哲： > 最近在看老师的前端开发核心知识进阶这本书，感觉对知识体系化有很大帮助 ##### *琴： > 前端4-5年了，还不如刚出的1-2年的，如何破局？感觉太多东西要学，又不知从何下手！ ##### **13458793957： > 工作1年多了，也挺迷茫的，开篇词直接灵魂深处啊！ ##### **飞： > 老师文字功底不错，期待后面精彩课程 ##### *强： > 文字功底很强，值得一看 ##### **骅： > 做了六年前端了，没做过什么大项目，也很少接触工程化，严重感到自己的能力和工作年前不匹配，学习起来也感到了吃力。也不知道自己前端这条路还能走多远，希望逼自己学完这门课能有一些头绪吧。 ##### **凌： > 老师说的太受用了，特别“我该如何避免相似的工作做三年，而不是具备了三年的工作经验？”这一句提问，直击痛点。真的是感觉自己工作4、5年，不如一个应届生的感觉。每天拿代码堆业务，每天做着“重复”的工作，毫无提升。即使给了一个0-1的机会，也只能做到0.6，没有达到过真正意义上的1。果断的入手老师的课程，希望跟着老师学下来能有实质的提升 ##### **融： > 打卡 ##### **圆： > 我天 我有老师的书 真有缘 ##### *前： > 老师，这个ppt是用什么做的？不像PowerPoint啊 ######     编辑回复： >     是keynote~ ##### **梁： > 国内公司大部分996，完全压榨个人时间，如果同时只知道天天写同样的业务代码，那么时间一长，就会觉得自己能力没有提高，3年工作，一年经验。只能靠自己挤时间，深入研究技术背后的原理，去深入研究学习，提高能力。别天天就知道加班，加班越多，老板换车、换房子越快。 ##### **波： > 直击心灵 ##### *航： > 真是，工作一年多了，也就是写原来的项目上面开发些新功能，写写页面而已，并没有感觉到自己技术上的提高，在碰到这门课程之前还是挺迷茫的 ##### 惠： > 很不错 ##### **6841： > 我有个疑问，老师开篇说了这么多，那要完善自身基建和架构方面的能力，就这一30节的专栏就能搞定吗，如果能否出个更详细的，什么形式都可以 ######     编辑回复： >     其实知识就是在不断积累中巩固的，不敢说30讲可以解决你所有问题，但是整个内容会帮你形成一个完整的图谱，利于你的工作和学习。另外Lucas老师的《React状态管理与同构实战》《前端开发核心知识进阶：从夯实基础到突破瓶颈》你也可以看看，会给你新的灵感~ ##### Lee2097： > 思路清晰 ##### hugh： > 看完开篇，很期待老师接下来的写作。相对于工作中应用业务的开发应该是轻松的，如果业务就让你深陷泥潭我觉得这种项目也不会是一个健康的项目。感谢老师的体悟，让我能继续坚持做自己要做的东西😀 ##### **圆： > 老师，开篇这个面试造火箭的确像你说的一样，只是粗略懂得一些知识。那真实的知道应该是啥 ######     讲师回复： >     基础建设和架构能力，排查解决问题能力，业务痛点突破能力 ##### **web前端： > graphql有没有权限机制？ ######     讲师回复： >     https://graphql.org/learn/authorization/这里面的内容会帮助你解决困惑 ##### **web前端： > 老师是通过什么途径知道这么多知识的，知道了知识，也想知道知识是怎么来的 ######     讲师回复： >     多看源码，多看技术博客，当然也离不开工作的积累