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

Question

在我们的 ExtJS 6 包中，我们使用一些第三方库来进行日期操作等。现在，当我们构建它时，我们希望它们从应用程序 compiled/bundled/minified 进入主 js 文件。

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

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

"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 应该对此负责。但似乎使用该包的应用程序从未 "informed" 关于此资源。过去我再次手动将它们添加到应用程序 js 资源中，但我怀疑这是正确的行为。

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

提前致谢。罗伯特

Answer 1

我认为您正在寻找...

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

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

Answer 2

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

接下来，如果您将它们包含在 package.json 和 "includeInBundle": true 的 "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：（注意它在"resources"目录之外，以防止它作为单个文件被复制到最终构建输出）

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 的内容在那里，按照您的需要串联和缩小！ :)

extjs package build with vendor / third party libs