How to import ES6 modules in ExtjS 6/7

user_4368942 0
Viewed 390

I haven't found anything related to this topic.

I'd like to import pusher like normally is done with other js frameoworks:

npm install pusher-js

Then you just import the library:

import Pusher from 'pusher-js';

or

const Pusher = require('pusher-js');

Please share good practices to accomplish that in an ExtJS application.

The last resort would be to just include the min file in app.json: ...

"js": [            
            {
                "path": "https://js.pusher.com/7.0/pusher.min.js",
                "bundle": true,
                "compress": false
            }
        ], ...

Or even worse, put the include in the index.html file:

<script src="https://js.pusher.com/7.0/pusher.min.js"></script>

Any ideas? Thanks.

extjs
1 Answers

if including it using app.json is not what you want you can load it at the time you need it.

Async (onLoad, onError are the promise)

Ext.Loader.loadScript({
    url: 'pusher-js',
    onLoad: successFn,
    onError: errorFn,
    scope: this
});

Sync (the code will continue, after the file has been loaded)

Ext.Loader.loadScriptsSync(url|[url]);

Optional Approach

If you add Ext.require ExtJS will try to load the file and you can use this in your controller.

Ext.define('MyApp.view.SomeViewController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.someview',

    init() {
        // Preload additional functionality
        Ext.require('MyApp.libs.pusher-js');

        // from folder ===> MyApp/app/libs/pusher-js
    }
})

OR

Read this as a starting point.

Using app.json you can get it all prepared as:

"js": [            
            {
                "path": "https://js.pusher.com/7.0/pusher.min.js",
                "remote": true
            }
        ], 
...

Inside your initialization:

var pusher = new Pusher('APP_KEY', {
    cluster: 'APP_CLUSTER'
});

This will load the file automatically and you do not have to import it in any way.

user_9169370
Related