Question

我在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。

Answer 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，如果在其他资源之前加载该文件，则会出现参考错误。

EDIT （混搭混搭方法）

我非常喜欢关于其他资源加载的另一种方法是使用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文件以确保您保留了所有未使用的依赖项。

sencha应用程序构建生产后，外部库不起作用

1 个答案: