`
子衿青青
  • 浏览: 109380 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Dojo Build系统介绍

 
阅读更多

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的应用来进行打包。


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

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

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

  1. 发现资源(discovery)。即找到最终产品所需要的所有资源,不仅包括JavaScript文件,还包括图片,CSS等等。bdBuild实现了默认的资源发现引擎,你也可以通过创建自己的资源发现引擎来告诉系统如何寻找需要的资源。
  2. 转换资源(transform)。即对每个资源进行相应的处理,这个处理是一个有序可扩展的步骤。例如,读取文本,压缩JavaScript代码,就是2 个不同的转换步骤,前面所有转换步骤的结果是作为下一个步骤的输入,这样实现了对资源的多重加工。你可以通过配置文件来加入自己的资源处理步骤。
  3. 控制打包(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的作用:

<script type="text/javascript" src="/dojoroot/dojo/dojo.js"></script>
<script type="text/javascript" src="/dojoroot/dijit/dijit.js"></script>
<script type="text/javascript" src="/js /mylayer.js"></script>

这是在页面中引入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",
        dependencies: [
            "dijit._Widget",
            "dijit._Templated",
            "dojo.fx",
            "dojo.NodeList-fx"
        ]
    }
    ],
    prefixes: [
    [ "dijit", "../dijit" ],
    [ "dojox", "../dojox" ],
    [ "myNamespace", "~/src/myNamespace" ]
    ]
}

文件中定义了一个全局对象dependencies。包含2个必须属性:layers和prefixes。在layers数组中,可以定义多个layer。每个layer的name属性表明了输出的文件,是一个相对于releaseDir(后面介绍如何指定)的相对路径。dependencies数组包含了这个layer需要的模块。Build系统会去递归寻找所有依赖的模块并将它们全部打包进来。

另一个属性是prefixes数组,其中定义的是模块映射关系,它告诉系统到哪里去寻找一个Dojo模块。其作用和应用代码中使用的 dojo.registerModulePath是一样的。Prefixes中的每个元素也是一个数组,包含两个元素,前面是模块前缀,比如 “dijit”,后面一个是相对于util/路径的相对路径,比如“../dijit”。

有了这个profile,我们就可以来进行打包了。在Dojo中,是通过util/build/build.js来完成的。因为Build系统自身的代码都是JavaScript,因此需要一个JavaScript运行环境,现在同时支持的是NodeJS和Rhino。前者通常需要Linux或者 Cygwin环境,后者则需要Java环境的支持。NodeJS比Rhino运行速度快的多,条件允许的话,大家尽可能用NodeJS来进行build。下面的代码演示了如何开始一个build:

使用NodeJS:

node dojoroot/dojo/dojo.js load=build [options] 

使用Java:

java -Xms256m -Xmx256m -jar path/to/util/shrinksafe/js.jar path/to/dojo/dojo.js baseUrl=path/to/dojo load=build [options]

可以看到,build.js文件接受多个参数(options),完整的参数列表可以通过指定—help参数来获取,比如releaseDir指定了要输出 build结果的文件夹。Action指定了要执行的操作序列,例如action=clean,check,release。当然还有一个最关键的参数:profile,它指定了打包的配置文件,从而控制整个打包的过程。例如:

Node dojoroot/dojo/dojo.js load=build profile=/home/dojo/my.profile.js action=check,release

这里的profile可以是如下多种类型:

  • 如果是html文件,则分析其中的dojo.require,从而自动生成一个包含所有模块的profile
  • 如果是标准profile文件,则直接处理
  • 如果是文件夹,则扫描其中的所有以profile.js结尾的文件,分别进行打包。

命令行的完整参数如下面的表格所示:

参数 描述
--build <filename> 指定进行build control的脚本。
--profile <filename> 指定profile文件。
--action 指定要执行哪些操作,比如check, clean, release。
--releaseDir 输出build结果的文件夹。
--version 指定版本号。

Layer的定义

一个profile中可以有多个layer。Layer的配置参数除了上面介绍的name和dependencies之外,还有一个属性非常有用,那就是:layerDependencies。它指定了所依赖的layer,所有出现在指定layer中的模块,都不会被包含在当前模块中。例如,假设有2个页面P1和P2,他们所共用的代码被打包进layerA,各自特殊的则被打包进layerB和layerC。那么在描述layerB和layerC时就可以指定他们的layerDependencies为layerA,从而layerA中的代码只会被用户load一次,提高了加载速度。而所有的layer 都回隐含的依赖于标准的dojo.js layer。所以在dojo.js中出现的代码是不会出现在其它的layer中的。

除此之外,layer还支持以下可选属性:

copyrightFile 指定一个包含版权信息的文本文件,其内容将被包含在生成的layer文件中。
customBase 前面提到所有layer会依赖于标准的dojo.js。这个属性可以改变这个默认行为,改为依赖于一个定制的dojo.js。可能的场景是,你需要的是一个更小的dojo.js。比标准的小很多。
keepRequires 一个数组,包含需要在运行是require的模块。Dojo中可以用dojo.require()来引入一个module,在build的时候会直接在layer中引入这些module。如果你需要让某些文件需要时再require,可以在这个参数中指定。
discard 布尔类型。表示当前layer是否需要写入一个文件。默认为false,即一个layer当然要被写入一个单独的文件。但在某些情况下,一些layer只会作为其它layer的依赖而存在,这时此参数可以设置为true。

4.小结

bdBuild 是一个灵活、可扩展的开源build系统,使用JavaScript写成,并运行于Node.js, Rhino等JavaScript环境。非常适合前端人员创建自定义的打包过程。Dojo自带的build系统就是基于bdBuild,本文简要介绍了其原理和用法,虽然对于一般的Dojo开发这已经足够,但是如果要深入理解bdBuild,甚至开发其中的插件,仍然需要更多深入的了解。有兴趣的同学可以参考其文档,继续学习。



本文已经首发于InfoQ中文站,版权所有,原文为《Dojo Build系统介绍》,如需转载,请务必附带本声明,谢谢。
InfoQ中文站是一个面向中高端技术人员的在线独立社区,为Java、.NET、Ruby、SOA、敏捷、架构等领域提供及时而有深度的资讯、高端技术大会如QCon、线下技术交流活动QClub、免费迷你书下载如架构师》等。

分享到:
评论

相关推荐

    DOJO 学习文档+Demo

    DOJO 使用 CommonJS 规范实现了一套模块化系统,允许开发者将代码分割成多个独立模块,便于组织和重用。通过 `dojo/require` 或 `require()` 函数来加载和依赖其他模块,实现了代码的异步加载,降低了页面初始化时的...

    dojo起步学习的好例子

    9. **Dojo Build System**:Dojo的构建系统允许优化和打包代码,减少HTTP请求,提高加载速度。 在提供的"ajax"子文件中,你可能发现各种AJAX相关的Dojo示例,比如如何使用Dojo进行简单的GET请求,如何处理响应数据...

    DOJO API 中文参考手册

    10. **Dojo Build System**: Dojo的构建系统允许开发者优化和打包应用程序,去除未使用的代码,合并和压缩资源,以提升页面加载速度和降低服务器负担。 通过深入学习和实践这个DOJO API中文参考手册,开发者能够...

    dojo工具包zip

    6. **Dojo Build System**:Dojo的构建系统能够优化和压缩JavaScript代码,合并所有依赖的模块,减少HTTP请求,提升网页加载速度。此外,还可以进行代码混淆和压缩,提高代码安全性。 7. **i18n和l10n**:Dojo提供...

    Dojo构建Ajax应用程序源码(包括书中用到的dojo-release-1.1.2)

    10. **Dojo Build System**:Dojo的构建系统允许开发者优化和打包应用程序,去除不必要的代码,减小文件大小,提高加载速度。 通过分析这个源码包,开发者不仅可以了解Dojo 1.1.2版本的具体实现,还能对比学习Dojo...

    dojo权威入门教程

    最后,本教程还会介绍Dojo的工具链,包括构建工具`dojo-build`和测试工具`dojotoolkit.org/test`,它们能帮助优化代码、合并模块、压缩资源,以及自动化测试,确保项目的质量和性能。 通过《dojo权威入门教程》,你...

    dojo所有jar包dojoroot

    5. **Dojo Build System**:Dojo构建系统,允许开发者根据项目需求选择所需模块并进行优化打包,减少网络传输的资源大小,提高页面加载速度。 6. **AMD (Asynchronous Module Definition)**:Dojo是AMD模块定义规范...

    图书:Dojo入门

    《Dojo入门》这本书主要介绍了Dojo JavaScript库的使用,帮助初学者快速掌握这个强大的前端开发工具。Dojo是一个开源的JavaScript框架,旨在提供一站式的解决方案,包括UI组件、数据管理、动画效果、Ajax交互等功能...

    精通Dojo(中文版).

    Dojo的核心特性之一是它的模块系统AMD(Asynchronous Module Definition),这使得代码组织更加有序,避免了全局变量污染,提高了代码的可维护性和复用性。书中会详细介绍如何使用dojo/require和dojo/ready等模块...

    dojo快速入门(中文版)

    dojo的核心优势在于其内建的package系统,它解决了模块依赖问题,而build系统则能对代码进行合并和优化。D.O.H(Dojo Objective Harness)框架使得单元测试和回归测试变得简单易行。通过`dojo.require()`,你可以...

    用于dojo学习

    5. **Dojo工具和构建系统**:可能包含关于dojo-build系统的使用,这是Dojo的一个重要特性,用于优化和打包应用代码。 6. **实战项目**:提供一些实际的开发案例,让学习者通过动手实践来加深理解。 7. **性能优化*...

    dojo官方教程中文版 pdf 非扫描

    教程中还会涵盖Dojo的工具链,如build系统,用于优化、压缩和打包代码,提高页面加载速度。另外,Dojo的国际化和本地化支持也是其特色之一,使得应用程序能适应不同语言和地区的需求。 "dojo官方教程中文版 pdf 非...

    dojo-release-1.10.4

    8. **工具和构建系统**:Dojo有强大的构建工具`build system`,可以进行模块合并、压缩、混淆等,以优化生产环境的性能。`dojo/_base/kernel`模块中的`dojo/_base/xhr`用于异步请求,可以配合构建系统优化资源加载。...

    Dojo JS框架最新版

    Dojo的核心之一是它的模块系统,即AMD(Asynchronous Module Definition)模式。这种模块加载机制允许开发者按需加载依赖,减少了初始页面加载时的负担,提高了页面加载速度。开发者可以使用`require()`和`define()`...

    学习dojo

    - **模块化系统**:Dojo采用了AMD(Asynchronous Module Definition)模块加载机制,允许开发者按需加载和组织代码,降低了页面加载时间并提高了性能。 - **DOM操作**:Dojo提供了简便的DOM操作接口,如`dojo.query...

    Pragmatic.Bookshelf.Mastering.Dojo.Jun.2008.pdf

    这本书详细介绍了Dojo工具集,旨在帮助开发者充分利用这个强大的JavaScript框架,提升Web应用开发的效率和质量。 Dojo是一个开源的JavaScript库,它提供了一系列高级的开发工具,包括DOM操作、事件处理、Ajax通信、...

    《DOJO权威指南(中文版)2》PDF

    7. **DOJO工具链**:包括构建工具`build system`,用于优化和打包代码,以及`dijit/form/ValidationTextBox`等高级功能,帮助开发者提高开发效率。 8. **DOJO移动开发**:随着移动设备的普及,DOJO也提供了对移动...

    dojo 官方教程 中文翻译

    此外,这个完整版教程还可能涵盖Dojo的高级特性和最佳实践,如性能优化、测试和调试技巧、Dojo的构建工具(build system)以及如何与其他技术(如jQuery或React)集成。 通过阅读"dojo 官方教程中文翻译(完整版...

    dojo china extjs 视频教程源码

    7. **性能优化**:理解如何利用Dojo的优化工具如build系统来压缩、合并和预编译代码,以提升应用程序的加载速度和运行效率。 通过这个教程,你不仅能够提升在Dojo和ExtJS上的技能,还能学习到如何将不同框架融合,...

    dojo最新版本驱动

    6. **Dojo Build System**:Dojo的构建系统允许开发者对源代码进行优化,合并、压缩和预编译,以减少HTTP请求,提升页面加载速度。在1.2.3版本中,这个系统已经相当完善。 7. **dojo-release-1.2.3**:这个文件名...

Global site tag (gtag.js) - Google Analytics