如何在Blazor组件中引用本地JavaScript模块？

嘿，我刚好在Dotnet Conf里留意到这个新特性，给你一步步拆解怎么在Blazor组件里引入本地JS文件——其实核心还是基于JS Interop，但有几个关键细节很容易踩坑，我帮你梳理清楚：

1. 先把JS文件放对位置 #

首先得把你的本地JS文件放在项目的正确目录里，不同Blazor模式略有区别：

• Blazor WebAssembly：推荐放在wwwroot/js目录下（比如wwwroot/js/myComponentScripts.js），这个目录是静态资源的根目录，访问起来最方便
• Blazor Server：同样建议放在wwwroot/js下，或者和组件同目录，但统一放wwwroot更便于管理

给你一个简单的JS文件示例（myComponentScripts.js）：

// 导出要给Blazor调用的方法
export function showGreeting(name) {
    alert(`嗨，${name}！这是来自本地JS文件的问候😉`);
}

export function calculateSum(a, b) {
    return a + b;
}

2. 在Blazor组件中加载并调用JS模块 #

在你的Blazor组件（比如LocalJSComponent.razor）里，需要通过IJSRuntime来加载这个模块，记得要做异步处理，还要注意资源释放：

@inject IJSRuntime JSRuntime
@implements IAsyncDisposable

<h3>测试本地JS文件调用</h3>
<button @onclick="CallGreetingMethod">触发JS弹窗</button>
<button @onclick="CallCalculateMethod">计算两数之和</button>

@code {
    // 存储加载后的JS模块引用
    private IJSObjectReference? _localJSModule;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // 只在组件第一次渲染时加载模块，避免重复加载
        if (firstRender)
        {
            _localJSModule = await JSRuntime.InvokeAsync<IJSObjectReference>(
                "import", "./js/myComponentScripts.js");
        }
    }

    private async Task CallGreetingMethod()
    {
        if (_localJSModule != null)
        {
            // 调用JS模块里的无返回值方法
            await _localJSModule.InvokeVoidAsync("showGreeting", "Blazor开发者");
        }
    }

    private async Task CallCalculateMethod()
    {
        if (_localJSModule != null)
        {
            // 调用有返回值的JS方法
            var result = await _localJSModule.InvokeAsync<int>("calculateSum", 10, 20);
            Console.WriteLine($"JS计算结果：{result}");
        }
    }

    // 组件销毁时释放JS模块资源
    public async ValueTask DisposeAsync()
    {
        if (_localJSModule != null)
        {
            await _localJSModule.DisposeAsync();
        }
    }
}

3. 容易踩坑的关键注意事项 #

• 路径别写错：import里的路径是相对于wwwroot的根目录，比如JS文件在wwwroot/js/utils/script.js，路径就要写./js/utils/script.js，少写个点或者目录名错了都会报404
• Blazor Server的特殊点：确保_Host.cshtml里已经引用了_framework/blazor.server.js，它负责处理Blazor Server模式下的JS模块加载逻辑
• 控制台排查错误：如果调用没效果，先打开浏览器控制台看有没有404（路径错误）或者JS语法错误，这是最常见的问题

额外小技巧 #

如果多个组件都要用到这个JS模块，可以把加载逻辑封装成一个自定义服务，注入到各个组件里，不用每个组件都写一遍加载代码，能省不少事~

内容的提问来源于stack exchange，提问作者Jakob Lithner