Snabbdom项目中无法加载Web Component类JS文件问题求助

你的问题核心分为两点：构建工具未将Web Component文件打包到dist目录，以及Snabbdom的hook使用方式错误，以下是针对性的解决步骤：

1. 解决dist目录缺失sg-bar.js的问题 #

Web Component文件未出现在dist目录，是因为构建工具默认不会自动处理未被模块引用的静态资源，需根据你使用的构建工具配置：

• Vite环境：将sg-bar.js放到项目根目录的public文件夹中，构建时Vite会自动将该目录下的文件复制到dist根目录，此时"/sg-bar.js"的路径就能正确访问。
• Webpack环境：安装并配置CopyWebpackPlugin，手动指定复制规则：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: './sg-bar.js', to: './' } // 把根目录的sg-bar.js复制到dist根目录
      ]
    })
  ]
};

注意：不要将Web Component文件放在src目录下（除非你明确配置构建工具将其作为静态资源处理），否则会被当作普通JS模块编译，可能破坏Web Component的原生结构。

2. 修复Snabbdom hook-init的使用错误 #

你当前的代码hook-init={AddLibrary("/sg-bar.js")}是立即执行函数，而非传递回调函数给hook。Snabbdom的hook-init需要接收一个函数，当元素挂载到DOM时才会触发执行，修改代码如下：

const view = (state, { updateState }) => {
  // 定义init回调函数，元素挂载时执行
  const initSgBar = () => {
    // 先检查是否已加载过，避免重复添加script标签
    if (document.querySelector('script[src="/sg-bar.js"]')) return;

    console.log("loading sg-bar.js");
    const script = document.createElement('script');
    script.src = "/sg-bar.js";
    // 可选：添加加载状态监听
    script.onload = () => console.log("sg-bar 加载成功");
    script.onerror = () => console.error("sg-bar 加载失败");
    document.head.appendChild(script);
  };

  return (
    <div>
      <div>Hello</div>
      {/* 传递函数引用，而非立即执行 */}
      <sg-bar hook-init={initSgBar}></sg-bar>
    </div>
  );
};

额外优化方案 #

如果你的Web Component是ES模块格式，可以直接通过import引入（无需动态创建script标签），构建工具会自动处理打包：

const initSgBar = async () => {
  // 确保sg-bar.js在src目录下，构建工具会将其打包到dist
  await import('./sg-bar.js');
};

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