Ext JS与browserify集成：如何在ExtJS中使用browserify的bundle.js文件

可行性结论 #

完全可以正常使用。你引入后无法访问内容的核心原因是：browserify 默认将所有打包代码封装在私有闭包内，不会对外暴露任何内部变量，需显式配置将需调用的接口挂载到全局作用域，ExtJS 才能正常访问。

具体实现步骤 #

• 第一步：编写打包入口文件，将需调用的 Node.js 库接口挂载到window全局对象。示例入口文件index.js如下（以暴露lodash、qs两个库为例）：

const _ = require('lodash');
const qs = require('qs');

// 自定义全局挂载对象，避免命名冲突
window.NodeUtils = {
  lodash: _,
  qs: qs
  // 其他需要暴露的方法、对象均可在此处扩展
};

• 第二步：执行 browserify 打包命令生成 bundle.js：
  browserify index.js -o bundle.js
  如果用到 Node.js 原生模块（如crypto、path等），需提前安装对应的浏览器兼容包，打包时自动替换即可。
• 第三步：在 ExtJS 项目中引入 bundle.js。经典架构可直接在app.json的js配置数组中添加，注意引入顺序需早于你的业务代码、晚于 ExtJS 核心框架加载：

"js": [
  {
    "path": "${framework.dir}/build/ext-all-rtl-debug.js"
  },
  {
    "path": "app/bundle.js", // 替换为你的bundle.js实际路径
    "bundle": true
  },
  {
    "path": "app.js",
    "bundle": true
  }
]

• 第四步：在 ExtJS 业务代码中直接调用暴露的接口即可，示例：

Ext.define('MyApp.controller.User', {
  extend: 'Ext.app.Controller',
  handleQuery: function(params) {
    // 调用全局挂载的qs序列化参数
    const queryStr = window.NodeUtils.qs.stringify(params);
    // 调用lodash做数组处理
    const formatList = window.NodeUtils.lodash.sortBy(this.userList, 'age');
  }
});

问题排查 #

如果仍然无法访问内容，可按顺序排查：

• 打开浏览器控制台，输入window.NodeUtils查看是否存在对应对象，不存在则说明打包阶段挂载失败，检查入口文件逻辑是否正确
• 查看网络面板，确认 bundle.js 没有出现404、加载失败等问题
• 确认 bundle.js 加载顺序早于调用该对象的业务代码

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