在没有 Dart VM 的情况下将 Dart API 导出到 JavaScript答案

【问题标题】：Exporting Dart APIs to JavaScript, without a Dart VM在没有 Dart VM 的情况下将 Dart API 导出到 JavaScript
【发布时间】：2015-02-04 01:47:37
【问题描述】：

我想在没有 Dart VM 的浏览器上将 Dart API 导出到 JavaScript。例如，给定一个 A 类：

class A {
  String name;

  A();

  A.withName(this.name);
}

我想使用导出的 API 创建一个 JavaScript 对象：

var a = new A();

对我的previous question 的回答将我指向 js-interop。

但是，通过README example 工作时，我无法获得预期的结果。我的 Dart 库似乎没有被导出到 JavaScript。

pubspec.yaml：

name: interop
description: >
  A library useful for applications or for sharing on pub.dartlang.org.
version: 0.0.1
dev_dependencies:
  unittest: any
dependencies:
  js:
    git:
      url: git://github.com/dart-lang/js-interop.git
transformers:
  - js
  - js/initializer

example/main.dart

图书馆主：

import 'package:js/js.dart';

main() {
  initializeJavaScript();
}

lib/a.dart

library a;

import 'package:js/js.dart';

@Export()
class A {
  String name;

  A();

  A.withName(this.name);
}

index.html

<html>
  <head>
    <script src="packages/js/interop.js"></script>
  </head>
  <body>
    <script type="application/dart" src="build/example/main.dart"></script>
  </body>
</html>

（不清楚最后一个脚本标签的 src 属性应该指向哪里。我也尝试过使用 /example/main.dart，这不会改变我的结果。）

我希望在编译（Tool -> Pub Build）并加载index.html之后能够打开一个控制台，然后这样做：

var a = new dart.a.A();

但是，我得到的是：“无法读取未定义的属性 'A'”。换句话说，dart.a 是未定义的。

在 index.html 中包含原始 Dart 脚本表明 js-interop 适用于带有 Dart VM 的浏览器。我尝试在 Dartium 上运行 index.html，结果相同。

我错过了什么？

【问题讨论】：

标签： dart dart-js-interop

【解决方案1】：

脚本标签的src 属性仍然必须指向一个包含main() 方法的Dart 脚本文件。当应用程序使用 pub build 构建为 JavaScript 时，Dart 被编译为 JavaScript，并且可以在没有 Dart VM 的浏览器中运行。

【讨论】：

谢谢，很高兴知道。鉴于此，关于我的设置哪里出错的任何想法？
我还没有使用这个包，但我知道你需要运行 pub build 来从 Dart 获取 JavaScript，并且 main.dart 文件指向的 src 文件不能在 @ 987654328@目录。当您运行 pub build 时，build 目录将被清除。 main.dart 文件应位于 web 目录中，src 属性应为 src="main.dart
感谢您的提示。我添加了一个“网络”目录并将 index.html 移到那里。编辑 src 以指向“main.dart”。我可以“运行” index.html，然后启动服务器。但是，问题仍然存在。加载页面后 dart.a 未定义。页面上没有出现错误，并且当我加载页面时加载了许多 dart 文件，从 Dart 编辑器中的“工具输出”可以看出。
感谢您的回答，我能够找到问题的解决方案stackoverflow.com/a/27326963/54426

【解决方案2】：

是的，它确实适用于仅 JavaScript 的浏览器。事实证明，文档并没有给出所有的步骤。从一个新项目开始，这对我有用。

使用 (File-> New Project/package) 创建一个名为“jsout”的新包项目。删除这些文件：

test/all_test.dart
example/jsout.dart

编辑这些文件：

pubspec.yaml

name: jsout
description: >
  A library useful for applications or for sharing on pub.dartlang.org.
version: 0.0.1
dev_dependencies:
  unittest: any
dependencies:
  js:
    git:
      url: git://github.com/dart-lang/js-interop.git
transformers:
  - js
  - js/initializer

lib/main.dart

part of main;

@Export()
class A {
  String name;

  A();

  A.withName(this.name);

  talk() {
    print(name);
  }
}

创建文件夹web，并添加这些文件：

web/main.dart

library main;

import 'package:js/js.dart';

part '../lib/jsout.dart';

main() {
  initializeJavaScript();
}

web/index.html

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script src="main.dart_initialize.js"></script>
    <script src="main.dart.js"></script>
  </body>
</html>

更新这些文件后，加载 index.html，然后打开一个控制台：

var a = new dart.main.A.withName('foo');

a.talk(); // returns 'foo'

此过程自修订版 7afdb 起有效。

【讨论】：

为什么这里有main.dart.js' as script source. You don't even have such a file. I think you should reference the main.dart` 文件。从不支持 Dart 的浏览器加载时，pub build 或 pub serve 应该即时替换它。
这种方法在运行 Dartium 时有效，但在 Chrome 中无效。在后一种情况下，运行构造函数时会引发错误。使用 javascript 文件时，该错误消失了。
当你从由pub build生成的build/web加载index.html时？您可以发布错误消息吗？你用pub serve 尝试过吗（或者从DartEditor 启动，它在窗帘后面使用pub serve）。
functionmain.dart_initialize.js:36 Uncaught TypeError: undefined is not a function 此错误是在 Dart 编辑器对 index.html 文件的 command-R 后收到的。它启动了一个服务器实例和 Dartium。在 dartium 中尝试后，我在 Chrome 中加载了相同的 URL localhost:8081/index.html，打开控制台并尝试实例化 dart.jsout.A.withName('foo')。
我刚刚看到part '../lib/jsout.dart'; 这一行是非常错误的 ;-) 你不能离开像web，bin，lib，...这样的顶级文件夹到从另一个顶级文件夹导入。您只能从当前顶级文件夹或 lib 导入文件，格式为 import 'package:jsout/jsout.dart';