什么是前端⼯程化？如何实现前端⼯程化？
hashmap的扩容机制
⼀、什么是前端⼯程化
前端⼯程化是使⽤软件⼯程的⽅法来解决前端的开发流程中模块化、组件化、规范化、⾃动化的问题，其主要⽬的为了提⾼效率和降低成本。
⼆、为什么需要前端⼯程化？
Web业务⽇益复杂化和多元化，现在随便个前端项⽬，都已经不是过去的拼个页⾯+搞⼏个jQuery插件就能完成的了。代码量可能从以前的千⾏到如今的万⾏，甚⾄⼗万⾏。⼈数从⼀个⼈变成了N个⼀起协作开发。所以在业务上，我们要去思考这些复杂和多元的场景，⽽产⽣的问题，如：
如何扩展javascript、html、css本⾝的语⾔能⼒
如何进⾏⾼效的多⼈协作
如何解决功能复⽤和变更问题
如何保证项⽬的规范性
python计算机视觉编程
如何实现重复的劳动简单化
要实现前端⼯程化，就要解决以上的⼏个问题。
三、如何实现前端⼯程化？
1.如何扩展javascript、html、css本⾝的语⾔能⼒？
（1）TypeScript
typeScript是javascript的超集，扩展了语法（类Classes，接⼝interfaces，模块Modules，类型注解Type annotaions，编译时类型检查Compiletime type checking,Arrow函数(类似c#的Lambda))使得JavaScript变得更强⼤，对于⾯向对象编程更好的⽀持。
（2）CSS预处理器：SASS 、LESS、 Stylus。
它们基于CSS扩展了⼀套属于⾃⼰的DSL（Domain Specific Language领域特定语⾔），来解决我们书写CSS时难以解决的问题：
语法不够强⼤，⽐如⽆法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复⽤机制，使得逻辑上相关的属性值必须以字⾯量的形式重复输出，导致难以维护。
所以这就决定了CSS预处理器的主要⽬标：提供CSS缺失的样式层复⽤机制、减少冗余代码，提⾼样式代码的可维护性。
2.如何进⾏⾼效的多⼈协作
模块化
简单来说，模块化就是将⼀个⼤⽂件拆分成相互依赖的⼩⽂件，再进⾏统⼀的拼装和加载。只有这样，才有多⼈协作的可能。
JS的模块化jquery下载文件请求
浏览器端模块化的问题：
效率问题：精细的模块划分带来了更多的JS⽂件，更多的JS⽂件带来了更多的请求，降低了页⾯访问效率
兼容性问题：浏览器⽬前仅⽀持ES6的模块化标准，并且还存在兼容性问题
⼯具问题：浏览器不⽀持npm下载的第三⽅包
在ES6之前，JavaScript⼀直没有模块系统，这对开发⼤型复杂的前端⼯程造成了巨⼤的障碍。对此社区制定了⼀些模块加载⽅案，如CommonJS、AMD和CMD等，某些框架也会有⾃⼰模块系统，⽐如Angular1.x。现在ES6已经在语⾔层⾯上规定了模块系统，完全可以取代现有的CommonJS和AMD规范，⽽且使⽤起来相当简洁，并且有静态加载的特性。
规范确定了，然后就是模块的打包和加载问题：
⽤Webpack+Babel将所有模块打包成⼀个⽂件同步加载，也可以打成多个chunk异步加载；
⽤SystemJS+Babel主要是分模块异步加载；
⽤浏览器的<script type="module">加载
⽬前Webpack远⽐SystemJS流⾏。Safari已经⽀持⽤type="module"加载了。
CSS的模块化
（1）类名冲突
当你写⼀个css类的时候，你是写全局的类呢，还是写多个层级选择后的类呢？
你会发现，怎么都不好
过深的层级不利于编写、阅读、压缩、复⽤
过浅的层级容易导致类名冲突
⼀旦样式多起来，这个问题就会变得越发严重，其实归根结底，就是类名冲突不好解决的问题
解决类名冲突
⼀些第三⽅机构提出了⼀些⽅案来解决该问题，常见的解决⽅案如下：
命名约定：即提供⼀种命名的标准，来解决冲突，常见的标准有：
BEM
OOCSS
AMCSS
SMACSS
其他
（2）重复样式
这种问题就更普遍了，⼀些重复的样式值总是不断的出现在css代码中，维护起来极其困难。
⽐如⼀个⽹站的主题颜⾊改变，这些颜⾊会充斥到背景、⽂字、边框中，⼀旦颜⾊调整，就是⼀个⾮常⼤的⼯程。
解决重复样式的问题：
css in js
这种⽅案虽然可以利⽤js语⾔解决重复样式值的问题，但由于太过激进，很多习惯写css的开发者编写起来并不是很适应
它的核⼼思想是：⽤⼀个JS对象来描述样式，⽽不是css样式表，⾄于如何把样式应⽤到界⾯上，不是它所关⼼的事情，你可以⽤任何技术、任何框架、任何⽅式将它应⽤到界⾯。
预编译器
有些第三⽅搞出⼀套css语⾔的进化版来解决这个问题，它⽀持变量、函数等⾼级语法，然后经过编译器将其编译成为正常的css
这种⽅案特别像构建⼯具，不过它仅针对css
常见的预编译器⽀持的语⾔有：
less
sass
（3）css⽂件细分
在⼤型项⽬中，css也需要更细的拆分，这样有利于css代码的维护。
不同的功能依赖不同的css样式、公共样式可以单独抽离，这样就形成了不同于过去的css⽂件结构：⽂件更多、拆分的更细
⽽同时，在真实的运⾏环境下，我们也希望⽂件越少越好，这种情况和JS遇到的情况是⼀致的，因此，
对于css，也需要⼯程化管理。
解决css⽂件细分问题
这⼀部分，就要依靠构建⼯具，例如webpack来解决了：利⽤⼀些loader或plugin来打包、合并、压缩css⽂件
3.如何解决功能复⽤和性能问题
为了解决复⽤问题，引⼊组件化的概念。何以提⾼代码的复⽤性。
组件化
⾸先，组件化≠模块化。好多⼈对这两个概念有些混淆。
模块化只是在⽂件层⾯上，对代码或资源的拆分；
⽽组件化是在设计层⾯上，对UI（⽤户界⾯）的拆分。从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。
其实，组件化更重要的是⼀种分治思想。页⾯上所有的东西都是组件。页⾯是个⼤型组件，可以拆成
若⼲个中型组件，然后中型组件还可以再拆，拆成若⼲个⼩型组件，⼩型组件也可以再拆，直到拆成DOM元素为⽌。DOM元素可以看成是浏览器⾃⾝的组件，作为组件的基本单元。
4.如何保证项⽬的规范性
模块化和组件化确定了开发模型，⽽这些东西的实现就需要规范去落实。
规范化其实是⼯程化中很重要的⼀个部分，项⽬初期规范制定的好坏会直接影响到后期的开发质量。
⽐如：
⽬录结构的制定
编码规范（eslint）
前后端接⼝规范（swagger）
⽂档规范（ js注释规范jsdoc）
组件管理
Git分⽀管理00001111二进制转换十进制
Commit描述规范（commitlint)
定期CodeReview
视觉图标规范
5.如何实现重复的劳动简单化
为什么要借助⾃动化⼯具呢？
在浏览器端，开发时态（devtime）和运⾏时态（runtime）的侧重点不⼀样
开发时态，devtime：
1. 模块划分越细越好eclipse下载安装包
2. ⽀持多种模块化标准
3. ⽀持npm或其他包管理器下载的模块
4. 能够解决其他⼯程化的问题（模块化、组件化、规范化）
运⾏时态，runtime：
1. ⽂件越少越好
2. ⽂件体积越⼩越好
3. 代码内容越乱越好
4. 所有浏览器都要兼容
5. 能够解决其他运⾏时的问题，主要是执⾏效率问题
这种差异在⼩项⽬中表现的并不明显，可是⼀旦项⽬形成规模，就越来越明显，如果不解决这些问题，前端项⽬形成规模只能是空谈
解决办法
既然开发时态和运⾏时态⾯临的局⾯有巨⼤的差异，因此，我们需要有⼀个⼯具，这个⼯具能够让开发者专⼼的在开发时态写代码，然后利⽤这个⼯具将开发时态编写的代码转换为运⾏时态需要的东西。
这样的⼯具，叫做⾃动化构建⼯具
⽤⽹上⽐较流⾏的话来说就是，前端⼯程化的很多脏活累活都应该交给⾃动化⼯具来完成。现在⽐较流⾏的前端⾃动化构建⼯具有gulp、webpack、vite
cp指令
在之后的章节会详细讲解webpack的基本使⽤和构建原理，敬请期待~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。