Blazor WASM调用Razor Library中Webpack打包JS函数失败求助

你遇到的问题根源在于直接通过IJSRuntime调用时访问的是全局作用域的Atom对象，而通过import加载ES模块时，模块拥有独立的作用域，不能直接引用全局的Atom前缀。以下是具体解决方案：

方案1：修正ThreeViewer中的模块调用逻辑 #

当你使用import加载模块后，返回的IJSObjectReference已经代表模块本身，不需要再通过Atom.前缀调用方法，直接调用导出的函数名即可：

public async ValueTask<string> GetRevision()
{
    var module = await moduleTask.Value;
    // 去掉Atom.前缀，直接调用模块导出的函数
    var rev = await module.InvokeAsync<string>("GetCurrentThreeRevision");
    return rev;
}

方案2：调整Webpack配置，确保模块正确导出 #

当前Webpack配置仅将bundle暴露为全局变量Atom，但ES模块导入需要明确的导出声明。修改Webpack的output配置，让模块同时支持全局变量和ES模块导入：

output: {
    path: path.resolve(__dirname, '../wwwroot/js'),
    filename: "atom.bundle.js",
    library: "Atom",
    libraryTarget: 'umd', // 支持多种模块格式
    globalObject: 'this'
}

同时确保你的JS源码中明确导出目标函数：

// JS源码中添加导出声明
export function GetCurrentThreeRevision() {
    return THREE.REVISION;
}

方案3：直接使用全局作用域调用（不推荐） #

如果不需要模块隔离特性，可以在ThreeViewer中直接复用全局调用逻辑：

private readonly IJSRuntime _jsRuntime;

public ThreeViewer(IJSRuntime jsRuntime)
{
    _jsRuntime = jsRuntime;
}

public async ValueTask<string> GetRevision()
{
    return await _jsRuntime.InvokeAsync<string>("Atom.GetCurrentThreeRevision");
}

内容的提问来源于stack exchange，提问作者Cesare Caoduro