Question

我试着理解如何使用具有不同于默认Pub / Dart结构的文件结构的聚合物（因此教程在这里没有帮助我）。我已阅读以下页面：

https://www.dartlang.org/polymer/app-directories.html（如果老实说对我不知所措）
https://www.dartlang.org/docs/tutorials/polymer-intro
https://www.dartlang.org/docs/tutorials/forms/#binding-data

这是我的结构：

src/
 controllers/, models/, views/ #Go related files
 main.go #Go web server
 static/ #CSS, Images, Dart
   ...
   styles/
   scripts/
     packages/ #links to actual packages
     web/
       packages/ #link to ../packages
       ui-elements.html
       main.dart
     pubspec.yaml
   ...

src / views / index.html - 网站的索引页

...
<head>
  <link rel="import" href="scripts/web/ui-elements.html"/>
</head>
<body>
  <ui-watch></ui-watch>
  <!-- Does it should come first or after polymer/init.dart? -->
  <script type="application/dart" src="scripts/web/main.dart"></script>
  <!-- path doesn't resolve correctly so I commented it and place initialization into the main.dart file itself -->
  <!--<script type="application/dart">export 'package:polymer/init.dart';</script>-->
  <script src="scripts/packages/browser/dart.js"></script>
</body>

的src /静态/脚本/网络/ main.dart

import 'dart:html';
import 'dart:async';
import 'package:polymer/polymer.dart';
export 'package:polymer/init.dart';

@CustomTag('ui-watch')
class UIWatch extends PolymerElement {
  @observable String counter = '00:00';

  UIWatch.created() : super.created();

  ButtonElement startWatch;

  @override
  void detached() {
    super.detached();

  }
}
main() {
  initPolymer();
}

的src /静态/脚本/网络/ UI-elements.html

<link rel="import" href="packages/polymer/polymer.html">
<polymer-element name="ui-watch">
  <template>
    <div>{{counter}}</div>
    <div>
      <button id="startWatch">Start</button>
    </div>
  </template>

  <!--<script type="application/dart" src="main.dart"></script>-->
</polymer-element>

跑完后，我得到以下内容：

GET http://localhost:8080/packages/polymer/polymer.html 404 (Not Found)
Error loading html import from path `polymer.html`
Found bad packages uri in html import. All packages uris should point to the
packages symlink in the same folder as the entry point.

Entry point: http://localhost:8080/
Owner document: http://localhost:8080/scripts/web/ui-elements.html
Current import: <link rel="import" href="packages/polymer/polymer.html">
#I've already try this path, but I got the same error
Corrected import: <link rel="import" href="../../packages/polymer/polymer.html">

For more information, please see:
https://www.dartlang.org/polymer/app-directories.html#into-a-non-dart-non-entry-point

warning: http://localhost:8080/packages/polymer/polymer.html not found.

这里有什么问题？我有点困惑如何组织这些文件..无论我尝试路径都没有正确解决。我认为，这里的问题之一就是我不明白聚合物/聚合物和聚合物/ init.dart实际上做了什么以及应该包含的顺序。

Answer 1

那不行。如果您偏离pub包结构pub build或pub serve将无法创建可运行的Dart或JavaScript应用程序。

如果您希望您的go web服务器为Dart客户端提供服务，则只需要在Directory目录中提供构建输出即可提供静态内容，但不能提供Dart源文件。无论如何都不应该部署它们。

对于开发，您应该使用代理或修改您的go服务器作为代理，将所有与Dart相关的请求转发给pub serve。

Answer 2

此特定警告是关于html导入规范化。浏览器不知道符号链接，因此重要的是所有html导入都指向相同的packages符号链接，否则文件将被加载两次并可能导致错误。

聚合物强制执行此操作的方式是要求packages文件夹中的所有html导入文件都通过与您的应用程序入口点相同级别的packages符号链接，在您的情况下看起来像src/static。但是，pub不知道该文件夹，所以那里没有符号链接。

我从未尝试过此操作，但您可以尝试在packages文件夹中创建名为src/static的手动符号链接，并将其指向scripts/packages。然后执行警告建议，并通过添加scripts/web/ui-elements.html来更改../../中的html导入。这样，您就可以将所有内容规范化为src/static/packages的新符号链接。

这会产生一些其他有趣的副作用，因为你无法在聚合物变压器中列出你的实际入口点...虽然很难确切知道这可能会对事情产生什么影响，但却不知道你的应用程序的更多信息。

如何使用具有不同文件结构的Dart Polymer？

2 个答案: