构建系统是一个Web应用不可缺少的部分，其核心用途是，帮助开发者从源代码开发开始，构建出最后可用的目标软件。开发人员还能通过构建系统中的构建工具添加更多实用的功能，如修改监测代码触发代码编译后自动地刷新浏览器，在构建系统时配置不同的环境参数，在本地运行的时候做反向代理，等等。

        下面我们将介绍设计构建流的一些方法。

1. 依赖管理工具
   • AMD方式：通过Bower进行管理
   • CommonJS方式：通过NPM/Yarn管理
   • UMD（Universal Module Definition，通用定义模块）：将AMD和CommonJS融合
2. 软件包源管理
   • 基于源码版本管理服务器

     "dependencies": {
       "demo": "git+http://github.com/username/demo/#v1.0.0"
     }复制代码

      

   • 本地的软件依赖包

     // 在package.json中通过"aofe": "file:aofe"的形式来引入依赖复制代码

      

   • 前端应用的编译：将应用编译成JavaScript、CSS及对应的HTML DOM

     npm run build复制代码

      

   • JavaScript的编译：Babel，TypeScript编译器
   • CSS的编译：Sass、LESS、Stylus
   • CSS In JavaScript
   • 模板编译
3. 前端代码打包
4. 设计构建流
   • 构建流分析：(1)我们需要做的任务有哪些？(2)每个任务具体的步骤拆解有哪些？(3)部署时，其对应的形式是怎么样的？(4)有没有现成的插件可使用？
   • 构建工具——自动化任务
   • 使用包管理工具构建——NPM
   • 使用构建工具构建——Grunt/Gulp
   • 使用打包工具构建——webpack
   • 实现构建流
   • 插件定义构建流
   • 框架定义构建流
5. 持续交付问题
   • 部署方式：(1)持续部署；(2)自动化部署；(3)手动部署
   • 设计持续集成：(1)Bamboo；(2)Jenkins；(3)GoCD；(4)Travis CI
   • 自动化部署
   • 环境配置：(1)本地环境；(2)开发环境；(3)测试环境；(4)生产环境
   • 开发环境配置：(1)构建配置；(2)代码配置；(3)代理配置
   • 线上调试：(1)在URL中添加调试参数；(2)在LocalStorage中根据某些值是否存在来运行和调试代码；(3)对特定的账号进行权限处理以获取调试功能

参考资料：

1. 《前端架构：从入门到微前端》

微信公众号“前端那些事儿”：