🎙️作者介绍

平时热衷于将自己的经验和踩过的坑跟大家分享，希望能给大家带来帮助。

💡小册背景

现在的前端开发已经和 5 年前的前端开发有着截然不同的要求。在 5 年前我刚毕业找第一份工作的时候就问了我一个问题：“页面上有一个 button，你能把上面的文案给改了吗？” 相信 5 年后的今天，你只会修改一个 button 的文案是找不到工作的。时至今日，大家在找工作的时候基础问题都是：“Vue 实现双向绑定的原理是什么？Webpack 是怎么进行打包的？plugin 和 loader 的区别是什么？……”

前端开发最开始只是嵌入在模板引擎中对页面样式进行修改再加上一些简单的 DOM 操作，后来慢慢发展为可以处理复杂交互和业务逻辑。特别是随着 Ajax、Node 等新技术的发展，前端开发也逐渐具备了开发中大型业务的能力，这无疑标志着前端已经步入工程化的阶段。

这也意味着对我们的要求已经不再是“前端开发”，而是更高的 “前端工程师”，时代要求我们要有工程化的思维和工程化解决问题的能力。

试想一下，某一天一个线上问题反馈说有的用户出现了白屏，你一通查找，结果发现是一个最新的语法在旧的浏览器上不支持。但是明明你的项目中用了 Babel 呀！打开编辑器，对着 babel.config.js 文件看了半天也没看出来个所以然来。于是你又打开 Google 搜索“怎么配置 Babel？”，会搜索到要安装一大堆 npm 包，配置 transform-runtime、babel-polyfill……按照第一篇文章配置之后，发现不生效，又换一篇文章，接着更改配置。终于，在快则 2 个小时，慢则一天的尝试之后，终于解决白屏问题了！此时，虽然你也不知道是改动的哪一行代码生效了，也不知道为什么要这么配置，但是知道要赶紧按下保存按钮，生怕修改了配置又出问题！并且祈祷下次千万不要有类似的问题报过来了！！ 然后又匆匆忙忙重新回到项目中赶工期，至于出问题的原因，下次一定……下次一定……

上面这个场景你是不是很熟悉？估计也戳到了很多技术人的痛处。这可能就是我们某些技术人开发的日常，被繁琐的 webpack 或者其他的 babel 、ts 的配置文件搞得一头雾水。总结来说，就是：

• 不知道怎么做技术选型，盲目从众跟风；
• 不知道如何做好依赖管理和公共库管理；
• 对项目安装的依赖不清楚其目的，别人有我也要有(〃＞皿＜)；
• 项目的基础配置基本靠 copy；
• 项目配置出了问题基本靠 Google 和盲试，要不就是重启大法；
• ……

以上的种种现象说明：你前端工程化的知识欠缺。

🏠小册设置思路和框架

本小册将着重就现代前端开发，来详细介绍前端工程化的相关内容，并且带领大家用专业知识来解决前端工程问题，包括如何进行模块化、如何设计组件、如何提高代码的复用性、如何提升打包效率、如何做性能优化等。毕竟，现如今，只是会 HTML、CSS、JS 写写静态页面的时代已经过去了。

本小册主要是从开发、构建和部署这三大阶段来构思的，整体的思维导图可参考如下：

🤔你会学到什么？

期望你学习完本小册之后，能够有以下收获：

• 夯实基础，构建前端工程化领域相关知识体系；
• 用工程化的思维助力学习和工作，提升开发效率；
• 学会系统化制定前端基础建设的解决方案；
• 突破“会用 API”，从本质出发，剖析问题的底层原理。

🤗适宜谁学？

本小册适合工作 1～3 年的初级前端工程师。比如，存在以下这些“症状”：

• 对前端工程化知识欠缺，需要查漏补缺；
• 平时大部分时间在开发业务代码，想要从千篇一律的业务需求中抽身出来，提升自己；
• 想要自己从 0 到 1 搭建应用的基础建设、制定系统化解决方案。

所以，你是想当一个 engineer，还是只是想当一名 developer 呢？

期待你加入本小册的学习，也希望你能坚持学下去，书山有路勤为径，学海无涯苦作舟，我们一起“积跬步，至千里”，最终实现“将工程化和前端开发结合，让开发事半功倍”。

🛒 如何购买本小册？

原价 ¥29.9，上新特惠，限时 6 折，算下来一杯奶茶钱都不到，很是划算哒。赶紧点击下方图片或者扫描海报二维码，一起加入学习吧！