Search code examples
extjsextjs5extjs6sencha-cmdextjs6-classic

extjs package build with vendor / third party libs

In our ExtJS 6 packages we are using some third party libs for date manipulation and so on. Now when we build it we want them to be compiled/bundled/minified into the main js file from the application.

How can this be done? Right now he only loads every resource on its own.

When you define the following in your package.json the assets will be copied at least:

"resources": [{
     "path": "${package.dir}/resources",
     "output": "shared"
 }]

I was reading somewhere that the output:shared is required that the cmd is copying on compile.

Later we reference them in the "js" section:

"js": [{
    "path": "resources/my/resource.js",
    "bundle": true
}, {
    "path": "resources/m/resurce02.js",
    "includeInBundle": true
}]

I would expect that extjs is now building one compiled js resource which includes both js resources.

The includeInBundle should be responsible for that. But it seems that the application which uses the package is never "informed" about this resources. In the past i was adding them in the application js resources manually again but I doubt that this is the correct behaviour.

How can extra libs be bundled within a package. Who can shed some light on that? Anyone from sencha here?

Thanks in advance. Robert

Solution

  • Including the files in the resources array will only accomplish getting them copied to the build output which is not needed in your scenario, so you can take them out from that array.

    Next, if you include them in the "js" array in package.json with "includeInBundle": true they'll get concatenated to the final app bundle.

    In dev mode, files will still be loaded individually for debug purposes.

    Edit: Added example

    Start by generating a new app and package (I'm assuming Ext JS 6.2.0 + Sencha Cmd 6.2.1):

    sencha -sdk /path/to/ext generate app -modern MyApp /path/to/app
cd /path/to/app
sencha generate package foo

    Create packages/local/foo/src/A.js and paste the following:

    Ext.define('Foo.A',{
    test: function () {
        // This function is defined in an external resource
        someFn();
    }
});

    Create the external resource packages/local/foo/someRes.js: (note it is outside the "resources" dir to prevent it from being copied to the final build output as an individual file)

    function someFn() {
    console.log("Hi, I'm someFn!");
}

    Add someRes.js to the js array in package.json:

    "js": [{
    "path": "someRes.js",
    "includeInBundle": true
}]

    Add "Foo.A" to the requires array in app/Application.js

    requires: [
    "Foo.A"
],

    Add the following line to the launch method:

    Ext.create("Foo.A").test();

    Watch the app

    sencha app watch

    Navigate to http://localhost:1841 and check the console, you should see "Hi, I'm someFn!". The network tab should show that someRes.js was loaded individually. This is ok, it is how it is supposed to work so you can debug things.

    Next, build the app and start a web server to open it in the browser:

    sencha app build then web start

    Navigate to http://localhost:1841/build/production/MyApp and check the console. It should read "Hi, I'm someFn!" but the network tab only shows one js file loaded: app.js.

    If you inspect the final app.js you'll note that the contents of packages/local/foo/someRes.js are there, concatenated and minified, just as you need! :)