F++：别忽略前端工程化的部署与测试

时间 2019-11-06

标签忽略前端工程部署测试繁體版

原文原文链接

写在前面

不知不觉时间已来到2017年的4月，不知道2016年的前端技术概念爆炸，是吓走了技术小白，仍是让技术大牛多加几天班呢。However，Web前端这个领域并未热度退减，从学校毕业走进这个行业的人不可胜数，后端终于不鄙视切图仔，固然切图仔也再也不只是个切图仔，甚至有从非互联网转过来学前端的。javascript

在面试前端工程师的时候，相信各位面试官都或多或少的会说起一个前端领域很是热的话题——前端工程化。我面试的时候都会问应聘者：“说说你对前端工程化的理解？”你们第一反应都是想到自动化构建相关的内容，grunt、gulp、webpack等等，编译ES6啊，编译Sass啊，分割代码啊，合成雪碧图啊……而后就是前端以往刀耕火种，如今有了更多的规范和流程等等。php

面试老是有点紧张我能理解，但面试了几十我的，尚未人说起前端工程化中很重要的两个方面：部署和测试。css

在这里我很是感激我是软件工程专业毕业的，我很天然就会发现前端开发流程中有哪些地方还很“原始”。确实，如今前端构建工具普遍应用于执行一些自动化的构建任务，但实际上，它们能作更多，nodejs的发展也支持咱们能作更多，例如自动化部署和自动化测试。html

所以，我想说的是：别忽略前端工程化的部署和测试。前端

什么是软件工程

维基百科 - 软件工程
研究和应用如何以系统性的、规范化的、可定量的过程化方法去开发和维护软件，以及如何把通过时间考验而证实正确的管理技术和当前可以获得的最好的技术方法结合起来的学科。vue

实际上软件工程和其余的工程有不少相似的地方，只是由于目前你们都还聚焦于核心技术和功能的实现上，因此才会相对地忽略工程的其余部分。绝不夸张的说，作一个Web App，流程上应该和建一座桥梁是基本一致的：从前期的设计、逻辑的验证、需求的制定，到实现方案的落地执行、执行过程当中的修正（debug）、部件的构建，到最后的总体测试、验收等等。好吧，面对现实，大多数的软件都是在缺乏充分的需求、过程当中系统的迭代管理以及后期的测试的环境下诞生的。java

“上线是第一任务，有bug的话在后面的版本更新中解决吧！”node

“因此说土木工程的PR和软件工程的PR，是不能互换的，呵呵。”webpack

我只是想对这个浮躁的IT界发表个人一点小意见：软件也是工程，就由于桥梁塌了会危及生命，而软件崩了大不了debug重启，你们就不重视软件的工程化问题了吗？git

什么是前端工程化

“什么是前端工程化”，“为何要有前端工程化”，“前端工程化的好处”。这些问题已经有大把的好文章可供阅读。在这里简单讲述一下前端工程化的内容。

前端工程能够说是软件工程的一个细分领域，流程类似，但特色鲜明。先来讲说前端，固然我指的是Web前端，相比其余方向的技术有什么特色：

提及前端，至少涉及3种语言。（html，css，javascript）
前端代码在用户端运行时增量安装。（摘自张云龙的文章，资源和代码都是增量下载的）
最基本的情况下，前端代码不须要编译（即改即生效）。
浏览器即运行环境，很是易于调试和开发（不须要simulator）。

基于上面的情况，最原始的项目只须要一个index.html，只要你的电脑有一个正常的浏览器，就能开工了。上面说的是原始的状况，如今，咱们的前端项目NB起来了，引入了大量的新技术。咱们须要编译了，ES6咱们用Babel；咱们开始写单元测试了，须要跑测试的脚本了；咱们前端团队人员增多了，须要更好的协做和维护；咱们的资源须要处理成多个不一样的版本去适应不一样的终端，咱们的资源须要被打成不一样的包……这时候，就能够开始讨论前端工程化的内容了。

前端工程化须要解决如下问题：

规范性，文本编辑器很方便，但语法提示，风格检查会迫使你去将本身的IDE打造起来的。
资源管理，前端最头疼的事情，所幸咱们有Webpack！
自动化任务，debug、build、deploy、test、documentation等。
模块化开发，划分好模块老是便于团队协做，使软件逻辑清晰。
组件化开发，也许你想说这是框架负责的，实际上前端工程化的支持才是最重要的。

到这里，你可能会发现，你最近在捣鼓的一些事情，有很多是在解决前端工程化的问题的。

你给你的编辑器例如SublimeText配置了linter，装了一堆辅助开发的插件，语法补全、路径提示，甚至取色器等等，因而你的编辑器更像一个IDE了；你的团队都使用Airbnb的标准，代码风格总算是获得了统一了；你开始使用grunt、gulp、webpack等等来完成一些自动化构建的任务，压缩、编译、混淆代码的工做都交给它们好了；为了首屏大家也许会选择使用code spliting达到按需加载……

废话太多了，下面有一大波技术文章供你们学习。总而言之，前端工程化不是简单的指自动化构建，要是你面试的时候这么回答我会很失望的。

其余公司的前端工程化总结：
前端工程化：云构建 - 淘宝前端团队FED
咱们是如何作好前端工程化和静态资源管理 - 京东凹凸实验室
 前端工程化开发方案app-proto - 美团点评技术团队

部署和测试也很重要

先说说部署

介绍完前端工程化后，你们想必对前端工程化有一个相对完整的概念了，而在文章的开头我说了，但愿你们不要忽略部署和测试的环节。会使用构建工具完成一些自动化任务不等于实现了前端工程化，你还须要考虑代码部署和测试的部分。下面连接中张云龙的回答让我受益很大，是这个回答启发我迫使本身要更加剧视前端工程化的：

大公司里怎样开发和部署前端代码？ - 张云龙/知乎

结合我自身经从来说说，咱们处理前端资源的更新部署的问题的演变过程（只是个示例）：

版本1.0 资源放服务器上

<script src="/js/main.js"></script>

版本2.0 资源放CDN上

放服务上太慢了，所有资源都得转到CDN上！当时以为刷新CDN真的麻烦啊，因而自做聪明，加个版本号的GET参数不就行了？每次update的时候更新版本号就行了~

<script src="//xxx.cdn.com/js/main.js?v=<?php echo $version; ?>"></script>

版本3.0 使用gulp、webpack等加文件摘要

对比2.0更精确控制缓存了，回头一看之前有没有像傻同样，更新一个小版本所有资源都刷新缓存了。

<script src="//xxx.cdn.com/js/main.js?v=f33103ed68b9b31df7b5"></script>

版本4.0 看似一小步，实际一大步

我就不解释这和3.0的最重要的区别在哪儿了，一个是覆盖式发布而另外一个是非覆盖式发布。你们能够看看上面我推荐的张云龙的回答，更好的理解这个问题。

<script src="//xxx.cdn.com/js/main.f33103ed68b9b31df7b5.js"></script>

列举上面这个例子，我想说明的是这些事情就是该前端来想的呀，而前端工程化中部署这一环节是不容忽视的。这个环节中包含的内容不仅是上面的缓存控制，例如更新前确保资源自动部署到OSS、CDN等。代码部署除了效率之外更重要的是准确性和稳定性，而在前端工程化中重视部署环节能够加强部署的准确性和稳定性。写好你的部署脚本吧，一键更新，用户只多花了0.2秒下载新资源就能体验新版本，将让你感受很是酷。

再来讲说测试

“测试？打开浏览器点一下按钮看看有没有报错不就行了?”

就算不说起回归测试会让你崩溃的问题，上面的这种方法也太原始了，前端代码的质量也是所以而久久提不到一个比较高的水平。其余的领域早就提出了各类测试方法，设有专门的岗位来测试项目，列出了一大堆的测试用例，甚至使用大牛向的TDD（Test-Driven Development）。作那么多事情，还不是为了提升代码质量，提升软件的稳定性！

因而前端也开始作单元测试，e2e测试方面的工做了。建议使用vue-cli的webpack template来试着建立一下项目，能够选择使用Karma+Mocha作单元测试，使用Nightwatch作e2e测试。

固然测试深度视项目而定，但对于前端工程化，一个完整的前端工程化来讲，测试是必不可少的，也许你如今没有这个时间去完成100%的单元测试覆盖率，但必定要有这个认识，要明白这部分的重要性。

附上一些连接：
Vue单元测试
 karma - github
mocha - github
Nightwatch官网

写在后面

文章写得比较凌乱，你们凑合着看吧，也算是最近面试过程当中感悟出来的关于前端工程化的一些意见。本文主要内容并未详细剖析前端工程化的方方面面，这也不是一篇文章能讲完的事情，写这篇文章，只是做为你们知识的一点补充，毕竟前方已有大牛们开路。顺带一说，这也是我打算写的F++系列的主要目的。

现在想一想写这篇文章的初衷，更加坚决了我要在往后的开发中贯彻前端工程化。因此说下雨的周末并未坏得那么完全，写写文章仍是挺有意思的。