在Swift的JavaScriptCore中实例化Browserify打包的NPM包对象

核心问题原因 #

Browserify默认会把CommonJS模块封装在闭包中，不会暴露到全局作用域，所以你在JavaScriptCore上下文里直接访问mynpmpackage会找不到。

解决方案 #

1. 重新打包NPM包，指定全局暴露 #

修改Browserify打包命令，添加--standalone参数，指定你要在全局使用的变量名（比如mynpmpackage），这样打包后的代码会自动把模块导出到全局作用域：

browserify 你的入口文件.js --standalone mynpmpackage -o mynpmpackage.js

打包完成后，模块会挂载到全局对象（比如你设置的window）上，就能直接用new mynpmpackage(config)创建实例。

2. 调整Swift中的JS加载代码 #

保持现有Swift代码逻辑，确保全局对象正确映射：

guard let npmPackage = Bundle.main.path(forResource: "mynpmpackage", ofType: "js") else {
    print("Unable to read resource file")
    return nil
}

let npmContent = try String(contentsOfFile: npmPackage, encoding: .utf8)
// 将JavaScriptCore的全局上下文映射为window
let jsSource = "var window = this; \(npmContent)"
context?.evaluateScript(jsSource)

3. 修正JS调用代码的细节 #

• JavaScriptCore默认没有fetch API，如果你的NPM包依赖fetch，需要手动引入whatwg-fetch这类polyfill并一起打包；或者改用XMLHttpRequest实现请求逻辑。
• 可以给JSContext添加异常捕获，方便排查问题：

context?.exceptionHandler = { context, exception in
    print("JS Error: \(exception ?? "Unknown error")")
}

调整后的JS调用代码示例：

async function lookupDataUsingNPMPackage(myaddress, callback) {
    try {
        const config = {
            apiKey: "myapikey",
            network: "mynetwork",
        };
        // 直接访问全局暴露的mynpmpackage创建实例
        const myInstance = new mynpmpackage(config);
        console.log("实例创建成功");
        // 若使用fetch需确保环境支持，否则替换为XMLHttpRequest
        const response = await fetch(myInstance.data.getDataForOwner(myaddress));
        const data = await response.json();
        callback(data);
    } catch (error) {
        console.log("调用错误:", error);
        callback(null, error);
    }
};

额外排查点 #

• 打开打包后的JS文件，搜索是否存在window.mynpmpackage或对应全局变量的定义，确认打包配置生效。
• 在Swift中执行evaluateScript(jsSource)后，可通过context?.objectForKeyedSubscript("mynpmpackage")检查是否成功获取到模块对象，验证加载结果。

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