是否可以只将 dart 函数转换为 javascript

Question

我目前正在使用以下包，其中自述文件说明了以下内容

final bool loaded = await JsIsolatedWorker().importScripts(['test.js']);

我正在使用隔离工作程序包，因此我的代码可以在网络上和网络外运行。我想从我的 dart 代码生成 javascript 代码。我有一个具有顶级功能的文件，我使用

dart compile js -O0 -o test.js test.dart

我在这里找到的

https://dart.dev/tools/dart2js

这是我的 dart 文件

void main(List<String> args) {
  doComputation('');
}
            
String doComputation(String input) {
  return 'output';
}

只有当我有一个 main 函数时，我才能生成 javascript，但这会生成一个 javascript 文件，其中 doComutation 不是顶级函数，所以我不确定包是否可以调用该函数。看起来它生成了整个程序，而不仅仅是生成一个函数。

生成的文件太长，无法发布

所以我的问题归结为这个。有没有办法从 dart 为 1 个函数生成 javascript 并包含其依赖项，而不必生成整个程序？这样我就可以从 dart 调用这个函数。

Answer 1

我不是专家，但我也遇到过这个问题。这对我有用：

在 web_worker.dart 中：

import 'package:js/js.dart';

main(){
  allowInterop(doComputation);
}

@JS('doComputation')
String doComputation(String computationInput) {
  // Replace this with your actual computation.
  final String computationOutput = "output";
  return computationOutput;
}

使用以下命令编译它：

$ dart compile js web_worker.dart -o webWorker.js

手动编辑编译器生成的JS文件webWorker.js：

删除文件顶部的这一行：

(function dartProgram() {

以及文件底部带有相应右大括号的行：

})();

我不明白这里发生了什么，但我发现 webWorker.js 中定义的函数 doComputation() 的 Javascript 版本作为对象“A”的属性。

我在文件顶部定义了一个包装器，如下所示：

function doComputation(computationInput) {
  return A.doComputation(computationInput)
}

然后我就可以像这样将文件与 JsIsolatedWorker 一起使用：

final bool loaded =
    await JsIsolatedWorker().importScripts(['../web/webWorker.js']);
if (loaded) {
  final String computationResult = await JsIsolatedWorker()
      .run(functionName: 'doComputation', arguments: computationInput);    
} else {
  debugPrint('Web worker is not available');
}

如果更了解这一点的人可以详细说明或改进这个解决方案，那就太好了。我真的不知道自己在做什么。 我发布此内容只是希望通过分享对我有用的方法来帮助其他人在将来节省时间。

Answer 2

您可以使用 js 包从 Dart 代码调用 JavaScript API，反之亦然。要使 Dart 函数可通过名称从 JavaScript 调用，请使用带有

@JS()

注释的 setter。

@JS()
library callable_function;

import 'package:js/js.dart';

/// Allows assigning a function to be callable from `window.functionName()`
@JS('functionName')
external set _functionName(void Function() f);

/// Allows calling the assigned function from Dart as well.
@JS()
external void functionName();

void _someDartFunction() {
  print('Hello from Dart!');
}

void main() {
  _functionName = allowInterop(_someDartFunction);
}

JavaScript 代码现在可以调用

functionName()

或

window.functionName()

。

查看 google Chartjs https://github.com/google/chartjs.dart/tree/master/example 获取完整示例。

来自 dart2js “帮助 dart2js 生成更好的代码”有一个提示：

不必担心应用程序包含的库的大小。 dart2js 编译器执行树摇动以省略未使用的类、函数、方法等。只需导入您需要的库，然后让 dart2js 删除您不需要的库即可。

与这篇文章相关https://stackoverflow.com/a/21124252/3733730.

Answer 3

您可以使用

dartscript

来完成此操作。

文件.dart

import 'package:js/js.dart';

@JS('doComputation')
String doComputation(String input) {
  return '$input output';
}

void main(){
  allowInterop(doComputation);
}

现在将 dart 文件传递给

dartscript

，同时将函数名称作为选项传递。

dartscript --func doComputation --out doComputation.js file.dart

doComputation.js

export function doComputation(input) {
  return input + ' output'
}

dartscript

还支持CJS模块，或默认导出。只需使用可用的选项即可。

dartscript --func doComputation --out doComputation.cjs --module cjs --default file.dart

doComputation.cjs

module.exports = function doComputation(input) {
  return input + ' output'
}

Answer 4

您可以使用 dart2js 包来完成此操作

为你的 main.dart dart2js 创建一个程序，其中包含你想要创建的函数或命令，然后创建一个单独的 dart 文件，其中包含你想要调用的函数，它将解决你的问题，它是一个单独的文件，但会只执行您需要的一个函数，那就是单独的文件