讯享网

 <p>本文转载自微信公众号「勾勾的前端世界」，作者西岭 。转载本文请联系勾勾的前端世界公众号。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2F9667e9c6j00qtc4xf003ic000rs00ikm.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><h5>工程及工程化</h5></p><p>一个工程其实就是一个项目，比如一个网站或者一个 APP。普通的程序员，大部分情况下，都是处于其中的一个环节。要学习工程化，就需要先了解工程化的整个生命周期。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2F57830ce6j00qtc4xf001oc000v400hcm.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>图示中已经是我简化过的内容了，实际的过程更加复杂，其中会牵扯到非常多的人力物力财力以及要花费相当大的管理成本。一个工程从立项到交付上线的整个过程中，一定会使用到各种工具。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2F9b27d320j00qtc4xf002kc000v400ham.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>那么工程化，其实就是完成项目过程中，用到的各种工具和技术。当然，这只是从简单的落地应用的角度来说的，工程化是非常复杂的。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2Fadp00qtc4xf003qc000fk0061m.png&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>回到前端编程的范畴中，你会发现，整个项目的后半部分才是我们需要关注的。而这一部分，也就是我们所说的前端工程化的内容了。</p><p><h5>前端工程化</h5></p><p>什么是前端工程化?前端工程化就是通过各种工具和技术，提升前端开发效率的过程。</p><p>这句话有两个含义：</p><p>1：前端工程化的内容：各种工具和技术。</p><p>2：前端工程化的作用：通过使用工具，提升开发效率。</p><p><h5>开发中到底有哪些问题呢?</h5></p><p>1：项目上线前，代码需要压缩。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2Fe2a1d117j00qtc4xf001pc000v400a0m.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2F7815fc75j00qtc4xf003ic000v400m0m.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>2：想要使用 ES6+ 或 CSS3 新特性，要解决兼容性问题。</p><p>https://caniuse.com/</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2Fe8e7f257p00qtc4xf001tc000fk0054m.png&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>3：想要使用 Less 增强 CSS 的编程性，但是浏览器不能直接支持 Less。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2F0aff78b1j00qtc4xf001sc000v400dgm.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>4：多人协作开发，代码风格无法统一。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2Ff92bbdfaj00qtc4xf001wc000v400b2m.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><h5>总结一下</h5></p><p>前端工程化解决的问题非常多，简而言之就是项目上线前的压缩代码，对 ES6+ 或 CSS3 新特性进行转换，对 Less 等 CSS 的预编译语言进行编译处理以及对不同代码风格的格式化等等，那相对应地也就出现了各种各样的工具，简单给工具分一下类别：</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2F5fe12631j00qtc4xf0025c000v400hom.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>每个类别下，都有很多不同的处理工具，我使用一个表格做了不完全的统计：</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2F8609d724j00qtc4xf003rc000v400g4m.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>但是一定要强调一下，现阶段工程化工具都异常强大，导致很多人对工程化存在误解，认为某个工具就是工程化了，比如webpack，这种思想要不得。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2Fj00qtc4xf001kc000v400ewm.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>最后，前端工程化之所以成功和繁荣，有一个关键性角色，不容忽视，那就是 Node.js，可以这么说，前端工程化就是在 Node 的基础上发展的;</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0519%2Ffb18eef3p00qtc4xf000kc000fk0094m.png&thumbnail=660x&quality=80&type=jpg"/><br/></p><p>所以，作为前端程序员，Node 其实不是一个框架，更不是单纯写后台服务器的语言，不会 Node 的前端，一定不是好码农。</p>