ExtJS 6/7中导入ES6模块的最佳实践 以pusher-js引入为例

方案1：本地npm包+原生构建配置（兼容全版本，生产环境首选） #

该方案完全遵循ExtJS官方构建规则，不需要依赖外部CDN，也不会脱离项目的打包流程。

• 第一步：本地安装pusher-js依赖

npm install pusher-js

• 第二步：修改app.json中的js配置项，指向本地安装的依赖文件

"js": [
    {
        "path": "node_modules/pusher-js/dist/web/pusher.min.js",
        "bundle": true,
        "compress": false
    },
    // 保留原有其他js配置
]

配置完成后重新构建项目，即可在应用全局直接调用Pusher对象使用，不需要额外导入语句。

方案2：开启ES模块支持直接导入（适用于ExtJS 7.0+ + Sencha Cmd 7.0+） #

如果你的项目版本满足要求，可以开启原生ES6模块支持，和其他现代框架一样用import语法导入。

• 第一步：在app.json中添加模块支持配置

"compiler": {
    "esversion": 6,
    "module": true
},
"packages": {
    "dir": "packages,node_modules"
}

• 第二步：在需要使用pusher的业务代码中直接导入即可

import Pusher from 'pusher-js';

// 后续正常初始化使用
const pusher = new Pusher('你的appkey', {
  cluster: '集群标识'
});

方案优劣对比 #

内容的提问来源于stack exchange，提问作者John Smith