Docusaurus v2 文档页引入外部JavaScript不执行如何解决？

你当前的配置之所以不生效，核心原因是Docusaurus是基于React的单页应用：

• 你通过injectHtmlTags注入的脚本会直接写入静态HTML的body末尾，脚本加载执行时，React应用还未完成客户端水合，你需要绑定事件的组件DOM节点还没被渲染到页面上，初始化逻辑找不到对应DOM自然不会生效。
• 另外Docusaurus的客户端路由切换时，你注入的静态脚本不会重新执行，切换页面后新加载的组件示例也会失去交互能力。

临时修复方案（适配现有脚本逻辑） #

如果你的组件脚本无法修改，可直接调整插件的script注入配置，添加defer属性延迟脚本执行时机，保证DOM解析完成后再运行：

// 修改你的docusaurus-plugin-component-assets.js中postBodyTags部分
postBodyTags: [
  {
    tagName: 'script',
    attributes: {
      src: 'https://example.com/js/component.min.js',
      defer: true,
      async: false
    },
  },
],

如果可以调整组件脚本，建议把所有初始化逻辑包裹在DOM就绪事件中，从脚本层面保证执行时机正确：

// 组件脚本的外层包裹逻辑
document.addEventListener('DOMContentLoaded', () => {
  // 原有组件初始化逻辑写在这里
})

推荐方案（适配Docusaurus生命周期） #

针对Docusaurus的单页应用特性，更稳妥的方式是通过客户端模块处理脚本加载和初始化，兼容路由切换场景：

1. 首先在docusaurus.config.js中新增客户端模块配置：

// docusaurus.config.js
module.exports = {
  // 其他配置保持不变
  clientModules: [
    path.resolve(__dirname, 'src/clientModules/componentInit.js')
  ],
  plugins: [
    'docusaurus-plugin-sass',
    path.resolve(__dirname, 'src/plugins/docusaurus-plugin-component-assets.js')
  ]
}

2. 新建src/clientModules/componentInit.js文件，编写初始化逻辑：

import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';

if (ExecutionEnvironment.canUseDOM) {
  // 首次页面加载完成后初始化组件
  window.addEventListener('load', () => {
    // 调用组件脚本暴露的全局初始化方法，例如window.YourComponentLib.init()
  });

  // 监听路由切换事件，切页后重新初始化新页面的组件
  document.addEventListener('docusaurus:routeupdate', () => {
    setTimeout(() => {
      window.YourComponentLib.init();
    }, 100); // 延迟100ms等待新页面DOM渲染完成
  });
}

最优方案（单文档按需初始化） #

如果你的组件仅在特定文档页展示，建议直接在对应MDX文档中通过React钩子按需初始化，避免全局执行多余逻辑：

---
title: 按钮组件
---

import { useEffect } from 'react';

// 页面级初始化逻辑
useEffect(() => {
  // 仅当前页面组件渲染完成后执行初始化
  window.YourComponentLib.init('.button-example');
}, []);

## 示例
<div className="button-example">
  <button class="my-button">按钮</button>
</div>

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