【前端工程化学习笔记】0、前端工程化简介

一、定义

前端工程化是指遵循一定标准和规范，通过工具提高效率、降低成本的手段。

二、前端工程化被广泛关注和探讨的原因

1、前端应用功能要求不断提高，业务逻辑日益复杂

2、前端开发在开发行业举足轻重，涉及范围广，包含 传统网站、H5、移动APP、桌面应用、小程序等

3、对前端开发的要求越来越高

三、解决的问题或者说好处

1、传统语言或语法的弊端

•     开发过程中想使用ES6等新特性，兼容有问题
•     想使用sass less postcss增强css的编程性，但运行环境不能直接支持

2、无法使用模块化、组件化

•     想使用模块化、组件化的方式提高项目的可维护性，但运行环境不能直接支持

3、代码风格统一、质量保证

•     多人协作开发，无法硬性统一大家的代码风格，从仓库中pull回来的代码质量无法保证

 4、重复的机械工作，应当自动代替手动

•         部署上线前需要手动压缩代码及资源文件
•         部署过程需要手动上传代码到服务器

5、依赖后端服务接口支持

•     部分功能开发时需要等待后端服务接口提前完成

6、整体依赖后端项目

四、工程化如何解决问题或表现

工程化在工作流程中的表现：一切以提高效率、降低成本、质量保证为目的的手段都属于 工程化

    （1）创建项目：

        借助 脚手架 自动完成项目基础结构的搭建，包含创建项目结构及特定类型的文件

    （2）编码：

•         借助工程化工具自动进行代码格式化、代码风格校验，从而确保代码风格一致；
•         可以借助编译工具，让我们在开发阶段使用新的特性提高编码效率
•         实现代码的编译/构建/打包

    （3）预览/测试：（Web Server/ Mock/ Live Reloading/ HMR/ SourceMap）

•         传统预览环节可能需要借助Apache nginx等web服务器提供基础的服务让应用运行，但是不能提供热更新的体验，我们现在可以借助现代化的Web Server实现热更新，所见即所得。
•         编译涉及到实际编写的代码和最终运行的代码有转换，如果有问题可以借助Souce Map去定位源代码对应的位置
•         借助Mock的方式解决后端服务未完成的情况下提前开发业务功能，其实就是写同后端接口相同规格的假接口

    （4）提交(Git Hooks、 Lint-staged、 持续集成)

•         使用Git Hooks方式在代码提交之前做项目质量、风格等的整体检查，达到不会把有问题的代码提交到仓库中的目的，当然git log也可以做严格的格式限制，这样在代码回滚的时候有更大的参考价值

    （5）部署（CI CD 自动发布）

•         用一行命令代替传统的ftp上传
•         代码提交过后自动化的通过代码持续集成或持续部署的方式自动将代码部署到服务器，避免手动的不稳定因素。

五、其他

1、注意，工程化 不等于 某个工具

    工具(例如强大的webpack)不是工程化的核心，工程化的核心应该是对项目的整体规划或架构，工具是用来落地我们项目规划或者架构的手段

2、如何落实工程化

•  第一：规划项目整体的工作流架构

            a、文件的组织结构

            b、源代码的开发范式（使用什么语法、规范、标准编写代码）

            c、通过什么方式做前后端分离（基于ajax还是中间层等）

•  第二：选择搭配哪些工具做哪些具体配置选项来实现我们工程化的整体规划

3、优秀的工程化集成参考：create-react-app vue-cli angular-cli gatsby-cli

•    以上是官方给出的特定类型的项目的集成式工程化方案
•    举例分析：为什么vue-cli是集成式工程化方案？vue-cli做了什么？

                - 创建了项目

                - 约定了项目结构，如public src等

                - 提供工具，提供热更新开发服务

                - 自动编译单文件组件及其他模块

                - 代码校验等(ESlint)

4、工程化的一切归功于Node，工程化的存在是为了解决问题，切莫为了技术而技术