Dojo Build系统介绍

最新推荐文章于 2019-12-22 16:32:41 发布

原创最新推荐文章于 2019-12-22 16:32:41 发布 · 82 阅读

0 ·

CC 4.0 BY-SA版权

介绍了bdBuild, 一种用JavaScript编写的通用Build系统，适用于任何Web应用的打包。文章详细阐述了bdBuild的工作原理及其在Dojo框架中的具体应用，通过层(layer)的概念优化了JavaScript文件的组织。

1. 简介

Build系统是产品正式发布的最后一道工序，其效率和质量直接决定着最终产品的效率和质量。虽然在传统应用中，Build系统已经相当成熟，但在Web领域，依然是八仙过海，各显神通，甚至不经Build就直接上线的也比比皆是。Web系统的零散性、复杂性，也决定了对其进行Build是一件复杂的事情。但通过Dojo，我们认识到了一款开源的Web应用Build系统：bdBuild，也见识了其强大的功能。它是一个独立的通用Build系统，完全用JavaScript写成，可以运行于NodeJS或者Rhino等JavaScript引擎，理论上可以对任何Web应用进行Build。下面就将介绍Dojo中是如何用bdBuild系统来实现Web应用的Build的。以此为起点，你也可以利用bdBuild实现自己的Web应用Build系统，对非Dojo的应用来进行打包。

2. bdBuild系统简介

bdBuild是一套开源的前端应用Build引擎，完全用JavaScript写成，可运行于Node.js，Rhino等JavaScript引擎。其强大的功能和灵活可扩展的架构使得其能够应用于任何Web应用的打包。Build在传统应用中可以翻译为构建，而在Web中，也许翻译成打包更加适合。一个合格的Web Build系统至少应该能够完成以下几件事情：

排除开发时文件，比如备份文件，代码中的调试信息，单元测试文件，等等。\
将页面需要的多个资源文件打包成一个文件，并进行压缩，通常是针对JavaScript和CSS文件。这个过程包括了自动处理资源文件之间的依赖关系，能够按顺序进行打包。\
拷贝资源文件到目标位置。\

基本上来说，这些工作的最终目的都是为了提高性能，Http协议的特性决定了多次请求取得多个小文件的效率远低于一次请求一个大文件。所以Web Build的首要目标就是合并小文件形成一个大文件。为了实现这些通用功能，bdBuild系统将Build的过程分为以下几个步骤：

发现资源（discovery）。即找到最终产品所需要的所有资源，不仅包括JavaScript文件，还包括图片，CSS等等。bdBuild实现了默认的资源发现引擎，你也可以通过创建自己的资源发现引擎来告诉系统如何寻找需要的资源。\
转换资源（transform）。即对每个资源进行相应的处理，这个处理是一个有序可扩展的步骤。例如，读取文本，压缩JavaScript代码，就是2 个不同的转换步骤，前面所有转换步骤的结果是作为下一个步骤的输入，这样实现了对资源的多重加工。你可以通过配置文件来加入自己的资源处理步骤。\
控制打包（build control）。这通过一个配置文件，来精确控制每个资源转换的顺序和依赖关系。bdBuild还在其中引入了Gate的概念，将打包过程分为不同的阶段。\

虽然当前bdBuild系统仍然处于alpha测试阶段，但是Dojo已经对其进行完善和封装，形成了自己的Build系统，在已经发布的Dojo 1.7 beta版本中，我们已经可以使用它来进行Web应用的打包。

3. Dojo Build系统简介

要使用Dojo的Build系统，首先需要下载源码版的Release包，在util/build下就是build相关的工具：

Dojo 对bdBuild系统进行了相当程度的封装，使得针对Dojo的打包变的更加容易，通过引入层（layer）的概念，可以很方便的指定哪些模块应该被压缩到同一个JavaScript文件。同时，Dojo Build系统还会自动把其它文件拷贝到目标文件夹，每个JavaScript文件或者CSS文件都会同时被压缩。下面的代码说明了layer的作用：

\\u0026lt;script type=\"text/javascript\" src="/dojoroot/dojo/dojo.js"\u0026gt;\u0026lt;/script\u0026gt;\\u0026lt;script type=\"text/javascript\" src="/dojoroot/dijit/dijit.js"\u0026gt;\u0026lt;/script\u0026gt;\\u0026lt;script type=\"text/javascript\" src="/js /mylayer.js"\u0026gt;\u0026lt;/script\u0026gt;

这是在页面中引入JavaScript的一段典型代码，其中dojo.js, dijit.js和mylayer.js就是在build系统中配置的3个layer，它们都包含了所有各自需要的代码。通过layer的方式，能够把页面需要的多个JavaScript文件打包成一个，加快了页面的载入速度。layer是在Build的配置文件profile中指定的，如下面的介绍。

Profile的概念

通常一个完整的系统会不只有一个layer，而且对于同一页面，也有可能需要多个layer。所以，Dojo定义了profile这个概念，来描述整个打包的配置和参数。。在dojoroot/util/buildscripts/profiles/下可以看找到系统自带的一些profile文件，它们用于打包标准的dojo.js和dijit.js等等。一个典型的profile文件示例如下：

\dependencies = {\    layers: [\    {\        name: \"dojo/dojo.js\