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

【问题标题】：extjs package build with vendor / third party libs使用供应商/第三方库构建 extjs 包
【发布时间】：2017-03-02 10:14:12
【问题描述】：

在我们的 ExtJS 6 包中，我们使用了一些第三方库来进行日期操作等等。现在，当我们构建它时，我们希望它们被编译/捆绑/缩小到应用程序的主 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 应该对此负责。但似乎使用该包的应用程序永远不会“通知”这些资源。过去，我再次手动将它们添加到应用程序 js 资源中，但我怀疑这是正确的行为。

如何将额外的库捆绑在一个包中。谁能对此有所了解？这里有煎茶的人吗？

提前致谢。罗伯特

【问题讨论】：

【解决方案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：（注意它位于“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 已单独加载。没关系，它应该是这样工作的，所以你可以调试东西。

接下来，构建应用并启动 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 的内容在那里，按照您的需要连接和缩小！ :)

【讨论】：

我应该注意，我在示例中使用了-modern（在生成应用程序时），但这与-classic 甚至通用应用程序一样有效。
嗨，以色列。感谢您非常详细的解释。这就是我现在正在做的方式。但是当我将 js 资源存储在资源文件夹之外时，它们并没有在开发环境中使用。但是再次对其进行测试，它似乎工作正常。尚未测试生产版本，但看起来不错。
所以解决方案是将 "js":["path":"", includeInBundle:true, ....] 添加到 packages.json 中。我现在将它们从资源文件夹复制到外部，并将 js 路径定义更改为新路径。似乎工作正常。不再复制资源。感谢您的帮助
一个更重要的注意事项。我在构建最终生产版本时遇到了几个问题。问题是其中一个或第三方库需要 jQuery（它是一个 WYCIWYG 编辑器 - 对 sencha 感到羞耻，他们仍然没有解决方案），我尝试使用上述方法将 jQuery 包含在包中。这对于开发环境很好，但不适用于生产。 Phantomjs 抱怨他没有找到“$”变量。现在正在将上述技术应用于主应用程序并包括那里的所有供应商。没有更多的问题。似乎“js”文件在生产版本中并非全部可用
.. 至少当它们在不同的包中时不会。还需要其他 rpackage 也无济于事。我认为这不是理想的方式，但只能由煎茶专业人士回答。

【解决方案2】：

我认为您正在寻找...

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

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

【讨论】：