如何使用具有不同文件结构的 Dart Polymer?
How to use Dart Polymer with different file structure?
我试图了解如何使用与默认 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/static/scripts/web/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/static/scripts/web/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.
这是怎么回事?我对如何组织这些文件有点困惑。无论我尝试什么,路径都无法正确解析。我认为,这里的问题之一是我不明白 polymer/polymer.html 和 polymer/init.dart 实际上做了什么以及应该包含什么顺序。
那不行。如果您偏离 pub 包结构 pub build
或 pub serve
将无法创建可运行的 Dart 或 JavaScript 应用程序。
如果您希望您的 go 网络服务器为 Dart 客户端提供服务,则只需将构建输出放在目录中即可,go 提供静态内容,而不是 Dart 源文件。无论如何都不应该部署它们。
对于开发,您应该使用代理或修改您的 go 服务器作为代理,将所有与 Dart 相关的请求转发到 pub serve
。
此特定警告是关于 html 导入规范化的。浏览器不知道符号链接,因此所有 html 导入都指向相同的 packages
符号链接很重要,否则文件将被加载两次并可能导致错误。
Polymer 强制执行此操作的方式是要求所有 html 导入到 packages
文件夹中的文件通过与您的入口点相同级别的 packages
符号链接应用程序,在您的情况下,它看起来像 src/static
。但是,pub 不知道该文件夹,因此那里没有符号链接。
我从未尝试过,但您可以尝试在 src/static
文件夹中创建一个名为 packages
的手动符号链接,并将其指向 scripts/packages
。然后按照警告的建议进行操作,并通过在 ../../
前面添加 ../../
来更改 scripts/web/ui-elements.html
中的 html 导入。这样你就可以将所有内容规范化到 src/static/packages
.
的新符号链接
虽然这会产生一些其他有趣的副作用,因为您无法在您的聚合物变压器中列出您的实际入口点......在不了解您的应用程序的更多信息的情况下,尽管很难准确地说出这可能会如何影响事情。
我试图了解如何使用与默认 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/static/scripts/web/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/static/scripts/web/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.
这是怎么回事?我对如何组织这些文件有点困惑。无论我尝试什么,路径都无法正确解析。我认为,这里的问题之一是我不明白 polymer/polymer.html 和 polymer/init.dart 实际上做了什么以及应该包含什么顺序。
那不行。如果您偏离 pub 包结构 pub build
或 pub serve
将无法创建可运行的 Dart 或 JavaScript 应用程序。
如果您希望您的 go 网络服务器为 Dart 客户端提供服务,则只需将构建输出放在目录中即可,go 提供静态内容,而不是 Dart 源文件。无论如何都不应该部署它们。
对于开发,您应该使用代理或修改您的 go 服务器作为代理,将所有与 Dart 相关的请求转发到 pub serve
。
此特定警告是关于 html 导入规范化的。浏览器不知道符号链接,因此所有 html 导入都指向相同的 packages
符号链接很重要,否则文件将被加载两次并可能导致错误。
Polymer 强制执行此操作的方式是要求所有 html 导入到 packages
文件夹中的文件通过与您的入口点相同级别的 packages
符号链接应用程序,在您的情况下,它看起来像 src/static
。但是,pub 不知道该文件夹,因此那里没有符号链接。
我从未尝试过,但您可以尝试在 src/static
文件夹中创建一个名为 packages
的手动符号链接,并将其指向 scripts/packages
。然后按照警告的建议进行操作,并通过在 ../../
前面添加 ../../
来更改 scripts/web/ui-elements.html
中的 html 导入。这样你就可以将所有内容规范化到 src/static/packages
.
虽然这会产生一些其他有趣的副作用,因为您无法在您的聚合物变压器中列出您的实际入口点......在不了解您的应用程序的更多信息的情况下,尽管很难准确地说出这可能会如何影响事情。