如何使用 dart2js 将 Dart Polymer 应用程序部署到 Javascript答案

【问题标题】：How to deploy a Dart Polymer app to Javascript using dart2js如何使用 dart2js 将 Dart Polymer 应用程序部署到 Javascript
【发布时间】：2013-12-22 06:50:09
【问题描述】：

我在使用 Polymer 将 Dart 代码部署到 Javascript 时遇到了问题。我用 DartEditor 创建了一个聚合物应用程序并做了一个简单的例子。此示例在 Dartium 中有效，但是当我尝试将其构建为 Polymer 应用程序（在 Javascript 中）并启动它时，应用程序失败。

我应该如何将 Dart Polymer 应用程序转换为 Javascript？

这是我编写的失败示例代码：

example.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Example</title>

    <link rel="import" href="example-polymer.html">
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body>
      <div is="example-polymer"></div>
  </body>
</html>

example-polymer.html

<polymer-element name="example-polymer" extends="div">
  <template>
    <div>
      <input on-change="{{ change }}"/><br>
      <span>Text : {{ text }}</span>
    </div>
  </template>
  <script type="application/dart" src="example-polymer.dart"></script>
</polymer-element>

example-polymer.dart

import 'package:polymer/polymer.dart';
import 'dart:html';

@CustomTag('example-polymer')
class ExampleBolymer extends DivElement with Polymer, Observable {
  @published String text = "" ;

  ExampleBolymer.created() : super.created() {
  }

  void change(Event e, var detail , InputElement target) {
    text = target.value;
  }
}

【问题讨论】：

标签： dart polymer dart-polymer dart-pub dart2js

【解决方案1】：

添加

transformers:
- polymer:
    entry_points:
    - web/example.html

到您的 pubspec.yaml 并调用

pub build

你的文件应该在你的包的web目录中。

【讨论】：

它正在“生成”文件到“out”目录。而且编译成JS后还是不行:(
你是从 DartEditor 运行它还是运行dart2js？ AFAIK DartEditor 启动 dart2js 的菜单不是最新的（WIP）。在包根目录的命令行中调用pub build 或pub build --mode=debug 是我的最佳体验。
我认为这是一个已知问题。如果您的 Web 目录中有来自以前的 run as JavaScript 的文件（例如扩展名为 .bootstrap.dart），pub build 将失败。请从您的web 目录或整个web/out 目录（如果存在）中删除所有生成的文件，然后再次运行pub build。