作者: Nicholas C. Zakas

第三部分, 自动化

自动化构建系统指利用各类自动化工具, 对代码进行整合优化, 然后部署的自动化流程. 自动化构建系统是随着前端应用日趋复杂, 应用工程化发展的产物. 使用自动化构建系统的优势有:

  • 开发环境代码组织与生产环境脱钩, 可以自动地组织本地代码而无须考虑优化问题;
  • 静态分析可以自动发现错误;
  • 部署前可以采用多种方式优化代码, 如文件连接和压缩;
  • 自动化测试可以自动发现问题;
  • 方便的部署流程;
  • 一些常见的任务也可以实现自动化.

自动化构建也会带来一些问题:

  • 每次改动后需要重新构建才能应用;
  • 生产环境和开发环境代码不一致, 一旦出现环境相关的问题很难定位 bug;
  • 构建系统的使用需要学习.

第 13 章, 文件和目录结构

最佳实践

  1. 一个文件只包含一个对象.

  2. 相关的文件用目录分组.

  3. 保持第三方代码的独立. 最理想的情况是不引入文件, 直接通过 CDN 加载.

  4. 确定创建位置. 不要把编译后的文件包含到代码仓库中, 因为它们可能在开发过程中多次修改. 最终编译创建的文件应该是可以直接部署上线的.

  5. 保持测试代码的完整性.

第 14 章, Ant

一款自动化部署工具.

第 15 章, 校验

如果采用了自动化构建, 那 JavaScript 在部署之前是没有经过编译的, 此时的代码不能在编译步骤发现一些错误. JSLint 和 JSHint 就是在构建流程中自动分析并验证 JavaScript 代码的工具.

后面几章 (16-20) 都是在介绍自动化构建流程所用到的几种工具, 包括文件合并和加工, 文件精简和压缩, 文档化, 自动化测试, 以及打包. 因为前端技术发展, 部分内容只能提供一个参考, 具体使用何种工具可以应该有选择地针对性学习. 因此跳过.