前端架构之构建流

在一个前端应用中，构建系统需要做下面一些事情：

• 依赖管理及安装
• 优化开发环境
• 代码质量检测
• 编译及打包
• 测试及部署

对于一个前端应用来说，通常需要做一些步骤：

1. 包管理 npm bower yarn
2. 持续集成
3. 构建系统 Gulp NPM Grunt
4. 构建流（Tasks） watch -> build  compress serve sprint refreshing minify webpack
5. 代码质量（Lint） 测试 单元测试 -> 服务测试 -> UI测试
6. 源码（code） SASS/LESS -> CSS  JavaScript方言 -> Js 模板引擎 -> HTML
7. 浏览器

一、依赖管理工具

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

　实现构建流

这些代码及配置的来源，可能是前端框架自带的，也可能是前端应用的脚手架提供的

　插件定义构建流

1. 查找是否有对应的插件
2. 对比不同的插件适配层
3. 创建插件的适配层
4. 验证插件是否有效
5. 重复 （2） ~ （4）步
6. 如果插件都不适用，那么重新编写插件或改写原有的插件

　框架定义构建流

前端应用构建三要素HTML,CSS,JavaScript

五、持续交付

　部署方式

• 持续部署。构建完成即部署，常见于测试环境
• 自动化部署。在持续部署的基础上稍微弱化，即需要人为的介入才能自动化部署
• 手动部署。即全程需要人为操作的部署流程　

　设计持续集成

优点：

• 有一个随时可发布的应用软件
• 方便测试人员进行测试
• 及时地展示项目的代码集成情况

主要内容：

• 对应用进行构建
• 进行应用的测试，利用代码来完成测试有助于减少bug
• 部署应用到对应的环境，以提供一个联调和测试环境

要做什么：

• 找到相应的工具
• 进行相应的配置
• 运行本章中完成的构建脚本
• 编写部署脚本

案例：

• 开源工具Jenkins、GoCD
• Jenkins的配置文件Jenkinsfile
• 安装依赖 -> 执行构建 -> 运行测试

　自动化部署

• 将静态文件部署到服务器上，使用Nginx配置域名及相应后台服务的地址
• 搭配Docker，编写Dockerfile完成快速的应用部署
• 编写一个对应的NPM脚本，配置到Jenkinsfile中，完成整个持续部署的流程
• （可选）考虑“回滚机制、蓝绿部署、灰度发布”等因素
• （可选）使用UI自动化测试来测试部分功能是否正常，以及测试相应的后端服务连接

　环境配置

针对不同的环境（开发、线上）编写构建脚本

　开发环境配置

• 在本地开发环境开发时，我们需要将HTTP请求指向本地的Mock Server
• 在本地集成后端服务时，需要将HTTP请求直接指向开发环境的后台服务
• 针对不同环境的构建配置来配置不同的构建脚本，以用于部署或者调试
• 在运行时，针对不同环境的产品进行相关服务的配置
• （可选）构建配置-不同环境的构建配置
• （可选）代码配置-硬编码，后台获取。例如不同环境的第三方配置、广告、第三方授权服务配置等
• （可选）代理配置-将HTTP请求指向不同环境的服务器

　线上调试

• 在URL中添加一些参数，前端代码在运行的过程中去读取这个参数
• 在LocalStorage中根据某些值是否存在来运行和调试代码
• 对特定的账号进行权限处理，以获取调试功能