Question

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

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

在package.json中定义以下内容时，资产将至少被复制：

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

我正在读某个地方，cmd在编译时要复制output:shared。

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

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

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

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

如何在程序包中捆绑额外的lib。谁可以对此有所了解？来自sencha的人吗？

提前致谢。罗伯特

Answer 1

我认为你正在寻找......

"js": [{
  "path": "library.js",
  "remote": true
}]

这将使脚本从主代码库中外部化，但在启动时加载它。

Answer 2

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

接下来，如果你将它们包含在＆＃34; js＆＃34; package.json中的数组与"includeInBundle": true一起，它们会被连接到最终的应用包。

在开发模式下，仍会单独加载文件以进行调试。

编辑：添加了示例

首先生成一个新的应用和包（我假设是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 :(注意它位于＆＃34; resources＆＃34; dir之外，以防止它作为单个文件被复制到最终构建输出）

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

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

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

添加＆＃34; Foo.A＆＃34;到app/Application.js

中的requires数组

requires: [
    "Foo.A"
],

将以下行添加到启动方法：

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

观看应用

sencha app watch

导航至http://localhost:1841并检查控制台，您应该看到"Hi, I'm someFn!"。网络选项卡应显示已单独加载someRes.js。这没关系，它是如何工作的，所以你可以调试东西。

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

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的内容在那里，连接和缩小，就像您需要的那样！：）