Polymer.dart 1.0.0-rcx 需要哪些导入和脚本标签答案

【问题标题】：What imports and script tags are required for Polymer.dart 1.0.0-rcxPolymer.dart 1.0.0-rcx 需要哪些导入和脚本标签
【发布时间】：2015-09-22 07:37:23
【问题描述】：

使用 Polymer.dart 的客户端应用程序需要哪些导入和脚本标签才能正常工作？

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

<!DOCTYPE html>
  <head>
    <script src="packages/web_components/webcomponents-lite.min.js"></script>
    <script src="packages/browser/dart.js"></script>
  </head>
  <body unresolved>
    <my-element></my-element>
    <script type="application/dart" src="index.dart"></script>
  </body>
</html>

webcomponents-lite.min.js 脚本添加了 Polymer polyfill。
dart.js 是每个 Dart 浏览器应用程序在没有 Dart VM 的浏览器中运行所必需的。
index.dart 包含您的自定义 main(); 并使用 @HtmlImports(...) 导入 <my-element>

index.dart 包含在哪里

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

/// Silence analyzer [MyElement]
main() async {
  await initPolymer();
}

没有自定义主目录

使用<link rel="import" ...> 导入元素（不鼓励）

<!DOCTYPE html>
  <head>
    <script src="packages/web_components/webcomponents-lite.min.js"></script>
    <link rel="import" href="my_element.html">
  </head>
  <body unresolved>
    <my-element></my-element>
    <script type="application/dart">export 'package:polymer/init.dart';</script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

或使用@HtmlImport(...) 导入元素

<!DOCTYPE html>
  <head>
    <script src="packages/web_components/webcomponents-lite.min.js"></script>
  </head>
  <body unresolved>
    <my-element></my-element>
    <script type="application/dart">
      export 'package:polymer/init.dart';
      import 'my_element.dart';
    </script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

提示： 如果没有明确的 main 脚本标签，注册可反射变压器的入口点会更加困难。可以改用生成文件的名称，但我还不知道这个文件名是什么。

【讨论】：