获取其他包中的html文件路径，在基于alpine js组件的架构中插入html的html

问：

我正在尝试使用 alpine js 构建组件明智的应用程序，使用与 react 提供的相同作为默认的将代码分成几部分。

但是，当我尝试在其他模块中注入 html 时，我没有在 html 中获得node_modules路径。 如果我自己的包在node_module文件夹中，并且 html 文件在其中，最终将注入页面，那么获取 html 模板路径的正确方法是什么。

这是我正在尝试导出的我自己包中的javascript。

import Alpine from 'alpinejs';
import path from 'path';
import main from './components/main/main';

window.Alpine = Alpine;
import component from 'alpinejs-component';
Alpine.plugin(component)


Alpine.start();




function mainComponentHtml() {
  
  return `
    
      <div>
        <x-component url="${require.resolve('./components/main/main.html')}" x-data="${main}"></x-component> 
      </div>
    
  `;
}
  
export { main, mainComponentHtml};

这是我如何在其他项目中导入和注入。

import {mainComponentHtml} from 'my-own-local-package';

document.body.innerHTML = mainComponentHtml();

main.html位于 。node_modules/my-own-package/src/components/main/main.html

正如我们所看到的，main.html 在内部插入浏览器时呈现不正确。node_modules

我正在使用 webpack bundler 和它;自己的 devServer，并且可能有一些特定于此的技术，但我需要完全成熟的方式（无论使用何种服务器），以便 html 在浏览器中呈现时始终指向正确的 node_module 包（在这种情况下是我自己的包）路径。