透过工程基建，架构有迹可循。你好，我是侯策（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 打造应用的基础建设、制定应用的工程化方案、实现应用的构建和发布流程、设计应用中公共方法和底层架构。系统性地研究这些知识，才能真正打通开发者“任督二脉”，实现个人和团队更大的价值。
-我把这样的内容总结定义为：前端工程化基建和架构设计。
-它是每位开发者成长道路上的稀缺资源。一轮又一轮的业务需求是烦琐而机械的，工程化基建和架构设计却是万丈高楼的根基，是巨型航母的引擎和发动机，是区分一般开发者和一流架构师的分水岭。因此，前端工程化基建和架构设计的价值对于个人、对于业务，更是不言而喻。
-我们知道，前端目前处在前所未有的地位高度：前端职位既收获着快速发展，也迎接着批量劣汰；前端技术有着与生俱来的混乱，也有着与之抗衡的规范。这都对前端工程化和基础建设提出了更高的挑战，对技术架构设计能力提出了更高的要求。
对于业务来说，在工程化基建当中：
如何区分开发边界，比如前端如何更好地利用 Node.js 方案开疆扩土？
这都直接决定了前端的业务价值，体现了前端团队的技术能力。
-那具体什么是我心中的“前端架构设计和工程化建设”呢？
-我以身边常见的一些小细节作为例子：不管是菜鸟还是经验丰富的开发者，都有过被配置文件搞到焦头烂额的时候，一不小心就引起了命令行报错，编译不通过，终端上几行英文字母铺满 warning / error。
-也许你可以通过搜索引擎找到临时解决方案，匆匆忙忙又重新回到业务开发中追赶工期。但报错的本源到底是什么，究竟什么是真正高效的解决方案？如果不深入探究，你很快还会因为类似的情况浪费大把时间，同时技术能力毫无提升。
-再试想，对于开发时遇见的一些诡异问题，你也许删除一次node_moudles，并重新执行npm install，然后发现“重启大法”有时候真能奇迹般地解决问题。可是你对其中原理却鲜有探究，也不清楚这是否是一种优雅的解决方案。
又或者，为了实现一个通用功能（也许就是为了找到一个函数的参数用法），你不得不翻看项目中“屎山代码”，浪费了大把时间。可是面对历史代码，你却完全不敢重构，日积月累“历史”逐渐成为“天坑”，“屎山代码”成为业务桎梏。
-基于多年对一线开发的观察，以及对人才成长的思考，我心中的“前端工程化基建和架构设计”不是简单的思维模式输出，不是纯粹阳春白雪的理论，也不是社区搜索即得的 Webpack 配置罗列和原理复述。而是从项目中的痛点提取基础建设的意义，从个人发展瓶颈总结工程化架构和底层设计，于是这门课程的内容呼之欲出。
+事实上，前端工程化基建和架构设计相关话题在网上的内容少之又少。我几乎翻遍社区上所有的相关联课程，它们更多是对 Webpack 的配置讲解、相关源码的复制粘贴，或 npm 基础用法的列举等。
-我一直在思考，什么样的内容能够帮助读者突破“会用”的层面，能从更高的角度看待问题。在本课程中，我主要从以下几个方向展开讲解：
前端工程化管理工具
@@ -126,29 +54,17 @@前端全链路——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 内容。 举一个不是那么恰当的例子。盖房子，需要打地基，除此外，还需要更多建设，比如铸造外立面和主体结构设计，承重设计，脚手架搭建，这一系列，相当于基建；基建做好了，就可以在基建成果上去具体搬砖，具体盖楼层了。 @@ -157,99 +73,130 @@ 或者这么说，如果没有一个好的工程化方案，各个环节和流程不能顺畅的串联起来，那么基础建设肯定是失败的；但是反过来，基础建设失败，不一定就是工程化环节有问题，也可能是代码管理有问题，公共逻辑抽象有问题。。。等等 -##### **看看： +##### \*\*看看 + > 前端基建和业务有什么联系呢？ - ###### 讲师回复： +###### 讲师回复 + > 前端基建其实也是为了辅助业务。从业务中抽离问题，用基建解决问题，从而辅助业务。同时需要提前考虑，不能被业务牵着走。 -##### *野： +##### \*野 + > 前端学习时长会感到迷茫，关键就在于眼界不开阔，见解太少，希望通过这个专栏的学习，养成正确的思考习惯~ -##### *添： -> “试想，如果你资质平平，又缺少团队中“大牛”的指点，工作内容就是在已有项目中写几个页面或运营活动，如此往复技术无法提高，三四年后和应届校招生也许并无差别。”，简直对我就是灵魂暴击😭😭 +##### \*添 + +> “试想，如果你资质平平，又缺少团队中“大牛”的指点，工作内容就是在已有项目中写几个页面或运营活动，如此往复技术无法提高，三四年后和应届校招生也许并无差别。”，简直对我就是灵魂暴击 😭😭 + +##### \*\*伟 -##### **伟： > 最近很迷茫 感觉很多东西都是泛泛而学，却没有真正掌握原理，一直在想着有机会在看有时间再看，成了麻醉自己的毒药，这次购买小册希望能跟着老师脚步，一步一步夯实走过的路。 -##### **生： +##### \*\*生 + > 之前就有关注老师的知乎专栏，社区能输出这些干货的真的不多，期待接下来的文章 -##### **宝： +##### \*\*宝 + > 正好也在读书，感觉脉络清晰 -##### *哲： +##### \*哲 + > 最近在看老师的前端开发核心知识进阶这本书，感觉对知识体系化有很大帮助 -##### *琴： -> 前端4-5年了，还不如刚出的1-2年的，如何破局？感觉太多东西要学，又不知从何下手！ +##### \*琴 + +> 前端 4-5 年了，还不如刚出的 1-2 年的，如何破局？感觉太多东西要学，又不知从何下手！ -##### **13458793957： -> 工作1年多了，也挺迷茫的，开篇词直接灵魂深处啊！ +##### \*\*13458793957 + +> 工作 1 年多了，也挺迷茫的，开篇词直接灵魂深处啊！ + +##### \*\*飞 -##### **飞： > 老师文字功底不错，期待后面精彩课程 -##### *强： +##### \*强 + > 文字功底很强，值得一看 -##### **骅： +##### \*\*骅 + > 做了六年前端了，没做过什么大项目，也很少接触工程化，严重感到自己的能力和工作年前不匹配，学习起来也感到了吃力。也不知道自己前端这条路还能走多远，希望逼自己学完这门课能有一些头绪吧。 -##### **凌： -> 老师说的太受用了，特别“我该如何避免相似的工作做三年，而不是具备了三年的工作经验？”这一句提问，直击痛点。真的是感觉自己工作4、5年，不如一个应届生的感觉。每天拿代码堆业务，每天做着“重复”的工作，毫无提升。即使给了一个0-1的机会，也只能做到0.6，没有达到过真正意义上的1。果断的入手老师的课程，希望跟着老师学下来能有实质的提升 +##### \*\*凌 + +> 老师说的太受用了，特别“我该如何避免相似的工作做三年，而不是具备了三年的工作经验？”这一句提问，直击痛点。真的是感觉自己工作 4、5 年，不如一个应届生的感觉。每天拿代码堆业务，每天做着“重复”的工作，毫无提升。即使给了一个 0-1 的机会，也只能做到 0.6，没有达到过真正意义上的 1。果断的入手老师的课程，希望跟着老师学下来能有实质的提升 + +##### \*\*融 -##### **融： > 打卡 -##### **圆： +##### \*\*圆 + > 我天 我有老师的书 真有缘 -##### *前： -> 老师，这个ppt是用什么做的？不像PowerPoint啊 +##### \*前 + +> 老师，这个 ppt 是用什么做的？不像 PowerPoint 啊 + +###### 编辑回复 + +> 是 keynote~ - ###### 编辑回复： -> 是keynote~ +##### \*\*梁 -##### **梁： -> 国内公司大部分996，完全压榨个人时间，如果同时只知道天天写同样的业务代码，那么时间一长，就会觉得自己能力没有提高，3年工作，一年经验。只能靠自己挤时间，深入研究技术背后的原理，去深入研究学习，提高能力。别天天就知道加班，加班越多，老板换车、换房子越快。 +> 国内公司大部分 996，完全压榨个人时间，如果同时只知道天天写同样的业务代码，那么时间一长，就会觉得自己能力没有提高，3 年工作，一年经验。只能靠自己挤时间，深入研究技术背后的原理，去深入研究学习，提高能力。别天天就知道加班，加班越多，老板换车、换房子越快。 + +##### \*\*波 -##### **波： > 直击心灵 -##### *航： +##### \*航 + > 真是，工作一年多了，也就是写原来的项目上面开发些新功能，写写页面而已，并没有感觉到自己技术上的提高，在碰到这门课程之前还是挺迷茫的 -##### 惠： +##### 惠 + > 很不错 -##### **6841： -> 我有个疑问，老师开篇说了这么多，那要完善自身基建和架构方面的能力，就这一30节的专栏就能搞定吗，如果能否出个更详细的，什么形式都可以 +##### \*\*6841 + +> 我有个疑问，老师开篇说了这么多，那要完善自身基建和架构方面的能力，就这一 30 节的专栏就能搞定吗，如果能否出个更详细的，什么形式都可以 - ###### 编辑回复： -> 其实知识就是在不断积累中巩固的，不敢说30讲可以解决你所有问题，但是整个内容会帮你形成一个完整的图谱，利于你的工作和学习。另外Lucas老师的《React状态管理与同构实战》《前端开发核心知识进阶：从夯实基础到突破瓶颈》你也可以看看，会给你新的灵感~ +###### 编辑回复 + +> 其实知识就是在不断积累中巩固的，不敢说 30 讲可以解决你所有问题，但是整个内容会帮你形成一个完整的图谱，利于你的工作和学习。另外 Lucas 老师的《React 状态管理与同构实战》《前端开发核心知识进阶：从夯实基础到突破瓶颈》你也可以看看，会给你新的灵感~ + +##### Lee2097 -##### Lee2097： > 思路清晰 -##### hugh： -> 看完开篇，很期待老师接下来的写作。相对于工作中应用业务的开发应该是轻松的，如果业务就让你深陷泥潭我觉得这种项目也不会是一个健康的项目。感谢老师的体悟，让我能继续坚持做自己要做的东西😀 +##### hugh + +> 看完开篇，很期待老师接下来的写作。相对于工作中应用业务的开发应该是轻松的，如果业务就让你深陷泥潭我觉得这种项目也不会是一个健康的项目。感谢老师的体悟，让我能继续坚持做自己要做的东西 😀 + +##### \*\*圆 -##### **圆： > 老师，开篇这个面试造火箭的确像你说的一样，只是粗略懂得一些知识。那真实的知道应该是啥 - ###### 讲师回复： +###### 讲师回复 + > 基础建设和架构能力，排查解决问题能力，业务痛点突破能力 -##### **web前端： -> graphql有没有权限机制？ +##### \*\*web 前端 + +> graphql 有没有权限机制？ + +###### 讲师回复 - ###### 讲师回复： -> https://graphql.org/learn/authorization/这里面的内容会帮助你解决困惑 +>