Is it possible to use Sencha CMD to split the framework out of an app while keeping all ExtJS code out of the index file?

Question

I'm building an app with ExtJS 6 and Sencha CMD 6.5.4.

I have some custom scripts running in my app's index.html and I'd like to keep all ExtJS confined to the minified bundle(s) generated by Sencha CMD, keeping all bootstrap code out of the index file. I've succeeded in doing that by following this post and putting this in app.json:

"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
    "microloader": {
        "path": "microloader.js",
        "embed": false,
        "enable": false
    }
},

I would also like to split the ExtJS framework into a separate bundle, and reference both that and the custom app bundle as script tags in index.html. I've succeeded in doing that by following this post and putting this in app.json:

"output": {
    ...
    "framework": {
        "enable": true
    }
}

Question: Is it possible to accomplish both these things at the same time? If I try to do both, CMD inserts the Boot.js module into my custom app bundle and not the framework bundle. The framework bundle would need to load first in the client, but it fails with JS errors because Ext.Boot is not yet defined.

Is there a way to have CMD insert the Ext.Boot code into the start of the framework.js bundle rather than into the custom app bundle? It could probably be solved by letting CMD do what it wants to do and create its own index.html file containing an inline definition for Ext.Boot independent of either bundle, but again I have instructions to avoid this if at all possible.

The Sencha CMD guide for app.json seems rather incomplete - I'm not sure where to find clear, complete documentation for all the options available for this file.

Do you want to separate out framework code and custom code into different respective files and then load them through index.html ? — Tejas
@Tejas yes that's what I need; apologies if it wasn't clear. I'm just trying to accomplish this while generating index.html independently of CMD and without having any inline ExtJS "loader" code (Ext.Boot) in that file, and in such a way that framework.js can load successfully before app.js in the client. My attempts have failed because CMD puts the "loader" code into app.js and not framework.js, leading to errors when framework.js tries to load. — StackMonster
I have accomplished same thing of separation of all app.js code into framework code & app code separate. As far as I remember we need to change somewhere in js-impl.js which is present in workspace(you can search for it in any editor).I know this because I debugged their framework of separation of code. If possible please share that file from Extjs 6 here, as I currently dont have extjs 6 workspace. — Tejas
@Tejas thanks for the help - I decided on a less elegant solution where I just manually concatenate Boot.js at the front of the framework bundle during my build. It's not ideal but time was short and the lack of CMD documentation was frustrating. It's possible I might revisit this in the future. — StackMonster
There is no documentation for same even I tried different solution other than yours. — Tejas

Gurumohan Singh Gurumohan Singh · Accepted Answer · 2020-10-22T07:48:29

Try this

        "base": "../",
        "page": "index.html",
        "manifest": "${build.id}.json",
        "js": "${build.id}/app.js",
        "appCache": {
            "enable": false
        },
        "resources": {
            "path": "${build.id}/resources",
            "shared": "resources"
        }
    },

Is it possible to use Sencha CMD to split the framework out of an app while keeping all ExtJS code out of the index file?

1 Answers