前端工程化的起源与理解

6.1 简要阐述一下前端工程化

背景：

前端工程化是前后端分离的必然产物，它通过软件工程思想从模块化、组件化、规范化、自动化四个方面出发，解决了以下几种问题：

如何进行高效的多人协作？

如何保证项目的可维护性？

如何提高项目的开发质量？

6.1.1 模块化：

• js模块化

在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等。

规范确定了，然后就是模块的打包和加载问题：

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

2. 用SystemJS+Babel主要是分模块异步加载；

3. 用浏览器的

目前Webpack远比SystemJS流行。Safari已经支持用type="module"加载了。

Webpack的强大之处不仅仅在于它统一了JS的各种模块系统，取代了Browserify、RequireJS、SeaJS的工作。更重要的是它的万能模块加载理念，即所有的资源都可以且也应该模块化。

• css模块化

  css module、css next

资源模块化后，有三个好处：

1. 依赖关系单一化。所有CSS和图片等资源的依赖关系统一走JS路线，无需额外处理CSS预处理器的依赖关系，也不需处理代码迁移时的图片合并、字体图片等路径问题；
2. 资源处理集成化。现在可以用loader对各种资源做各种事情，比如复杂的vue-loader等等。
3. 项目结构清晰化。使用Webpack后，你的项目结构总可以表示成这样的函数： dest = webpack(src, config)

6.1.2 组件化：

模块化只是在文件层面上，对代码或资源的拆分；而组件化是在设计层面上，对UI（用户界面）的拆分。

从UI拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。

首先，传统前端框架/类库的思想是先组织DOM，然后把某些可复用的逻辑封装成组件来操作DOM，是DOM优先；而组件化框架/类库的思想是先来构思组件，然后用DOM这种基本单元结合相应逻辑来实现组件，是组件优先。这是两者本质的区别。

其次，组件化实际上是一种按照模板(HTML)+样式(CSS)+逻辑(JS)三位一体的形式对面向对象的进一步抽象。

目前市面上的组件化框架很多，主要的有Vue、React、Angular。

6.1.3 规范化：

模块化和组件化确定了开发模型，而这些东西的实现就需要规范去落实。

规范化其实是工程化中很重要的一个部分，项目初期规范制定的好坏会直接影响到后期的开发质量。

包括以下内容：

• 目录结构的制定（components、containers、config等等）
• 编码规范（es-lint、css-lint）
• 前后端接口规范
• 文档规范
• 组件管理
• Git分支管理
• Commit描述规范
• 定期CodeReview

其中编码规范最好采取ESLint和StyleLint等强制措施，配置git hooks可以实现Lint不过不能提交代码等机制，因为人是靠不住的。

6.1.4 自动化：

遵循理念：

任何简单机械的重复劳动都应该让机器去完成。

• 持续集成
• 自动化构建
• 自动化部署
• 自动化测试

前端自动化测试能够提高代码质量、减少人肉测试等，这些优点是不言而喻的。

以上就是前端工程化的一些概念的概述，高级前端不只用别人搭好的脚手架去开发页面，平时还要多注意周边知识的积累，多自己搭框架，多去研究原理，熟悉各种前端思想与架构。