![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
透视前端工程化
透过脚手架搭建,探究背后的工程化思想
优惠券已抵扣
余额抵扣
还需支付
¥49.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
weixin_48109878
这个作者很懒,什么都没留下…
展开
-
开篇:到底什么是前端工程化?
前端工程化是现代前端的必备技能Web 前端这几年进化速度之快让人咂舌。很多前端工程师都不禁吐槽“学不动了”。如今已经不是 HTML、CSS、JS 前端三剑客仗剑走天下的时代了。以笔者的亲身经历举例。笔者在 2011 年左右进入前端这个行业。当时工作的主要内容是,将设计稿切图转成静态页面,然后用 jQuery 插件实现一些页面的轮播图、跑马灯等交互效果。最后使用后端的模板语言如 smart、ve...原创 2020-09-22 12:01:04 · 225 阅读 · 0 评论 -
第 01 课:模板功能设计
1 项目模板我们的项目框架都是基于项目模板生成的。学过 JS 的知道:function Person(name = 'ant') { this.name = name;}let man = new Person();这里 Person 是 man 的原型对象。同样项目模板相当于对象 Person,具体的项目相当于 man。通过项目模板,我们可以事先将项目所需要的功能点定义好,...原创 2020-09-22 12:01:02 · 215 阅读 · 0 评论 -
第 02 课:Webpack 基本介绍
1 Webpack 的特点图片来源于网络Webpack 是一款强大的打包工具。在 Webpack 中一切皆模块。Webpack 官网的 banner 图完美地诠释了这一理念。Webpack 从一个入口文件开始递归地分析模块的依赖关系,根据依赖关系将这些模块打包成一个或多个文件。目前几乎所有的前端构建和开发都是采用 Webpack 。因为 Webpack 有强大的社区生态,每月 Webpac...原创 2020-09-22 12:01:01 · 108 阅读 · 0 评论 -
第 03 课:搭建项目模板框架
因为我们的脚手架是基于 Vue 开发框架的,所以本节课程中,我们将以 Vue 为基础来搭建起来我们的项目框架。使用 React、Angular 的读者可以对应替换调整。项目初始化创建项目目录,并执行 npm 初始化:mkdir vueTpl & npm init -y创建了项目模板目录 vueTpl,在目录下有一个 npm 的配置文件 package.json,其内容如下:{...原创 2020-09-22 12:00:59 · 240 阅读 · 0 评论 -
第 04 课:前端模块化解决方案
1 模块化出现的背景(图片来源于网络)在 Web 发展的早期,前端还没有作为一个单独的工种分离出来,JavaScript 的作用也只是在 HTML 上 用来实现简单的表单验证,到后来无非实现一些轮播图等简单的视觉效果。一句话来讲,很长时间以来我们的前端很简单,JS 代码也很少。随着 Web 的发展,Web 应用越来越复杂,诸如淘宝、京东、美团等 Web 应用,其复杂度是极高的。前端的交互、...原创 2020-09-22 12:00:58 · 107 阅读 · 0 评论 -
第 05 课:搭建本地开发环境
背景在前面的课程中,我们已经完成了项目模板的整体框架了,但是在开发过程中还有很多地方需要补充和完善以提高开发效率。比如:手动执行构建。每次代码发生变动后,我们都需要手动执行以下构建命令。手动刷新浏览器。构建完成后,如果我们需要在页面中验证效果,需要手动刷新。无法精确定位错误。代码构建完成后,源代码被打包成一个 bundle,如果代码中出错,无法精确定位到出错代码的位置。自动构建每次...原创 2020-09-22 12:00:56 · 108 阅读 · 0 评论 -
第 06 课:搭建本地 Mock 服务
背景前后端分离的协作模式下,前后端之间的数据传输都是基于 HTTP 接口实现。显然前端的开发是依赖后端接口实现的。在讲求快速迭代的互联网公司这种串行的等待肯定是不会出现的。前后端约定好接口的出参和入参之后,前端数据模拟(mock)就很有必要了。前端基于接口文档自己模拟一份假数据作为前端的数据源。后端按照约定的文档实现接口功能。待接口完全实现之后,前后端切换到真实的接口进行联调。显然,mock 对...原创 2020-09-22 12:00:55 · 243 阅读 · 0 评论 -
第 07 课:引入代码检查工具
背景在多人或者团队共同开发一个项目的时候,由于每个人的习惯和能力不同,产出的代码可能风格各异,日积月累整个工程的代码乱作一团,可维护性很差。因此需要共同遵守一定的代码书写规范,来提高工程的可维护性。对于规范我们不能寄希望于大家自觉遵守,因为每个人都可能由于各种原因导致代码规范最终无法落地执行。作为提供给整个团队使用的项目模板,我们希望通过从工具层面强制大家按照统一的规范去编码。本节课程将介绍如...原创 2020-09-22 12:00:53 · 110 阅读 · 0 评论 -
第 08 课:自动生成雪碧图
背景在开发过程中,可能存在大量的小图片和小图标,虽然每张图的尺寸不大,但每次都需要发起一次 HTTP 请求,从性能优化的角度来说是不合理的。常见的做法是我们将多个小图片拼成一张大图(前端界叫做雪碧图或 CSS Sprite),然后通过 CSS 的 background-position 来控制图片的展示,这样可以极大减少 HTTP 请求次数。我们可以手动拼装雪碧图,但这样效率实在太低。本节课程将...原创 2020-09-22 12:00:52 · 647 阅读 · 0 评论 -
第 09 课:根据浏览器构建
背景在 Babel 等转译工具的帮助下,我们可以在项目中使用所有的 ES6+ 的语言特性,但是我们最终交付的代码仍旧需要转译成 ES5 代码以兼容旧浏览器。现在所有的现代浏览器都已经很好地支持了 ES6+ 的语言特性,为了那很小的一部分旧浏览器,我们却不得不强迫所有的现代浏览器运行转译后的冗长、执行效率低下的 ES5 代码。为了更好的用户体验,作为开发者我们有责任去解决这个问题。1 特性检查...原创 2020-09-22 12:00:50 · 42 阅读 · 0 评论 -
第 10 课:根据环境构建
背景开发环境和生产环境的构建目标差异很大。在开发环境中,我们需要考虑更多的是开发和调试的便利性。比如开发环节我们需要一个本地服务器来承载我们的页面和资源,最好可以做到修改代码,实时看到页面刷新。当然如果有热加载的功能,代码改动页面局部刷新就更完美了。当我们调试代码的时候,我们希望调试器能方便地定位到源代码所在的行列号,而不是定位到已被压缩工具处理的面目全非的代码行列号。生产环境中,我们考虑更...原创 2020-09-22 12:00:48 · 72 阅读 · 0 评论 -
第 11 课:集成移动端调试工具
背景随着移动互联网的普及,Web 前端开发者的工作发生了根本的变化,开发的东西基本上以纯移动端页面、微信生态的 H5、APP 混合的 H5 页面为主。在 PC 时代给开发者带来巨大帮助的调试工具,如 Chrome 的调试器、火狐的调试器,在移动互联时代有点力不从心了。为了与移动 Web 开发相配套,移动端的调试工具是开发者最渴望拥有的武器。远程调试工具从移动端的 Web 开发诞生至今,也相继...原创 2020-09-22 12:00:46 · 95 阅读 · 0 评论 -
第 12 课:引入单元测试
背景长期以来,单元测试在前端开发的普及度并不高,大多数的前端工程师并没有注意和重视。但是随着前端应用的复杂化,以及模块之间高内聚低耦合的诉求,单元测试在前端应用中显得很有必要。良好的单元测试在保证工程的质量和可维护性的同时,还可以起到项目文档的作用。本文我们一起学习下如何在 Vue 的前端工程中进行单元测试。读者在跟随本文进行代码实操之前,先将代码从 GitHub 上下载下来熟悉一下目录结构,...原创 2020-09-22 12:00:45 · 93 阅读 · 0 评论 -
第 13 课:引入 e2e 测试
背景e2e(end to end)测试也叫功能测试,属于黑盒测试。与单元测试不同,e2e 测试是站在用户的角度上,通过编写测试用例模拟用户的操作。例如自动打开浏览器,测试 dom 元素是否正常渲染,页面是否正常跳转,Ajax 请求是否符合预期。e2e 测试的关注点是功能是否可用,不关注代码细节,开发者可以改变代码的实现方式,用在代码重构后的功能验证非常合适。本篇将带领大家在前端 Vue 项目中...原创 2020-09-22 12:00:43 · 375 阅读 · 0 评论 -
第 14 课:Webpack 构建性能优化
背景应用越复杂,代码量越大,编译的时候所耗费的时间也是越长。在开发阶段,如果编译时间太长,一个小小的变动都要等待很长时间,开发效率非常低。在我们的搭建脚手架的过程中,虽然代码量还不是太大,但也能看到热替换的时候,速度就非常慢。本节我们一起优化 Webpack 的构建性能,提升一下开发体验。使用缓存Webpack 的 cache 配置开启 cache 的情况下,Webpack 会缓存模块和生...原创 2020-09-22 12:00:41 · 77 阅读 · 0 评论 -
第 15 课:添加部署功能
背景代码开发完之后,剩下的最后一步就是将代码部署到服务器了。前后端分离的情况下,前端独立进行发布。为了避免手动通过 FTP 上传前端资源,我们介绍一下两种方式,自动化地完成前端资源的发布。1 部署到 ECS1.1 scp 命令实现前端部署现在很多公司都在使用云服务器,比如阿里云的 ECS。ECS 类似于咱们普通的服务器,如果你除了单纯存放前端的静态资源之外,还需要使用 Node.js 对后...原创 2020-09-22 12:00:39 · 169 阅读 · 0 评论 -
第 16 课:聚合项目配置并模板化
背景通过前面的学习,我们的项目模板功能已经完成了。剩下的工作还有两点。第一,将一些用户在开发中需要频繁改动的地方抽离出来,聚合到配置文件中;第二,使用 handlebars 改写项目模板。抽离配置项我们在根目录下新建一个配置文件 app.config.js,来聚合用户自定义的配置项:module.exports = { // 配置dll入口 dllEntry: {}, // ...原创 2020-09-22 12:00:38 · 140 阅读 · 0 评论 -
第 17 课:cli 功能设计(上)
背景相信前端小伙伴们都使用过诸如 vue-cli,create-react-app 等命令行工具。经过前面课程的学习,已经完成了项目模板的搭建,我们实现脚手架工具的第一步已经完成。接下来我们来实现一个 cli 命令,通过 cli 命令快速实现项目的初始化。命令行工作流程我们给命令行工具命名为 kgt-cli,下图是 kgt-cli 的工作流程图:用户在终端中运行 kgt init te...原创 2020-09-22 12:00:36 · 164 阅读 · 0 评论 -
第 18 课:cli 功能设计(下)
背景上一节课程,我们完成了命令行工具的初始化,并介绍了 kgt-cli 的工作流程。本节课我们重点来讲解下载、模板渲染等功能的实现。kgt-init判断用户指定的项目生成目录是否为当前目录或该目录已经存在。如果是,执行 5,否则执行 2。执行 run 方法,判断用户指定的模板是否为本地模板。如果是,执行 3,否则执行 4。执行 generate 方法创建项目。执行 download...原创 2020-09-22 12:00:34 · 140 阅读 · 0 评论 -
结语:开放的心态才是更高阶的工程化
写作心路历程从 2019 年 1 月 22 日到 2019 年 7 月 30 日,历经半年的时间,终于完成了《透视前端工程化》课程的写作。从零开始完成一个脚手架的搭建,对于我来讲可能算不上一件困难的事,但是把这个实现过程总结成课程,去教会更多的人却对我来说是一个极大的挑战。这也再次证明了,当学生比当老师容易,当球员比当教练容易。大纲的编写相当于提前将课程的内容规划好了。但是从课程大纲的确定到课...原创 2020-09-22 12:00:32 · 55 阅读 · 0 评论