How to import ES6 modules in ExtjS 6/7 - extjs

Question

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.

Answer 1

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.