Blazorクラスライブラリ内で使用するアセット（JS,CSSファイル等）をWebアプリ側に配置するには
本記事は、Blazorで使えるLIFF（LINE Front-end Framework）のC#ライブラリを実装した際の実装メモです pierre3.hatenablog.com
Blazor用のクラスライブラリを作る
Blazor 用のクラスライブラリを作成する際、Microsoft.AspNetCore.Blazor.Templates の バージョン 3.0.0-preview7.19365.7 に入っていた「Blazor library」テンプレートを使用していました。
しかし、preview8以降このテンプレートは無くなっていて、現在は「Razorクラスライブラリ」テンプレートを使用するようです。
そこで、今回作成したライブラリも以下のドキュメントを参考に「Blazorクラスライブラリ」テンプレートに置き換えてみました。
docs.microsoft.com docs.microsoft.com
プロジェクトの構成的自体にあまり変わりは無かったのですが、以下の部分で問題がありました。
Razorクラスライブラリ側のアセットがWebアプリ配置先の「dist」フォルダに出力されない
テンプレートから作成したプロジェクトは以下のような構成になっています。
wwwroot に配置した JSやCSSのファイルが、参照元のWebアプリ（Blazor WebAssembly）側にコピーされて利用可能となる想定です。 しかし、Webアプリを実行してもライブラリ側のJSファイルが認識されませんでした。
Blazor WebAssemblyのプロジェクトをビルドすると「bin\(Debug | Release)\dist」配下にアプリの一式が配置されます。 ライブラリ側のアセットファイルもこの下に格納されると思ったのですが、入っていませんでした。
また、「発行...」でフォルダに配置し、配置先の「.\publish」フォルダを確認してみたところ
アプリ配置先の .\publish\{Webアプリのアセンブリ名}\dist フォルダには配置されず、「publish」フォルダ直下に作成された「wwwroot」の中に格納されていました。
- publish
このあたりの正しい構成方法についてはもう少し調べてみたいですが、ひとまずは古いテンプレートの設定に戻して対処することとします。
ライブラリ側のコンテンツをdistフォルダに出力させる
Razorクラスライブラリで以下の修正を行います。
- ライブラリ側の「wwwroot」フォルダ名を「contents」に変更する
- ライブラリ側のプロジェクトファイル(.csproj)に以下のコードを追加する
<ItemGroup> <!-- .js/.css files will be referenced via <script>/<link> tags; other content files will just be included in the app's 'dist' directory without any tags referencing them --> <EmbeddedResource Include="content\**\*.js" LogicalName="blazor:js:%(RecursiveDir)%(Filename)%(Extension)" /> <EmbeddedResource Include="content\**\*.css" LogicalName="blazor:css:%(RecursiveDir)%(Filename)%(Extension)" /> <EmbeddedResource Include="content\**" Exclude="**\*.js;**\*.css" LogicalName="blazor:file:%(RecursiveDir)%(Filename)%(Extension)" /> </ItemGroup>
これでWebアプリ側の「dist」フォルダ内に出力されるようになります。
