将 Web UI 组件编译为 HTML答案

【问题标题】：Compiling Web UI components to the HTML将 Web UI 组件编译为 HTML
【发布时间】：2013-05-27 12:42:33
【问题描述】：

我正在 Dart Web UI 中构建一个简单的网站。每个页面都有一个页眉（带有站点导航）和一个页脚。我为页眉和页脚使用了组件，每个页面看起来像这样：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>

    <link rel="import" href="header.html">
    <link rel="import" href="footer.html">
</head>

<body>
    <header-component></header-component>

    Page content...

    <footer-component></footer-component>
</body>
</html>

这很好用，但组件不会插入到 HTML 本身，而是从 Dart（或 JavaScript）代码动态加载。有没有办法让 Web UI 编译器将页眉和页脚插入 HTML 文件本身，以便搜索引擎和禁用 JavaScript 的用户可以看到它们？

【问题讨论】：

标签： dart dart-webui

【解决方案1】：

没有直接的方法可以做到这一点。

这通常是服务器端任务：服务器负责生成所需的 HTML。

Web 组件都是关于客户端的，因此它们处理已经交付给浏览器的内容。

但是，build.dart 脚本会在每次项目中的文件发生更改时执行，因此您可以扩展脚本以获得所需的内容。我认为这不是一个好方法，但它可以解决您的问题。

首先将以下占位符添加到目标 html 文件（在我的情况下为 web/webuitest.html）：

<header></header>

现在将header.html 文件添加到您的项目中，其中包含一些内容：

THIS IS A HEADER

现在扩展build.dart 脚本，以便检查header.html 是否被修改，如果是，它将更新webuitest.html：

// if build.dart arguments contain header.html in the list of changed files
if (new Options().arguments.contains('--changed=web/header.html')) {
    // read the target file
    var content = new File('web/webuitest.html').readAsStringSync();
    // read the header
    var hdr = new File('web/header.html').readAsStringSync();
    // now replace the placeholder with the header
    // NOTE: use (.|[\r\n])* to match the newline, as multiLine switch doesn't work as I expect
    content = content.replaceAll(
        new RegExp("<header>(.|[\r\n])*</header>", multiLine:true), 
        '<header>${hdr}</header>');
    // rewrite the target file with modified content
    new File('web/webuitest.html').writeAsStringSync(content);
  }

这种方法的一个后果是重写目标将再次触发build.dart，因此输出文件将被构建两次，但这不是一个大问题。

当然，这可以做得更好，甚至有人可以将它包装到库中。

【讨论】：

对，丑得要命:) 实际上，我想过为此建立一个库，但决定不这样做，因为我不想经常看到它。
@Juhana，顺便说一句，最初我想只重写 out 目录中的文件，但编辑器也监视这些文件（我认为为此提交了一个错误）所以它触发了无限重建循环

【解决方案2】：

目前，不，这是不可能的。您想要的是这些模板的服务器端呈现，以便您可以在客户端请求您的页面（包括搜索蜘蛛）时直接将它们提供给客户端。

不过，您可能希望跟踪此问题：https://github.com/dart-lang/web-ui/issues/107?source=c

当它完成时，事情看起来会更好。

【讨论】：

好吧，没有理由不能将build.dart 扩展为在另一个文件更改时简单地重写一个文件。丑陋，当然，但并不复杂
我真的不需要服务器端渲染，只需要“在渲染此页面之前在此处插入该文件”，但我认为该功能也将涵盖它。
哦，好吧，请记住@Zdeslav 的解决方案根本无法扩展 :)
@KaiSellgren，当然，如果有多个文件，恐怕会触发什么样的重建循环。绝对是错误的工作工具:)