如何在ES6 6/7中导入ExtjS模块

Question

我没有发现任何与这个话题有关的东西。

我想像通常使用其他js框架一样导入pusher：

npm install pusher-js

然后您只需导入库：

import Pusher from 'pusher-js';

或

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

请在ExtJS应用程序中共享实现这一目标的良好实践。

最后的方法是将min文件包含在app.json中：.

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

或者更糟糕的是，将包含放在index.html文件中：

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

有什么想法吗？谢谢。

Answer 1

如果使用app.json包含它不是您想要的，您可以在需要的时候加载它。

异步(onLoad，onError是承诺)

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

同步(文件加载后，代码将继续)

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

可选方法

如果添加Ext.require，ExtJS将尝试加载该文件，并且可以在控制器中使用该文件。

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
    }
})

或

阅读这作为起点。

使用app.json，您可以将其全部准备如下：

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

在初始化内部：

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

这将自动加载文件，您不必以任何方式导入它。