前端架构之构建流
在一个前端应用中，构建系统需要做下面一些事情：
- 依赖管理及安装
- 优化开发环境
- 代码质量检测
- 编译及打包
- 测试及部署
对于一个前端应用来说，通常需要做一些步骤：
- 包管理 npm bower yarn
- 持续集成
- 构建系统 Gulp NPM Grunt
- 构建流（Tasks） watch -> build compress serve sprint refreshing minify webpack
- 代码质量（Lint） 测试 单元测试 -> 服务测试 -> UI测试
- 源码（code） SASS/LESS -> CSS JavaScript方言 -> Js 模板引擎 -> HTML
- 浏览器
一、依赖管理工具
1）不同的模块化方案
-
- AMD require.js Bower
- CommonJS Node.js NPM/Yarn（说明：目前主流的前端应用框架React、Angular、Vue采用这种方式）
二、软件包管理
软件包源：
-
- 公有/私有软件包源服务器
- 基于源码版本管理服务器，比如直接使用Git服务器来管理和分布库的版本
- 本地的软件包，使用相对路径导入本地仓库
公有/私有软件包源服务器对于直接使用源服务器，有几种方式：
- .
- npmjs.org提供的官方源。它可以提供最新的软件包，但是国内开发者使用的时候会受到影响
- 淘宝的cnpm源。它可以为国内的开发者提供更快速的下载服务
- 搭建私有的NPM服务器，提供更为安全快速的Node.js环境
三、前端代码的打包
- 用于管理运行时（如路由懒加载）的runtime.js文件
- 样式相关的styles.css
- 解决JavaScript在不同浏览器兼容的polyfill.js
- 程序相关逻辑的main,js
四、设计构建流
如何设计构建流？
- 任务（用于下载的npm install，用于测试的npm test）
- 步骤拆解（build拆解为build:icon build:lib）
- 展现形式（底层库->库+文档，UI框架->库+UI组件的演示库）
- 插件
构建工具：自动化任务
- NPM脚本，适用于脚本简单的应用构建
- Gulp/Grunt，适用于复杂的项目工作流构建
- webpack，进行项目的模块化打包
使用包管理工具构建NPM
- 实现的时候，我们一般会结合NPM脚本与webpack或Gulp/Grunt使用
使用构建工具构建Grunt/Gulp
使用打包工具构建webpack
实现构建流
这些代码及配置的来源，可能是前端框架自带的，也可能是前端应用的脚手架提供的
插件定义构建流
- 查找是否有对应的插件
- 对比不同的插件适配层
- 创建插件的适配层
- 验证插件是否有效
- 重复 （2） ~ （4）步
- 如果插件都不适用，那么重新编写插件或改写原有的插件
框架定义构建流
前端应用构建三要素HTML,CSS,JavaScript
五、持续交付
部署方式
- 持续部署。构建完成即部署，常见于测试环境
- 自动化部署。在持续部署的基础上稍微弱化，即需要人为的介入才能自动化部署
- 手动部署。即全程需要人为操作的部署流程
设计持续集成
优点：
- 有一个随时可发布的应用软件
- 方便测试人员进行测试
- 及时地展示项目的代码集成情况
主要内容：
- 对应用进行构建
- 进行应用的测试，利用代码来完成测试有助于减少bug
- 部署应用到对应的环境，以提供一个联调和测试环境
要做什么：
- 找到相应的工具
- 进行相应的配置
- 运行本章中完成的构建脚本
- 编写部署脚本
案例：
- 开源工具Jenkins、GoCD
- Jenkins的配置文件Jenkinsfile
- 安装依赖 -> 执行构建 -> 运行测试
自动化部署
- 将静态文件部署到服务器上，使用Nginx配置域名及相应后台服务的地址
- 搭配Docker，编写Dockerfile完成快速的应用部署
- 编写一个对应的NPM脚本，配置到Jenkinsfile中，完成整个持续部署的流程
- （可选）考虑“回滚机制、蓝绿部署、灰度发布”等因素
- （可选）使用UI自动化测试来测试部分功能是否正常，以及测试相应的后端服务连接
环境配置
针对不同的环境（开发、线上）编写构建脚本
开发环境配置
- 在本地开发环境开发时，我们需要将HTTP请求指向本地的Mock Server
- 在本地集成后端服务时，需要将HTTP请求直接指向开发环境的后台服务
- 针对不同环境的构建配置来配置不同的构建脚本，以用于部署或者调试
- 在运行时，针对不同环境的产品进行相关服务的配置
- （可选）构建配置-不同环境的构建配置
- （可选）代码配置-硬编码，后台获取。例如不同环境的第三方配置、广告、第三方授权服务配置等
- （可选）代理配置-将HTTP请求指向不同环境的服务器
线上调试
- 在URL中添加一些参数，前端代码在运行的过程中去读取这个参数
- 在LocalStorage中根据某些值是否存在来运行和调试代码
- 对特定的账号进行权限处理，以获取调试功能
