前端工程化

定义

前端工程化是使用软件工程的方法来解决前端开发的工作流程中模块化、组件化、规范化、自动化的问题。前端工程化可以提升开发体验、提升开发效率和质量、提高应用的访问性能，一切以提高效率、降低成本、质量保证为目的的手段都属于工程化。

前端工程化不等同于webpack、它包括从编码、发布到运维的整个前端研发生命周期。

为什么要前端工程化

随着前端技术的不断发展和改革，其业务逻辑逐渐变得复杂多样，代码量从以前的千行到万行十万行、开发人数从一人开发到多人协作开发，企业对于前端的应用功能要求不断提高，需要优化开发流程、提升编码效率和质量、提高项目的可维护性......所以在业务上，我们要去思考这些复杂多元的场景所产生的问题：

如何扩展JavaScript、HTML、css本身的能力

TypeScript

TypeScript是JavaScript的超集，扩展了语法使js变得更加强大，对于面向对象编程更好的支持

语义化标签

使用HTML5的语义化标签，便于浏览器更好的解析

css预处理器

包括less、sass等，它们基于css扩展了一套属于自己的DSL（Domain Specific Language领域特定语言 ）来解决书写css时难以解决的问题：

• 语法不够强大，无法嵌套书写导致模块化开发中需要很多选择器

• 没有变量和合理的样式复用机制，代码冗余、难以维护

如何进行高效的多人协作

模块化

在代码层面上对代码和资源进行拆分，使用模块化将大文件拆分成相互依赖的小文件，在进行统一的拼装和加载

js模块化

js模块化也会导致一些问题：

• 效率问题：精细的模块划分带来了更多的JS文件，带来了更多的请求，降低了页面访问效率

• 兼容性问题：浏览器目前仅支持ES6的模块化标准，并且还存在兼容性问题

• 工具问题：浏览器不支持npm下载的第三方包

使用Webpack+Babel将所有模块打包成一个文件同步加载，也可以打成多个chunk异步加载。

css模块化

在大型项目中，css也需要更细的拆分，这样有利于css代码的维护。不同的功能依赖不同的css样式、公共样式单独抽离，依靠构建工具，例如webpack来解决了：利用一些loader或plugin来打包、合并、压缩css文件

组件化

在设计层面上对UI界面进行拆分。从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，称为组件。

规范化

模块化和组件化确定了开发模型，然后需要规范化的去规范落实。初期规范的好坏会直接影响后期的开发质量，主要包括：

• 目录结构的制定

• 代码规范（eslint）、接口规范（swagger）、文档规范（jsdoc）

• 组件管理、git管理

命名规范：驼峰命名、短横线命名

自动化

在前端，开发时（devtime）和运行时（runtime）侧重点不一样：

开发时态需要模块划分越细越好、支持多种模块化标准、支持包管理器下载的模块、能过解决其他工程化的问题；而运行时态需要文件少、文件体积小、代码内容混乱、兼容所有浏览器、执行效率高。这些差异在小项目中表现得不明显，但是随着项目的规模越来越大，问题就开始逐渐暴露。

既然开发时态和运行时态有着巨大差异，因此我们需要一个工具能让开发者专注的编写开发时态代码、然后自动的转变成运行时态的东西，这就是自动化构建工具。常用的有gulp、webpack、vite

自动化工具

webpack

webpack是一个模块打包器，也是目前最热门的前端资源模块管理和打包工具，他将根据模块的依赖进行静态分析然后将这些模块按照指定的规则生成对应的静态资源

优点：

• 同步异步两种组织模块依赖方式，异步可以进行代码拆分。

• 智能解析器，几乎可以处理任何第三方库。

• 拥有功能丰富的插件系统，可满足各式各样的需求。

• 使用异步I/O和多级缓存提高运行效率。

缺点：

• 配置多入口时，没有glob的方式，需要额外处理。

• 目录结构复杂时，file-loder里面的path功能太弱，很多时候无法自定义构建后的目录结构，只能放在一个目录下。

• 源码比较复杂，遇到问题看源码，要花很长时间。

gulp

优点：

• 易于使用：通过代码优于配置的策略，Gulp让简单的任务简单，复杂的任务可管理。

• 构建快速：利用Node.js流的威力，你可以快速构建项目并减少频繁的IO操作。

• 插件高质：Gulp严格的插件指南确保插件如你期望的那样简洁高质得工作。

• 易于学习：通过最少的API，掌握Gulp毫不费力，构建工作尽在掌握，如同一系列流管道。

缺点：

如果遇到插件bug，需要联系作者，这个是一件非常棘手的事情。但是这种风险是存在的。

其他

vite、FIS、Grunt、Rollup、coolie