extjs package build with vendor / third party libs

Question

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

score 0 · Answer 1 · answered Mar 02 '17 at 10:26

0

I think that you're looking for...

"js": [{
  "path": "library.js",
  "remote": true
}]

This will keep the script externalized from your main codebase but load it on startup.

See http://docs.sencha.com/cmd/guides/microloader.html for the full docs.

answered Mar 02 '17 at 10:26

Steve Drucker

651
5
4

Hi Steve. Was hoping for you :-) But i want exactly the opposite. Want them to be included. – Robert Mar 02 '17 at 10:42

Israel Roldán · Accepted Answer · 2017-03-02T14:10:07.180

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! :)

I should note that I used `-modern` in my example (when generating the app) but this works just as fine with `-classic` or even with a universal app. — Israel Roldán, Mar 02 '17 at 14:13
Hi Israel. Thanks for your very detailed explanation. Thats the way i am doing it right now. But when i store the js resources outside of the resources folder they were not used in the dev environment. But was testing it again and it seems to work fine. Was not testing the production build yet but it seems good. — Robert, Mar 02 '17 at 16:27
So solution is to add the "js":["path":"", includeInBundle:true, ....] to the packages.json. I was now copying them outside from resources folder and changed the js path definition to the new path. Seems to work fine. The resources are not copied anymore. Thanks for helping — Robert, Mar 02 '17 at 16:30
One more important note. I had several problems with building the final production build. Problem was that one of or third party libs requires jQuery (its a WYCIWYG Editor - shame on sencha that they still have no solution there) and i tried to include the jQuery in the package with the method above. That was working fine for the development env but not for production. Phantomjs was complaining that he didnt find the "$" variable. Was now applying the above technique to the main app and including all vendors there. No more problems. Seems "js" files are not all available on production build — Robert, Mar 03 '17 at 08:49
.. At least not when they are in a different package. Also requiring the othe rpackage doesnt help. I think thats not the desired way but that only can be answered by a sencha pro. — Robert, Mar 03 '17 at 08:50
This last bit definitely sounds like a bug, I think the phantom task runner may not be passing the whole set of files. If you can file a support ticket or report it in the forums, I'll try to squeeze it into the next release ;) — Israel Roldán, Mar 03 '17 at 18:15

extjs package build with vendor / third party libs

2 Answers2