Dojo构建css和自定义javascript

时间:2014-07-31 08:32:28

标签: 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" ]
]
};

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

  • 我正在使用cssOptimize,我期待一个单独的css文件,其中导入了所有使用过的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");
}

的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>

1 个答案:

答案 0 :(得分: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有一个tutorial引入AMD模块,如果您从Dojo 1.6或更早版本迁移,还有一个tutorial可以帮助您转换。

  

最后一个问题,我需要在构建中手动包含几个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种语言来支付资源。

相关问题