前端工程化

前端工程化体系是一种服务，以项目迭代过程中的前端开发为主要服务对象，设计开发、构建、部署等环节。---------《前端工程化：体系设计与实践》

注：实际上，前端工程化目前的形态和生态都没有完全的一个概念，每个公司甚至每个team都有业务或者研究方向的不同导致形态的差异。

一、前端发展与工程化的必要

1.1 两次新生

ajax（2005年）异步请求和局部刷新改变了页面交互模式
node.js(2009年) 为JS 带来了服务端开发领域，也丰富了整个JS 的生态.

注：08年Google的V8引擎采用的实时编译（JIT）更是为JS的起飞吹起了强劲的东风

1.2 面临问题

使用新的ECMA特性，兼容问题
使用less/Sass等增强CSS的变成行，运行环境的支持情况
使用模块化的方式提高项目的维护性，环境不支持
部署代码手动压缩，手动上传至服务器
多人协作开发，无法统一开发风格
部分功能开发完全依赖后端支持

1.3 工程化

一切以提高效率，降低成本，质量保证为目的的手段都属于工程化，

1.4 现阶段集成

create-react-app
vue-cli
angular-cli
...........

二、脚手架

前端工程化的发起者，功能：创建项目初始文件，本质：方案的封装。

方案即，创建项目基础结构、提供项目规范和约定

2.1 脚手架的作用

作用

快速生成配置
降低框架学习成本
业务专注业务本身

2.2 通用脚手架

Sails.js Node.js全栈MVC框架 github.com/balderdashy…
Yeoman 开放脚手架平台，不封装任何具体方案 github.com/yeoman/yeom…

2.3 Yeoman的封装方案

THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS

自定义Generator模块（本质就是一个NPM模块）

三、自动化构建

3.1常见的自动化打包工具

Grunt、Gulp、FIS Grunt、Gulp他们的本质都是通过 JavaScript 语法实现了shell script 命令的一些功能， gulp引入Node中流的的概念来简化多任务之间的配置和输出，让任务更加简洁和容易上手。 fis 百度开发。快捷上手文档：fex.baidu.com/fis-site/do…

3.2实例

gulp完成自动化构建 note.youdao.com/noteshare?i…

四、模块化打包

模块化

文件划分（原始模块化）
IIFE （原始模块化）

CommonJS

一个文件就是一个模块，都有单独的作用域，通过module.exports和require进行导出和导入模块

AMD(Require.js)/CMD(Sea.js)

区别：1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，	处理方式不同）。CMD 推崇 as lazy as possible.2. CMD 推崇依赖就近，AMD 推崇依赖前置.

最佳实践 ESModules In Browers 与 CommonJS In Node.js

Babel

Webpack

loader、plugin、HMR、Code Splitting、Tree Shaking、happyPack.............

rollup & Parcel

五、自动化部署(暂无)

六、项目规范化

规范化是践行前端工程化的重要的一部分

6.1 常见代码规划化实现方式

ESlint使用
ESlint结合自动化工具或Webpack
Stylelint
Prettier
Git Hooks （可结合Eslint）
Commitizen 规范提交

相关文章:zhuanlan.zhihu.com/p/182553920

6.2 GitFlow

普遍的分支策略：note.youdao.com/ynoteshare1…

juejin.cn/post/684490…

七、我见我愿

7.1 ada

note.youdao.com/noteshare?i…

7.2 政采云