01-前端工程化概述

落日橙子乳酸菌

已于 2022-02-16 16:17:32 修改

阅读量444

点赞数

分类专栏：前端工程化开发文章标签：前端

于 2022-02-16 16:16:36 首次发布

本文链接：https://blog.csdn.net/m0_48670609/article/details/122962009

版权

前端工程化开发专栏收录该内容

5 篇文章 1 订阅

订阅专栏

什么是工程

工程就是一个项目。例如：一个网站或APP，如果是做网站开发，那么这个工程就指的是这个网站；如果是做APP开发，那么这个工程就指的是这个APP。

一个工程的生命周期

工程立项——>需求分析——>产品原型——>开发实施——>测试部署——>上线运行

什么是工程化

工程化就是完成项目过程中，用到的各种工具和技术。
上述工程的生命周期的六个阶段都需要用到工具和技术，比如开发实施阶段，工具VS Code编辑器，技术HTML，JS等。
作为开发人员，主要关注的是后面三个阶段：开发实施——>测试部署——>上线运行。

什么是前端工程化

随着前端开发功能要求不断提高，业务逻辑日益复杂。传统的刀耕火种的开发方式，已经不适合现代的开发要求。
前端工程化是指遵循一定的标准和规范，通过各种工具去提高开发效率，降低成本的一种手段。
开发过程中的很多脏活累活，都应该交给自动化工具来完成。
前端工程化就是通过各种工具和技术，提升前端开发效率的过程。
前端工程化的内容：各种工具和技术
前端工程化的作用：通过使用工具，提升开发效率

前端工程化的萌芽

以我们用过的举例：HTML，CSS，JavaScript——>jQuery——>Bootstrap——>…
最开始做项目开发时，前端三大语言，HTML，CSS，JavaScript，但是，如果只是使用这三大语言做开发的话会很局限，做一个项目会很麻烦，因为这种传统开发方式效率比较低，所以，后面出现了jQuery，jQuery就提高了开发效率，举个例子，比如做一些操作之前要先获取DOM对象，在jQuery中获取DOM对象就是jQuery中的选择器，最简单的就是 id 选择器，$(’#id’)，这个写法就比原生的JS代码document.getElementById('id)要简洁很多。当然，jQuery不只包含JS，还可以更改页面的样式，还可以做相关的DOM操作，添加删除节点等。jQuery其实就是一个前端工程化的小小的工具。后来，随着时间的推移，我们发现，jQuery也不够好用了，后来又有人发明了Bootstrap，Bootstrap中是开发过程中使用最为频繁的一些效果，比如按钮，页面布局，轮播图，导航菜单等等，这些功能，最开始第一次做网站开发时写了一遍，第二次第三次第四次，以后再做网站开发时就没有必要完全重写。然后后续还有很多好用的工具…所以会发现，工具越来越好用，开发效率就会越来越高。

面临的问题

技术是为了解决问题而存在的

项目上线前，代码需要压缩
bootstrap.js文件66KB，压缩后，bootstrap.min.js文件35KB
压缩后的代码体积明显缩小了，体积缩小，上线运行时，页面加载就会更快，且更节省带宽
有人会说，从66KB到35KB，只节省了31KB，有必要吗？确实，如果只看这一个文件的话，节省的带宽很有限，但是如果网站访问量很大的话，这也是一个天文数字，比如淘宝，假设每天访问量100亿，那么用100亿乘以节省的35KB，那这也是一个天文数字，就可以节省上百台服务器，这也是代码压缩的初衷。
除了JS文件可以压缩之外，CSS文件、HTML文件都可以压缩，甚至可以压缩图片。
压缩就是将代码的格式比如缩进、换行、注释等都去掉。
压缩对于代码的功能性没有任何影响。
如果想要使用 ES6+ 的新语法或 CSS3 的新特性的话，要解决兼容性问题
关于兼容性问题，可以在一个网站上查到，caniuse.com
比如在网站中查看ES6的兼容性（Can I use后面的横线输入ES6）：

方块上的数字表示浏览器的版本，绿色的方块表明浏览器支持ES6，红色的表示不支持，橙色的表示部分支持。比如看Chore谷歌浏览器，可以看到，ES6在4-20版本不支持，21-50是部分支持，50以上的版本都支持。
想要使用 Less 增强 CSS 的编程性，但是浏览器不能直接支持 Less
平时可以使用Less进行CSS编码，它可以提高CSS编程性，但是浏览器是不能直接支持Less的，因为浏览器里面没有Less解析引擎，只能支持CSS，所以，在项目上线之前，需要将Less代码转成普通的CSS，然后才能上线，这个转换的过程也是面临的一个问题。
多人协作开发，代码风格无法统一
比如有人习惯两格缩进，有人习惯四格缩进