Externals library not work after sencha app build production

Question

I add my externals library in 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
    }
],

When I use sencha app watch all work well, but when i build my project in production I get error in browser: Uncaught ReferenceError: EnjoyHint is not defined.

Answer 1

You should require your additional resources before 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
    }
]

In development mode the additional resources somehow get loaded before the classes that rely on them. In production mode the app.js file becomes the container for all the concateted classes and if you load it before the additional resources, you will get reference errors.

EDIT Mashup mixin approach

Another approach that I really like regarding additional resources loading is by using the 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.

Basic usage:

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

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

One additional thing that this approach provides, as you might noticed, is that it allows you to specify the external dependency directly inside the class that is using it. This way, if you no longer need a certain class and remove it, you don't have to worry to double check the app.json file to make sure that you leave any unused dependencies behind.