Dojo构建css和自定义javascript

我已经设置了一个使用三个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文件.但是我找不到这样的文件.这是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");
}

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>

解决方法

I’m using cssOptimize,I was expecting a single css file in which all the used css files were imported. However I can’t find such a file. Is this the way dojo compresses it’s css or are my expectations wrong? If so where can I find it in my release folder?

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

My test.js contains a function test1() if I call it from my built js it states test1 is not defined. I call that function directly without dojo. I’m assuming that building custom js only works if it is a dojo class using declare?

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

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

Final question,I needed to include several dojo files in the build manually such as dojo._firebug.firebug since after my initial build it was still using xhr calls to get those files. After including the files manually I still see xhr calls from dojo to specific resources: dojo/nls/dojo_ROOT and dijit/form/nls/validate.js. Those files are created during the build process and therefore can’t be included in the dependencies in the build profile. Anyone any thoughts on this matter since I’m looking to distribute dojo in a single file.

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

>将您的模块/代码转换为AMD格式
>为dojoConfig添加async：true,这将导致加载程序以异步模式运行,这意味着：

>它通过脚本注入而不是同步XHR加载模块
>它不会无条件地加载所有dojo / _base

>添加customBase：true到你的dojo / dojo层,这将阻止构建默认包含所有dojo / _base

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

Dojo构建css和自定义javascript

解决方法

相关文章