Dojo 构建 css 和自定义 javascript

Question

我已经设置了一个使用三个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 仅适用于使用声明的 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");
}

索引.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>

Answer 1

我正在使用 cssOptimize，我期望在其中导入所有使用的 css 文件的单个 css 文件。但是我找不到这样的文件。这是dojo压缩它的css的方式还是我的期望错误？如果是这样，我在哪里可以在我的发布文件夹中找到它？

当您使用cssOptimize 时，Dojo 构建会优化和扁平化 CSS 文件。例如，如果您使用 Dijit 的 Claro 主题，当您从源代码加载 dijit/themes/claro/claro.css 时，它包含一系列 @import 语句，这些语句依次加载更多文件。当您从带有cssOptimize 的构建中加载claro.css 时，它是一个包含先前通过这些单独文件引用的所有样式的文件。

如果我从我构建的 js 中调用它，我的 test.js 包含一个函数 test1()，它表明 test1 未定义。我直接调用该函数而不使用dojo。我假设构建自定义 js 仅在它是使用声明的 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 种语言的资源付费。