推荐 | 从 0 到 1 落地前端工程化！

近些年来，随着前端项目复杂度的不断提高， 前端工程化 被越来越多的公司与开发者所重视。

从业务层面来说， 前端工程化俨然已成为一线互联网前端团队的标配 ，稍具规模的团队都会根据自身业务设计出一套符合当前业务需求的前端架构。对前端开发者来说， 前端工程化已逐渐成为初、中级前端与资深前端的分界线 。例如很多大厂的初、中级前端只负责编写业务代码，而资深前端则会使用前端工程化，去接触更高层次的前端架构设计，向技术管理岗晋升。

这也是为什么很多前端开发者已经熟练使用 react/vue/next/nust/webpack/koa 等前端框架，但升职加薪依然遥不可及。因此 前端开发者想要突破工作局限性，实现跳跃式涨薪，掌握前端工程化必不可少！

前端工程化是什么

说了这么多，前端工程化到底是什么呢？前端工程化是指使用软件工程的技术与方法对前端开发的技术、工具、流程、经验、方案等指标标准化，它具备模块化、组件化、规范化、自动化四大特性，主要作用就是 降低成本 与 提升效率 。

• 模块化 是前端工程化的重中之重，它在 前端工程化 上的表现就是 在文件层面上拆分、组装代码与资源 ，具体来说就是将一个大文件拆分为相互依赖的小文件，再统一拼装与加载。

• 组件化 是前端工程化的重要基础， 着重在功能层面上拆分、组装交互与设计 ， 具体来说就是将一个具备通用功能的交互设计划分为模板、样式和逻辑组成的功能单元，实现代码高效复用，提升开发效率。

• 规范化 是前端工程化的重要部分，主要作用是 将松散的规范通过指定标准凝聚在一起 ，将所有工作流程标准化，协同所有开发者以标准化的方式去定义工作流程，每一个成熟的前端团队都有一套身经百战的规范化方案。

• 自动化 指将一系列繁琐重复的工程工序交由程序根据预设脚本自动处理，整个工作流程无需人工参与， 解放开发者双手让其更专注业务需求的开发 。

很多同学在不了解 前端工程化 前，遇到以下情况经常不知所措：

• 构建配置、打包配置、公共组件、工具函数等代码片段，每次新开项目都要复制粘贴；

• 团队成员的编码风格大相径庭，导致从仓库拉取下来的代码运行起来令控制台一片红；

• 团队协作的规范、环境、模块、仓库和文档，太多基建措施导致团队新成员无从入手；

• 随着需求迭代引起项目结构与工程文件不断变化，处理不当让项目直接走向重构道路。

事实上，只要将前端工程化的开发思维与解决方案应用到项目中，利用好它的优势，就能轻松实现这些需求，为业务降本增效。

总之， 前端工程化不是某个具体的工具，而是对项目的整体架构与整体规划，使我们能在未来可判时间内动态规划项目的发展走向，以提升整个项目对用户的服务周期 。学习前端工程化不仅能理解清楚一个项目的完整流程，遇到困难也能在复杂的流程中快速定位并解决问题，还能根据自身知识储备制定一些可扩展流程或预见项目的未来发展方向。

如何系统学习前端工程化？

但是，想要系统学习前端工程化不是一件容易的事情。看到这，有些同学可能会说：“前端工程化不就是封装组件库吗？那我也会前端工程化！”

前端工程化可不只是会封装组件库就可以了。首先，我们要有 明确前后端分离的任务能力 。简而言之，就是要能一眼看出该任务属于前端还是后端，划分好前后端的职责更利于前端工程化的接入。这也是基于前端工程化解决问题的基础。其次，我们要 掌握前端工程化的四大核心特性 ，模块化、组件化、规范化和自动化。知道它们是怎么实现的，它们各自的标准是什么，因为所有前端工作流程都离不开这些核心内容。

虽然很多社区也都有前端工程化相关文章教程，但它们只针对前端工程化的某个技能，零零星星的知识点与断层式的学习很难充分实践前端工程化。

基于此，JowayYoung 将这些经验总结了下来，希望能在这本小册中与你分享。为了让前端工程化小册适合更多开发者， JowayYoung 会以小白的身份，与你一起深入工程的各个环节，带你走完前端工程化落地的全过程 。

具体来说，小册主要分为 6 大模块 ：

总之，在学习具体技能的同时我们要重视工程化的解决思路，灵活运用它对我们的工作能力与自身竞争力都会有很大的提升。

赶紧戳链接 《从 0 到 1 落地前工程化》 一起加入学习吧～