0

我在 app.json 中添加了我的外部库：

"js": [
    {
        "path": "app.js",
        "bundle": true
    },
    {
        "path": "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js",
        "remote": true

    },
    {
        "path": "https://rawgit.com/darron1217/enjoyhint.js/master/dist/enjoyhint.js",
        "remote": true
    }
],

当我使用sencha app watch一切正常时，但是当我在生产中构建我的项目时，我在浏览器中出现错误：Uncaught ReferenceError: EnjoyHint is not defined.

4

1 回答 1

1

您应该在之前需要额外的资源app.js。

"js": [
    {
        "path": "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js",
        "remote": true

    },
    {
        "path": "https://rawgit.com/darron1217/enjoyhint.js/master/dist/enjoyhint.js",
        "remote": true
    },
    {
        "path": "app.js",
        "bundle": true
    }
]

在开发模式下，附加资源会在依赖它们的类之前以某种方式加载。在生产模式下，app.js文件变为the container for all the concateted classes，如果您在其他资源之前加载它，您将收到参考错误。

编辑混搭混合方法

我真正喜欢的关于额外资源加载的另一种方法是使用Ext.mixin.Mashup混合。

这个 mixin 允许用户在他们的类中轻松地需要外部脚本。此加载过程会延迟应用程序启动 (Ext.onReady)，直到加载所有此类脚本，以确保您的类从一开始就可以访问其所需的脚本。

基本用法：

Ext.define('EnjoyHint', {
    mixins: ['Ext.mixin.Mashup'],

    requiredScripts: [
        'https://rawgit.com/darron1217/enjoyhint.js/master/dist/enjoyhint.js'
    ],
    ...
});

正如您可能注意到的，这种方法提供的另一件事是，它允许您直接在使用它的类中指定外部依赖项。这样，如果您不再需要某个类并将其删除，则不必担心仔细检查app.json文件以确保留下任何未使用的依赖项。

于 2018-06-30T13:43:43.810 回答