如何在Vite环境下的React组件中通过script标签嵌入node_modules外部库

针对你这种自执行、无导出的外部库，用script标签嵌入的思路是可行的，但需要调整路径处理逻辑，同时解决重复加载和内存泄漏问题，具体实现如下：

关键修改点 #

• 正确解析库路径：不能直接写node_modules/${libraryPath}，Vite需要通过import.meta.url生成适配开发/生产环境的正确资源URL
• 避免重复加载：给script添加唯一ID，插入前检查页面是否已存在该脚本
• 组件卸载清理：在组件卸载时移除插入的script标签，防止内存泄漏

修改后的完整代码 #

export const MyComponent = () => {
  const containerRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    // 替换为你的库实际路径，格式：'包名/库文件相对路径'
    const libraryPath = 'your-lib/dist/your-lib.min.js';
    const scriptId = 'self-exec-lib-script';

    // 检查是否已加载过该脚本，避免重复执行
    if (document.getElementById(scriptId)) {
      return;
    }

    const script = document.createElement('script');
    script.id = scriptId;
    // 利用Vite的import.meta.url解析正确的资源路径
    script.src = new URL(libraryPath, import.meta.url).href;
    
    // 可选：添加加载完成回调
    script.onload = () => {
      console.log('自执行库加载完成');
    };

    containerRef.current?.append(script);

    // 组件卸载时移除脚本
    return () => {
      const existingScript = document.getElementById(scriptId);
      if (existingScript) {
        existingScript.remove();
      }
    };
  }, []);

  return (
    <div ref={containerRef}>
    </div>
  );
};

注意事项 #

• 替换libraryPath为你实际的库文件路径，比如你安装的库是foo-lib，其自执行文件在node_modules/foo-lib/dist/foo.js，则填写'foo-lib/dist/foo.js'
• Vite会自动处理路径映射：开发环境直接指向node_modules中的文件，生产环境会将库文件复制到构建产物的assets目录并更新URL
• 自执行库加载后会自动运行逻辑，无需额外调用导出方法

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