blazor组件使用并置加载js文件

前言

因为正常加载的js文件是组件互通的，导致每一个组件都能通用里面的js方法。通过并置加载js文件，不仅方便简洁，还可以进行js隔离。

实现

需要先将js名称设置为对应组件的名称，这样会自动将文件并置到对应组件下面。

接下来，就是加载js文件了。我们需要将IJSRuntime模块以IJSObjectReference导入，并赋值到变量module中，通过变量module来调用js函数。（需要在组件中注入 @inject IJSRuntime _js ，写在组件顶部就行）InvokeAsync第二参数路径是对应的wwwroot中的文件，下面会说明。

//Index.razor.cs
public partial class Index
    {
        private IJSObjectReference module;

        #region 生命周期方法
            
        /// 

        /// 生命周期事件-渲染后
        /// 
        /// 
        /// 
        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                module = await _js.InvokeAsync("import",
        "./js/Index.razor.js");

                await module.InvokeVoidAsync("Initialize");
            }
        }
      
        #endregion
    }

当然，到这里还没完事，如果你去运行，会发现找不到对应的js模块或方法。这是因为我们一般只开放了静态资源文件夹的访问权限（这里我不建议去开放其他路径的访问权限，这样是不安全的），我们需要通过在libman.json内添加上面的配置，将对应的js文件在wwwroot（静态资源）文件夹中自动生成。微软文档LibMan使用

//libman.json
{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "provider": "filesystem",
      "library": "Pages/",
      "destination": "wwwroot/js/",
      "files": [
        "Index.razor.js"
      ]
    }
  ]
}

当你运行后，你会发现在wwwroot文件夹中libman配置的路径下自动生成了对应的js文件。但是，你修改了原js文件后，映射的js文件并不会自动同步，需要手动鼠标右键libman.json=》“清理客户端库”，进行重新生成。

最后，js文件方法记得添加export 关键字。

//Index.razor.js
export function Initialize() {
	console.log("不想上班！！！")
}

之前遇到这个问题，便发了个博问，研究解决了一下。想着还是写给文章吧！博问的方式不好找。

blazor组件并置的js文件问题_已解决_博问_博客园 (cnblogs.com)