Dojo构建css和自定义javascript

Rem*_*mco 4 javascript dojo dojo-build

我已经设置了一个使用三个dojo小部件的html页面,我正在尝试使用dojo 1.7.5从它创建一个自定义构建.构建成功留下了一个dojo.js,其中包含使用此构建文件所需的文件:

var dependencies = {
action: "release",
selectorEngine: "acme",
stripConsole: "none",
cssOptimize: "comments.keepLines",

layers: [
    {
        name: "dojo.js",
        dependencies: [
            "dijit.form.ValidationTextBox",
            "dijit.form.DropDownButton",
            "dijit.form.Button",
            "dijit.form.Form",
            "dijit._base",
            "dijit._Container",
            "dijit._HasDropDown",
            "dijit.form.ComboButton",
            "dijit.form.ToggleButton",
            "dijit.form._ToggleButtonMixin",
            "dojo.parser",
            "dojo.date.stamp",
            "dojo._firebug.firebug"
        ]
    }, {
        name: "../test/test.js",
        dependencies: [
            "test.test"
        ]
    }
],

prefixes: [
    [ "dijit", "../dijit" ],
    [ "dojox", "../dojox" ],
    [ "ourpeople", "../ourpeople" ]
]
};
Run Code Online (Sandbox Code Playgroud)

我似乎无法找到答案的问题:

  • 我正在使用cssOptimize,我期待一个单独的css文件,其中导入了所有使用过的css文件.但是我找不到这样的文件.这是dojo压缩它的css的方式还是我的期望错了?如果是这样,我可以在我的发布文件夹中找到它?
  • 我的test.js包含一个函数test1(),如果我从我构建的js中调用它,则表明test1未定义.我直接调用该函数而没有dojo.我假设构建自定义js只有在使用declare的dojo类时才有效吗?
  • 最后一个问题,我需要手动在构建中包含几个dojo文件,例如dojo._firebug.firebug,因为在我的初始构建之后,它仍然使用xhr调用来获取这些文件.手动包含文件后,我仍然看到从dojo到特定资源的xhr调用:dojo/nls/dojo_ROOT和dijit/form/nls/validate.js.这些文件是在构建过程中创建的,因此不能包含在构建配置文件中的依赖项中.任何有关此事的任何想法,因为我想在单个文件中分发dojo.

我是相当新的dojo构建系统和(特别是)所以也许我期待dojo构建系统不是设计用于或者可能会以错误的方式进行此操作,如果有任何提示或建议超过欢迎.

干杯!

Test.js:

function test1() {
    console.log("test1");
}
Run Code Online (Sandbox Code Playgroud)

index.php文件:

<script type="text/javascript" src="js/release/dojo/dojo/dojo.js"></script>
<script type="text/javascript" src="js/release/dojo/test/test.js"></script>

<script type="text/javascript">                     
    dojo.require("dijit.form.ValidationTextBox");
    dojo.require("dijit.form.Button");
    dojo.require("dijit.form.Form");            

    dojo.ready(function() {
        test1();
    });
</script>
Run Code Online (Sandbox Code Playgroud)

Ken*_*iro 6

我正在使用cssOptimize,我期待一个单独的css文件,其中导入了所有使用过的css文件.但是我找不到这样的文件.这是dojo压缩它的css的方式还是我的期望错了?如果是这样,我可以在我的发布文件夹中找到它?

使用时cssOptimize,Dojo构建会优化并平展CSS文件.因此,例如,如果您正在使用Dijit的Claro主题,当您dijit/themes/claro/claro.css从源加载时,它包含一系列@import语句,这些语句又会加载更多文件.claro.css从构建中加载时cssOptimize,它是一个文件,其中包含先前通过这些单独文件引用的所有样式.

我的test.js包含一个函数test1(),如果我从我构建的js中调用它,则表明test1未定义.我直接调用该函数而没有dojo.我假设构建自定义js只有在使用declare的dojo类时才有效吗?

Dojo不希望每个JS文件都是一个"类"使用,declare但它确实希望每个文件都是一个不隐式定义全局变量的模块(因为无论如何都应该在模块中避免使用全局变量).当构建过程遇到它认为或不知道不是AMD的模块时,它会认为它是一个遗留的Dojo模块并将其包装在样板中以将其转换为AMD.此样板文件最终将您的全局变量封装到函数范围中,因此它们不再是全局变量.

鉴于您正在使用Dojo 1.7,理想情况下应该使用AMD格式来定义和使用模块.dojotoolkit.org有一个介绍AMD模块的教程,如果你从Dojo 1.6或更早版本迁移,还有一个帮助你过渡的教程.

最后一个问题,我需要手动在构建中包含几个dojo文件,例如dojo._firebug.firebug,因为在我的初始构建之后,它仍然使用xhr调用来获取这些文件.手动包含文件后,我仍然看到从dojo到特定资源的xhr调用:dojo/nls/dojo_ROOT和dijit/form/nls/validate.js.这些文件是在构建过程中创建的,因此不能包含在构建配置文件中的依赖项中.任何有关此事的任何想法,因为我想在单个文件中分发dojo.

我不确定你为什么会看到dojo/_firebug/firebug被自动加载,但根据你上面所说/上面显示的内容,我会立即建议如下:

  • 将您的模块/代码转换为AMD格式
  • 添加async: true到您的dojoConfig将导致加载程序以异步模式运行,这意味着:
    • 它通过脚本注入而不是同步XHR加载模块
    • 它不会无条件地加载所有 dojo/_base
  • 添加customBase: true到您的dojo/dojo图层,这将阻止构建默认包含所有dojo/_base

至于nls模块,在某种程度上仍然可以看到所请求的NLS文件,但是如果您的构建配置正确,那么每层通常只有一个NLS文件就是这样(事实上您会看到单独的validate潜在客户请求)我认为你没有涵盖所有的依赖项).NLS保持独立的原因是因为每个语言环境都有一个NLS包,并且将所有语言环境构建到一个层中没有意义 - 这将迫使人们用他们不关心的20种语言来支付资源.