11

我研究了构建教程，找到了web 构建（仅限 1.7.2），并测试了几个示例 - 但是，我找不到构建系统的简单解释。

假设我的应用是一个网页：

<script src="./js/App/other_non_amd_stuff_working_independently.js">
<script src="./js/lib/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="./js/App/Main.js">

Dojo SDK 位于 ./lib/ 中，Main.js 包含 Dojo 配置 + 应用启动：

require({
    packages:[{
        name:"App",
        location:"../../App"
    }]
},  
[ "dojo/query",
  "dijit/layout/BorderContainer", 
  "App/Foo",
  "dojo/domReady!"], function(query, BorderContainer, Foo) { ... });

我现在的问题很简单：如何从我所有的 Dojo/AMD 内容中创建一个脚本文件？我只想更换

<script src="./js/lib/dojo/dojo.js" data-dojo-config="async: true"></script>
<script src="./js/App/Main.js">

与单

<script src="./js/Main.minified.js">

让构建系统在这方面工作似乎有些不重要。它要么尝试将 ./App/ 中的所有文件转换为 AMD 模块（这还不是我想要的 ..），要么无法找到 App/Main。我尝试构建一个构建配置文件（app.profile.js），但我不明白这一点，只是它增加了（IMO 不必要的）复杂性。如何使构建系统仅连接我的 App/Main.js 包括。依赖项？

任何有关理解构建系统的更好教程的提示也值得赞赏。

4

1 回答 1

4

请参阅此 QnA 以将您的层构建到 dojo.js 文件中。我不妨分享一下我的经验，因为我花了一些试验和错误才能让我的引导程序正常工作。实际上，答案很容易在“dojosdk/util/buildscripts/profiles/baseplus.profile.js”文件中找到。

Dojo 自定义构建 1.6 到单个文件中（与新构建系统相同的设置，但对于 2.0 可能仍会进行一些更改）

如何创建与dojo.js缝合在一起的主应用层

dependencies ={
  layers:  [
      {
      name: "dojo.js", // overwrites regular dojo.js and ++'s your layer
      dependencies: [
         "app.main"
      ]
  }
}

请记住正确地为位置添加前缀

由于您将“App”模块放置在 dojo SDK 根目录之外，因此需要packages在dojoConfig. 但是，属性键prefixes用于图层配置文件。

prefixes: [
    [ "dijit", "../dijit" ],
    [ "dojox", "../dojox" ],
    [ "App", "../../App" ]
]

如何创建子模块层

您可能想要构建您的应用程序的子模块，以便如果弹出对话框例如需要额外的额外 - 它们可以在运行时在单独的包中下载。为了确保已经通过您的main-module-layer加载的依赖项不包含在sub-module-layer中，您要查找的属性键是layerDependencies.

它看起来像这样的组合结果： 

dependencies ={
  layers:  [
      {
        name: "../dojo/dojo.js", // overwrites regular dojo.js and ++'s your layer
        dependencies: [
         "app.Main"
        ]
      }, {
        name: "../../App/JITModule.js",
        layerDependencies: [
         "../../App/Main"   // tells this layer that the dependencychain in Main is allready loaded (programmer must make sure this is true ofc)
        ]
        dependencies: [
         "App.JustInTimeDialog"
        ]
      }
  ]
  prefixes: [
    [ "dijit", "../dijit" ],
    [ "dojox", "../dojox" ],
    [ "App", "../../App" ]
  ]
}

这应该会产生两个优化的层文件，一个带有标准的 one-line-dojo.js加上一个 dojo.cache 条目，其中包含来自您的应用程序的文件。示例用法如下。请注意，您仍然需要调用require任何缓存的模块，否则它们将仅保留在缓存中。

将其放在 HTML 中

注意将您的 dojoConfig 放入 ./js/App/Main.js 文件将无法按预期工作，dojo.js 常规内容会在图层上方加载。

<head>
  <script>
     function JITDialog() {
          require([ "App.JITDialog" ], function(dialoglayer)  {
             var dialog = new App.JustInTimeDialog();
             dialog.show();
          });
     }

     var dojoConfig = {
         async: true,
         packages:[{
            name:"App",
            location:"../../App"
         }]
     }
  </script>

  <script src="./js/lib/dojo/dojo.js"></script>

  <script>    
     require("App.Main", function() {
        // loads the layer, depending on the structure of App.Main class,
        // you can call your initializations here
        var app = new App.Main();
        app.run();
     });
  </script>

</head>
<body>
  <button onclick="JITDialog();">
      Download sub-module-layer and show a dialog on user interaction
  </button>
</body>
于 2012-08-16T20:19:41.700 回答