これを行う直接的な方法はありません。
これは通常、サーバー側のタスクです。サーバーは、必要な 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);
}
このアプローチの結果の 1 つは、ターゲットの書き換えがbuild.dart
もう一度トリガーされるため、出力ファイルが 2 回ビルドされることですが、それは大きな問題ではありません。
もちろん、これはもっと良くすることができ、誰かがそれをライブラリにラップすることさえできます。