当前位置 : 主页 > 网页制作 > Dojo >

dojo的最小构建配置如何?

来源:互联网 收集:自由互联 发布时间:2021-06-15
我研究了 build tutorial,发现了 web build(仅1.7.2),并测试了几个例子 – 但是,我找不到一个简单的构建系统的解释. 假设我的应用程序是单个网页: script src="./js/App/other_non_amd_stuff_working_inde
我研究了 build tutorial,发现了 web build(仅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包括.依赖?

任何有关理解构建系统的更好的教程的提示也将受到赞赏.

请参阅此QnA以将您的图层构建到dojo.js文件中.我也可以分享我的经验,因为我花了几个尝试和错误让我的bootstrap正常工作.其实答案很容易在’dojosdk / util / buildscripts / profiles / baseplus.profile.js’文件中找到.

Dojo Custom Build 1.6 into a single file(与新建系统相同的设置,可能仍然会经历一些2.0的更改)

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

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

记住正确地前缀位置

由于您将“App”模块放置在dojo SDK根目录之外,因此在dojoConfig中分配软件包时,需要应用该模块.属性关键字,而不是为图层配置文件的前缀.

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

如何创建子模块层

您可能需要构建一个应用程序的子模块,以便如果弹出对话框(例如,需要额外的额外),则可以在运行时在单独的包中下载.为了确保通过主模块层已经加载的依赖项不包含在子模块层中,您要查找的属性键是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" ]
  ]
}

这应该会导致两个优化的图层文件,一个包含标准的一行dojo.js和一个dojo.cache条目,其中包含您的App中的文件.示例用法如下.请注意,您仍然需要调用任何缓存模块的要求,否则它们将简单地保留在缓存中.

将其放在一起使用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>
网友评论