使用供应商/第三方库构建的 extjs 包

Question

在我们的 ExtJS 6 包中，我们使用一些第三方库来进行日期操作等。现在，当我们构建它时，我们希望将它们编译/捆绑/缩小到应用程序的主 js 文件中。

如何做到这一点？现在他只自己加载每个资源。

当您在 package.json 中定义以下内容时，至少会复制 Assets :

"resources": [{
     "path": "${package.dir}/resources",
     "output": "shared"
 }]

我在某处读到 output:shared 是 cmd 在编译时复制所必需的。

稍后我们在“js”部分引用它们:

"js": [{
    "path": "resources/my/resource.js",
    "bundle": true
}, {
    "path": "resources/m/resurce02.js",
    "includeInBundle": true
}]

我希望 extjs 现在正在构建一个已编译的 js 资源，其中包括 js 资源。

includeInBundle 应该对此负责。但似乎使用该包的应用程序从未被“告知”该资源。过去我再次手动将它们添加到应用程序 js 资源中，但我怀疑这是正确的行为。

如何将额外的库捆绑在一个包中。谁能阐明这一点？这里有来自 sencha 的人吗？

提前致谢。罗伯特

Answer 1

将文件包含在资源数组中只会完成将它们复制到您的场景不需要的构建输出，因此您可以将它们从该数组中取出。

接下来，如果您使用 "includeInBundle": true 将它们包含在 package.json 的“js”数组中它们将连接到最终的应用程序包。

在开发模式下，文件仍将单独加载以用于调试目的。

编辑:添加示例

首先生成一个新的应用程序和包(我假设 Ext JS 6.2.0 + Sencha Cmd 6.2.1):

sencha -sdk /path/to/ext generate app -modern MyApp /path/to/app
cd /path/to/app
sencha generate package foo

创建 packages/local/foo/src/A.js并粘贴以下内容:

Ext.define('Foo.A',{
    test: function () {
        // This function is defined in an external resource
        someFn();
    }
});

创建外部资源 packages/local/foo/someRes.js :(注意它在“资源”目录之外，以防止它作为单个文件被复制到最终构建输出)

function someFn() {
    console.log("Hi, I'm someFn!");
}

添加someRes.js到 package.json 中的 js 数组:

"js": [{
    "path": "someRes.js",
    "includeInBundle": true
}]

将“Foo.A”添加到 app/Application.js 中的 requires 数组中

requires: [
    "Foo.A"
],

在启动方法中添加以下行:

Ext.create("Foo.A").test();

观看应用

sencha app watch

导航到 http://localhost:1841并检查控制台，您应该看到 "Hi, I'm someFn!" .网络选项卡应显示 someRes.js被单独加载。没关系，这是它应有的工作方式，因此您可以进行调试。

接下来，构建应用程序并启动网络服务器以在浏览器中打开它:

sencha app build then web start

导航到 http://localhost:1841/build/production/MyApp并检查控制台。它应该显示为 "Hi, I'm someFn!"但网络选项卡只显示一个加载的 js 文件:app.js .

如果你检查最后的app.js你会注意到 packages/local/foo/someRes.js 的内容在那里，连接和缩小，正如你所需要的! :)