使用Sencha's app.json来管理Javascript加载顺序和依赖关系

Using Sencha's app.json to manage Javascript load order and dependencies

本文关键字：加载 Javascript 管理 顺序 关系 依赖 json Sencha app 使用      更新时间：2023-11-26

Sencha Touch使用Microloader来管理Javascript文件的组装和加载。

我的问题是，我还没有找到一个好的资源来充分解释所有选项，以及它们如何影响Javascript文件的处理、加载和运行顺序。

需要理解这一点，以便开发人员能够正确管理JS依赖关系，包括Ext.define（）何时可用，以及何时加载重写。

Sencha提供的资源：http://docs.sencha.com/cmd/6.x/microloader.html，涉及了几个选项，但不是全部，并且没有讨论这会如何影响Javascript的运行顺序。

一个典型的js:部分可能如下所示：

   "js": [
      {
         "path": "touch/sencha-touch.js",
         "x-bootstrap": true
      },
      {
         "path": "bootstrap.js",
         "x-bootstrap": true
      },
      {
         "path": "overrides.js",
         "x-bootstrap": true
      },
      {
         "path": "library1.js",
         "includeInBundle": true
      },
      {
         "path": "library2.js",
         "remote": true
      },
      {
         "path": "library3.js"
      },
      {
         "path": "library4.js",
         "x-bootstrap": true
      },
      {
         "path": "app.js",
         "bundle": true,
         "update": "delta"
      }

据我所知，影响装载顺序的选项有：

  • x-bootstrap
  • 远程
  • 包括Boudle
  • bundle/*最终入口点，此处包含所有捆绑的js*/

此外，还有列表中文件的顺序。

所以我的问题是…JS文件"library1.JS"、"library2.JS"，"library3.JS"answers"library4.JS"。它们的处理、加载和运行顺序是什么，为什么。。。。

作为这个问题的一部分：

  • 依赖项Ext.define（）什么时候准备好
  • 何时/如何加载覆盖

根据我收集到的信息，您希望Sencha/bootstrap是您的前两个条目，您希望app.js是您的最后一个条目。你希望app.js是最后一个，因为它是所有捆绑条目的结束位置。至于bootstrap，我想我已经删除了bootstrap.js之外的所有条目，因为加载顺序会根据它是否从构建的应用程序中运行而变化（根据我从互联网和自己的测试中收集到的信息）。

我自己将所有Ext组件加载到bundle中，并最后加载覆盖。

因此，据我所知，调试时的加载顺序是：

  1. touch/sencha-touch.js
  2. bootstrap.js
  3. overrides.js
  4. library1.js
  5. library2.js
  6. library3.js
  7. library4.js
  8. app.js

当从构建运行时，我相信它会是以下内容：

  1. bootstrap.js
    1. touch/sencha-touch.js
    2. overrides.js
    3. library4.js
  2. library2.js
  3. library3.js
  4. app.js
    1. library1.js

据我所知，远程标记实际上并没有改变加载顺序，它只是意味着构建不会复制脚本。您通常会使用它来加载远程库（即：另一台服务器上的脚本），或者在自己管理脚本复制时使用它。

相关文章：