工具是第一生产力

为什么工具那么重要？

在写这篇文章的时候，我突然想起来了我中学数学老师说过的一句话：“人其实是很懒的，就是因为懒，所以才逼的自己不断去创造各种东西，然后让自己变得更懒，哈哈哈”。

曾经刚开始的时候我其实不认可他说的这句话，但现在想来却发现，难道人类不正是如此，在不断的追求更便捷快速的生活之下去不停的创造来使得自己的生活更加美好。

是的，工具其实是非常重要的东西，工具使得我们的生活更加便捷，使得世界不断进步，因为工具的创造才使得人类文明得以如此与众不同。

前端工程化的演变之路

回到我们本文的正题，首先我们谈谈前端的工程化之路，是如何一步步坎坷向上的，然后又是如何变成我们现在开发中必不可少的攻城利器。

远古时代

话说“天地初开，万物混沌”，啊呸，扯远了哈哈哈，还记得我刚开始工作那会那是2016年，当时jQuery还是前端开发的主要工具，

当时前端还不叫工程师，那时的人们亲切的称呼我们为“切图仔”，那是一个没有任何话语的时代。

前端的代码不是jQuery直接写，就是在后端的MVC架构之下混搭着后端的代码一起，可恶啊，那个时候我们真的是卑微啊，人尽可欺。

当然农民也终有翻身做主的那一天，随着Angualr、React、Vue这样的MVVM框架的兴起，我们才终于有了崛起的那一天。

当代的前端架构体系

现如今随着MVVM框架的兴起，以及Web重要性的日益突出，各种各样从gulp、react、vite这样的开发工具，

再到require、umd、typescript这样的js模块化，各种前端开发工具如雨后春笋般层出不穷。

前端工程体系已经形成了集开发、调试、部署、监控、测试等完整的产业链结构，接下来就让我们从不同的方向出发开始正式介绍

这些我们前端工程师的好帮手了。

开发调试

项目构建工具

样式处理

less

scss

css-module

js模块化

require.js

babel

Typescript

调试工具

浏览器调试

接口调试

移动端调试

性能优化

代码压缩

模块化打包

SSR

Node.js

单元测试

Jest

Mocha

编译部署

前端自动化-CI与CD

Nginx反向代理

性能与错误监测

Sentry

数据分析

总结

本篇文章旨在介绍前端工具的重要性，并不是一篇严格的技术文章，所以用词上面没那么讲究。

本文介绍了前端开发工具的方方面面，从前端技术的演变到开发调试、编译部署、性能监测等不同方向介绍了各种不同的工具，

希望能给大家在前端开发工具上带来一个较为全面的介绍，同时也能对自身对于前端工程化的使用更加深入。

备注：

作者：Hope([e-mail])，于2022年3月10日写于个人博客，转载请注明来源。