1.5 工程化方案架构--阅读笔记

目前流行的前端工具分为3类

• 工作流管理工具：grunt，gulp
• 构建工具：webpack，rollup
• 整体解决方案：FIS，WeFlow

FIS

• 是一套比较完整的前端工程化方案，但构建功能不理想，生态圈不够庞大
• 最初是为了解决百度内部的需求，所以功能完整度和编程规范都有一定局限性

grunt，gulp

• 是工作流管理工具（只是一个放插件的平台），本身不提供任何具体功能，所有的构建部署功能都是由插件提供
• 这样方便控制项目工作流程，比如先构建css还是html
• 生态圈完整，但是衰退了

webpack

• 近几年才崛起的构建工具，现在是最流行的生态圈非常庞大
• vue，react的webpack loader 是官方的，能保证质量和及时更新
• 提供了优雅的生命周期和高度拓展的api，便于开发各类插件
• 能够优化性能，比如对构建产出的文件体积进行监控，tree shaking机制

rollup

• 非常优秀的构建工具，但是起步晚，生态不完整

工程化方案的整体架构

• 用户层：命令行调用各功能模块的接口和配置接口
• 平台层：脚手架，本地服务器，构建，部署 这个四个功能模块
• 内核层：每个功能模块的内核，比如脚手架使用Yeoman，本地服务器由express框架承载，构建围绕webpack，部署基于ssh协议
• 系统层：建立在node.js平台上
  

命令行工具

• commander.js 是一个实现命令行交互的node.js模块
  

构建功能规划

• 是整个工程化最重要和最复杂的功能，主要解决开发层问题

环境区分

• 前端项目周期要经历三个阶段：开发（开发环境），测试（测试环境），部署上线（生产环境）
• 不同运行环境，对工程化方案的需求也不同
• 开发环境构建的代码要方便浏览器调试
• 测试环境的数据接口不同
• 生产环境要控制静态文件体积
• 3个环境，有3个不同配置api
  

设计原则

规范设计原则

• 配置api规范：简单明了。webpack自身的配置太复杂和太难了。
• 编程规范的设计原则：代码的可移植性

架构设计原则

• 内核轻盈，拓展丰富
• 比如webpack本身不提供任何具化的方案，而是提供丰富的配置和api，让开发者自己封装和拓展构建方案