前端工程化

什么是前端工程化？

简单来说，前端工程化可以提升开发体验、提高开发效率和质量、提升应用的访问性能，一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。前端工程化不等同于Webpack，它主要包含从编码、发布到运维的整个前端研发生命周期，把软件工程相关的方法和思想应用到前端开发。编码阶段涉及: 模块化、组件化、规范化、模块打包工具

1. 模块化

js模块化

https://juejin.cn/post/7194337679700394042

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文件

2. 组件化

组件化可以提高代码的复用性, 但是组件化≠模块化

模块化只是在文件层面上，对代码或资源的拆分；

而组件化是在设计层面上，对UI（用户界面）的拆分。从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。

其实，组件化更重要的是一种分治思想。页面上所有的东西都是组件。页面是个大型组件，可以拆成若干个中型组件，然后中型组件还可以再拆，拆成若干个小型组件，小型组件也可以再拆，直到拆成DOM元素为止。DOM元素可以看成是浏览器自身的组件，作为组件的基本单元。

3. 规范化

• eslint 编码规范

• typescript 强类型

https://juejin.cn/post/7189498107732688957

• Git分支管理 Commit描述规范

• https://juejin.cn/post/7189465709649330231/

• 制定代码风格统一

https://juejin.cn/post/7188415515944517669

• 前后端接口规范（swagger）

• 定期代码审查

• 目录结构的制定

• 文档规范

• 组件管理

4. 模块打包工具

• webpack

https://juejin.cn/post/7193627668842020919

• vite

https://vitejs.cn/

• gulp

https://www.gulpjs.com.cn/