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

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
    }
]

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

编辑混搭混合方法

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

This mixin allows users to easily require external scripts in their classes. This load process delays application launch (Ext.onReady) until all such scripts are loaded ensuring that your class will have access to its required scripts from the start.

基本用法：

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

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

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

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

Externals library not work after sencha app build production

javascript

sencha-cmd

extjs6-classic

extjs6.2