前端工程化

在前端快速发展的今天，如果不能时刻保持学习就会很快被淘汰。分享一下前端工程化的相关知识。每天进步一点点。

前端工程化概述

写在前面：前端工程化就是为了提高开发者的工作效率，降低项目维护成本，从而更好的适应大前端时代下的前端开发工作。以下主要以前端工程化为主题，分别从脚手架工具、自动化构建、模块化开发、规范化标准四个维度介绍前端工程化具体该如何落地、如何实践，以此应对复杂前端应用的开发和维护过程。

一、工程化的必要性

技术是为了解决问题而存在的，前端工程化解决的一些问题：

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

没有前端工程化的时候，想要使用ES6+新特性的时候，存在着兼容性问题

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

没有前端工程化的时候，想要使用Less / Sass / PostCSS 增强CSS的编程性的时候，运行环境下不能直接支持；想要使用模块化组件化的方式提高项目的可维护性的时候，运行环境也不能直接支持

3、重复的机械式工作

没有前端工程化的时候，在部署上线前，需要手动压缩代码及资源文件，部署过程中需要手动上传代码到服务器等重复性动作

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

没有前端工程化的时候，多人协作开发的时候，无法硬性统一大家的代码风格，从仓库中pull回来的代码质量无法保证

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

没有前端工程化的时候，开发部分功能的时候，需要等待后端服务接口提前完成才能开发

二、工程化的表现

1、工程化从创建到部署上线都表现出了它的存在价值

创建项目：使用脚手架工具自动完成项目基础搭建

编码：使用相应的工具自动化的去格式化代码，进行代码风格校验，编译/构建/打包

预览/测试：热更新、Source Map、mock接口数据

提交：使用Git Hooks对项目做整体的检查

部署：一行命令代替传统的FTP文件上传、自动发布，持续集成/持续部署

2、一些成熟的工程化集成

create-react-app、vue-cli、angular-cli、gatsby-cli 等等

三、脚手架工具

在搭建新项目的时候，项目中会有一些相同的组织结构，相同的开发范式，相同的模块依赖，相同的工具配置，相同的基础代码。使用脚手架工具可以快速搭建一个特定的项目骨架，把这些大量的重复的机械性的复杂的工作自动完成，后期基于这个骨架进行开发。

脚手架工具介绍及使用，详见：前端工程化之脚手架工具

四、自动化构建

自动化构建就是把我们开发阶段写出来的源代码，自动化的转换成生产环境中可以运行的代码或者程序，这个自动化转换的过程称为自动化构建工作流。

它的作用是尽量脱离运行环境兼容带来的问题，在开发阶段使用一些提高效率的语法，规范和标准，例如，ES6+、Sass、模板引擎等。

自动化构建工具介绍及Gulp 使用，详见：前端工程化之自动化构建

五、模块化开发

模块化是工程化思想下相对较具体的开发方式,因此可以简单的认为模块化是工程化的表现形式。模块化开发，一个模块就是一个实现特定功能的文件，有了模块我们就可以更方便的使用别人的代码，要用什么功能就加载什么模块。

模块化开发的好处：1、避免变量污染；2、避免命名冲突；3、提高代码复用率；4、提高维护性；5、方便依赖关系的管理

模块化开发具体介绍以及Webpack的基本使用，详见：前端工程化之模块化开发

六、规范化标准

规范化是我们践行前端工程化中重要的一部分。在前端项目的开发中需要多人协同，而且不同开发者具有不同的编码习惯和喜好，不同的喜好会增加项目的维护成本，每个项目或者团队需要明确统一的标准。所以规范化标准是必不可少的。

规范化标准具体介绍以及ESLint的基本使用，详见：前端工程化之规范化标准