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

Question

我没有找到与此主题相关的任何内容。

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

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
            }
        ], ...

或者更糟糕的是，将 include 放入 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
    }
})

或

阅读 this 作为起点。

使用app.json你可以把它全部准备好：

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

在你的初始化中：

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

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

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

How to import ES6 modules in ExtjS 6/7

extjs