Question

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引导，
远程，
includeInBundle，
捆绑/ *最终入口点，此处包含所有捆绑的js。 * /

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

所以我的问题是...... JS文件＆＃34; library1.js＆＃34;，＆＃34; library2.js＆＃34;，＆＃34; library3.js＆＃34;，＆＃34; library4.js＆＃34 ;.它们将被处理，加载和运行的顺序以及原因......

作为这个问题的一部分：

依赖项Ext.define（）何时准备就绪？
何时/如何加载覆盖？

Answer 1

From what I’ve gathered you want Sencha/bootstrap to be your first two entries and you want app.js to be your last entry. You want app.js last since it’s where all the bundled entries end up. As for bootstrap, I think I’ve removed all the entries for it aside from bootstrap.js due to loading order changing depending on if it's run from a built app or not (From what I’ve been able to glean from the internet and my own testing).

I myself load all Ext components into the bundle and have the overrides load last.

So from what little I know about this the loading order when debugging would be:

touch/sencha-touch.js
bootstrap.js
overrides.js
library1.js
library2.js
library3.js
library4.js
app.js

When running from a build I believe it would be the following:

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

From what I understand the remote tag doesn't actually change load order, it just means that the build doesn't copy the script over. You'd usually use that for loading remote libraries (ie: scripts on another server) or for when you manage the copying of the scripts over yourself.

使用Sencha的app.json来管理Javascript加载顺序和依赖项

1 个答案: