如何在Dart中访问Browserify打包后的JavaScript对象？

别担心，完全可以在Dart里访问Browserify打包后的JavaScript对象！问题出在Browserify默认会把代码封装在一个闭包里，避免污染全局作用域，所以你之前直接访问全局JavaScriptCode的方式就失效了。下面是具体的解决步骤：

Browserify默认不会把模块变量放到全局，所以我们得主动让它把需要访问的对象“露出来”，有两种方式可选：

方法1：打包时用--standalone参数 #

在执行Browserify打包命令的时候，加上--standalone选项并指定一个全局变量名，这样打包后的代码会把你的模块挂载到这个全局变量上。比如：

browserify main.js --standalone MyJSModule -o main-bundle.js

这里的MyJSModule就是你之后在Dart中要访问的全局对象名。如果你的main.js里是导出JavaScriptCode（比如用module.exports = JavaScriptCode或者ES6导出），那JavaScriptCode就会成为MyJSModule的属性（默认导出的话会在MyJSModule.default里，命名导出则直接是MyJSModule.JavaScriptCode）。

方法2：在JS代码里主动挂载到window #

如果不想改打包命令，也可以直接在你的main.js里把需要访问的对象手动挂载到全局的window对象上，这样不管怎么打包，它都会留在全局作用域：

// main.js里的代码
function JavaScriptCode() {
  // 你的业务逻辑
}

// 主动把对象暴露到全局
window.JavaScriptCode = JavaScriptCode;

完成上面的步骤后，就可以通过Dart的dart:js库来访问这个全局对象了，示例代码如下：

import 'dart:js' as js;

void main() {
  // 对应方法1：访问MyJSModule下的JavaScriptCode
  var jsModule = js.context['MyJSModule'];
  var jsCodeConstructor = jsModule['JavaScriptCode']; // 如果是默认导出就用jsModule['default']
  var jsInstance = js.JsObject(jsCodeConstructor); // 实例化对象

  // 对应方法2：直接访问全局的JavaScriptCode
  var jsCodeDirect = js.context['JavaScriptCode'];
  var jsInstanceDirect = js.JsObject(jsCodeDirect);

  // 之后就可以调用对象的方法或者访问属性了
  // jsInstance.callMethod('someMethod', ['参数1', '参数2']);
}

• 一定要确保HTML文件里先加载main-bundle.js，再加载Dart编译后的JS文件，否则Dart运行时会找不到全局的JS对象。
• 如果你的JS用的是ES6模块语法（比如export default JavaScriptCode），用--standalone打包后，默认导出的对象会在MyJSModule.default里，记得调整Dart里的访问路径。

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