概念：前端工程化是什么 #

前端工程化指使用软件工程的技术与方法对前端开发的技术、工具、流程、经验、方案等指 标标准化，它具备模块化、组件化、规范化、自动化四大特性，主要目的 是降低成本与增加效率。

六大模块 #

• 规范篇：熟悉模块/代码/提交三大开发阶段规范，通过规范约束自己，保障工作质量与 提升开发效率
• 服务篇：熟悉云服务器/域名系统/站服务器部署服务环境，掌握整体部署与工具配置， 学会独立上线应用与服务
• 环境篇：熟悉Node/Nvm/Npm部署开发环境，独立搭建一个接口服务，实 践环境/镜像/数据/进程四种 Node 应用方式
• 构建篇：熟悉构建工具打包类库模块，独立封装一个类库模块，结合测试用例保障 代码的生产质量
• 组织篇：熟悉Monorepo模式管理多包仓库，独立维护一个多包仓库，结 合Npm Scope发布模块到公共仓库
• 部署篇：熟悉自动化工具部署前端项目，独立打造一个私有仓库与文档站点，结 合CI/CD在提交代码时自动部署到公网

前端工程化的特性 #

模块化 #

模块化指将一个复杂应用根据预设规范封装为多个块并组合起来，对内实现数据私有化， 对外暴露接口与其它模块通信。

模块化是前端工程化的重中之重。它在前端工程化中具体表现为：在文件层面上对代码与 资源实现拆分与组装，将一个大文件拆分为互相依赖的小文件，再统一拼装与加载。

对于一个完善的Web项目，一般是 SPA/MPA，推荐使用以下目录结构将整个项目划分为各 种通用模块。

project
├─ dist          # 输出目录
│  ├─ prod         # 生产环境执行代码
│  └─ test         # 测试环境执行代码
├─ src           # 源码目录
│  ├─ apis         # 接口模块：包括全局接口请求的功能，控制数据定向转换
│  ├─ assets       # 资源模块：包括样式、脚本、字体、图像、音频、视频等资源文件
│  ├─ components   # 组件模块：包括全局通用的基础组件、皮肤主题和字体图标
│  ├─ layouts      # 布局模块：包括以布局为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ flows        # 流程模块：包括以流程为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ pages        # 页面模块：包括以页面为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ routes       # 路由模块：包括全局页面跳转的功能，控制页面自由切换
│  ├─ stores       # 数据模块：包括全局数据状态的功能，控制数据驱动视图
│  ├─ views        # 视图模块：包括以视图为最小粒度的组件集合，由至少一个基础组件组成
│  ├─ utils        # 工具模块：包括全局通用的常量与方法
│  ├─ index.html   # 模板入口文件
│  ├─ index.js     # 脚本入口文件
│  └─ index.scss   # 样式入口文件
└─ package.json

对于一个完善的Node项目，一般是接口系统，推荐使用以下目录结构将整个项目划分为各 种通用模块

project
├─ dist          # 输出目录
│  ├─ prod         # 生产环境执行代码
│  └─ test         # 测试环境执行代码
├─ src           # 源码目录
│  ├─ assets       # 资源模块：包括样式、脚本、字体、图像、音频、视频等资源文件
│  ├─ models       # 模型模块：包括全局数据模型的功能
│  ├─ routes       # 路由模块：包括全局接口请求的功能
│  ├─ utils        # 工具模块：包括全局通用的常量与方法
│  └─ index.js     # 脚本入口文件
└─ package.json

组件化 #

组件化指将一个具备通用功能的交互设计划分为模板、样式和逻辑组成的功能单元，对内 管理内部状态满足交互需求，对外提供属性接口扩展用户需求。

组件化是前端工程化的重要基础。它实现了代码更高层次的复用性，提升开发效率。组件的 封装也是对象的封装，同样要做到高内聚低耦合，组件化的项目不仅利于单元测试的进行 ，同样也利于需求迭代的推进。

优秀的组件化遵循以下设计哲学。

• 将设计图划分为最小组件层级
• 使用预设规范创建组件静态版本
• 确定组件内部最小且完整的状态的表示方式
• 确定组件内部最小且完整的状态的存放方式
• 实现数据流的正向传递与反向传递

模块化着重在文件层面上对代码与资源实现拆分与组装，组件化着重在功能层面上对交互 与设计实现拆分与组装。

规范化 #

规范化指将一系列预设规范接入工程各个阶段，通过各项指标标准化开发者的工作流程， 引导开发者在团队协作中往更好的方向发展。

规范化是前端工程化的重要部分。它有效地将一盘松散的规范通过指定标准凝聚在一起，将 所有工作流程标准化，协同所有开发者以标准化的方式定义工作流程，同时也影响着代码 、文档和日志，甚至影响着每个开发者及其团队发展方向。

自动化 #

自动化指将一系列繁琐重复的工作流程交由程序根据预设脚本自动处理，整个工作流程无需 人工参与，以解放开发者双手让其更专注业务需求的开发。

自动化是前端工程化的智能部分。它既可解放双手又能节省大量时间做更多有意义的事情， 常见自动化场景包括但不限 于自动化构建、自动化测试、自动化打包、自动化发布和自动化部署，更高级的自动化场 景包括但不限于持续集成、持续交付和持续部署。以自动化构建为例，又可将其划分为以 下子任务，这些子任务分布在自动化构建不同阶段，在不同阶段的最佳时刻会调用相关工具 处理相关流程。