如何通过NuGet包共享Blazor的JavaScript文件并引入至消费项目

一、基础实现逻辑 #

目前Blazor中获取Div位置/坐标只能通过JavaScript交互实现，核心代码如下：

JavaScript 获取元素位置函数 #

function GetElementLocation(elementId){
    var element = $("#"+elementId);
    var position = element.position()
    var width = element.outerWidth();
    var height = element.outerHeight();
    return {
        Width: width,
        Height: height,
        Top: position["top"],
        Left: position["left"],
    }
}

Blazor C# 交互实现 #

public class ElementLocation
{
    public double Width { get; set; }
    public double Height { get; set; }
    public double Top { get; set; }
    public double Left { get; set; }
}

[Inject] protected IJSRuntime JSRuntime { get; set; }

private async Task OnElementClick(MouseEventArgs e)
{
    var result = await JSRuntime.InvokeAsync<ElementLocation>("GetElementLocation", "elementId");

    var x = (int)(e.ClientX - result.Left);
    var y = (int)(e.ClientY - result.Top);
}

二、将JS函数打包为可分发NuGet包 #

要把这个功能做成可复用的类库，按以下步骤配置：

• 创建Blazor类库项目，确保项目自带wwwroot文件夹
• 将包含GetElementLocation的JS文件（比如命名为ElementPositionUtils.js）放进类库的wwwroot目录
• 修改类库的.csproj文件，添加配置确保wwwroot资源被打包进NuGet：

  <ItemGroup>
    <Content Include="wwwroot/**/*" Pack="true" PackagePath="wwwroot" />
  </ItemGroup>
  

• 执行dotnet pack命令生成NuGet包，此时JS文件会被包含在包的wwwroot目录中

三、消费库的Blazor项目正确引入JS文件 #

你之前用@Assets的写法无效，因为它指向本地项目的wwwroot，而非NuGet包中的资源。正确的引入方式分两种：

方式1：静态HTML引用 #

在Blazor Server项目的_Host.cshtml或WebAssembly项目的index.html中，直接添加脚本引用：

<script src="_content/你的类库包名/ElementPositionUtils.js"></script>

替换你的类库包名为实际的NuGet包ID（比如MyApp.Shared）。

方式2：动态导入（延迟加载） #

如果需要按需加载JS文件，可在Blazor组件中通过IJSRuntime动态导入：

await JSRuntime.InvokeAsync<IJSObjectReference>("import", "_content/你的类库包名/ElementPositionUtils.js");

额外提示：示例JS依赖jQuery，消费项目必须也引入jQuery才能正常运行。建议改成原生JS实现，避免第三方依赖：

function GetElementLocation(elementId){
    var element = document.getElementById(elementId);
    var rect = element.getBoundingClientRect();
    return {
        Width: rect.width,
        Height: rect.height,
        Top: rect.top,
        Left: rect.left,
    }
}

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD