如何在Docusaurus中集成自定义Angular组件

核心问题A：自动托管node_modules/mycomponent/dist资源 #

针对手动复制资源的痛点，可通过webpack配置+预构建脚本实现开发/生产环境的自动资源同步：

1. 开发环境：webpack自动复制 #

修改docusaurus.config.js，集成copy-webpack-plugin实现开发时实时同步资源：

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

module.exports = {
  // 其他原有配置
  webpack: {
    plugins: [
      new CopyPlugin({
        patterns: [
          {
            from: 'node_modules/mycomponent/dist',
            to: 'static/mycomponent',
            noErrorOnMissing: true, // 避免组件未安装时触发构建报错
            force: true, // 覆盖旧资源，确保更新生效
          },
        ],
      }),
    ],
  },
  devServer: {
    static: {
      directory: './static', // 确保devServer能访问静态资源目录
    },
  },
};

配置后，开发模式下webpack会自动将组件资源复制到static目录，修改组件资源时会同步更新。

2. 生产环境：预构建脚本自动同步 #

在package.json中添加预构建命令，确保构建前自动复制最新资源：

"scripts": {
  "prebuild": "cp -r node_modules/mycomponent/dist static/mycomponent",
  "build": "docusaurus build"
}

Windows环境替换为xcopy命令：

"prebuild": "xcopy /E /I node_modules\\mycomponent\\dist static\\mycomponent"

执行npm run build时，会先完成资源复制再执行构建流程。

次要问题B：仅在Demo页面加载组件资源 #

通过React封装组件+动态加载资源实现按需加载，避免全局加载冗余资源：

1. 创建封装React组件 #

新建src/components/MyAngularComponent.jsx，在组件内部动态加载脚本和样式：

import React, { useEffect, useRef } from 'react';

const MyAngularComponent = ({ url }) => {
  const componentRef = useRef(null);
  const hasLoaded = useRef(false);

  useEffect(() => {
    if (hasLoaded.current) return;

    // 加载样式表
    const styleLink = document.createElement('link');
    styleLink.rel = 'stylesheet';
    styleLink.href = `${url}/styles.css`; // 替换为组件实际样式文件名
    document.head.appendChild(styleLink);

    // 按依赖顺序加载Angular脚本
    const scriptUrls = [
      `${url}/runtime.js`,
      `${url}/polyfills.js`,
      `${url}/main.js`
    ];

    const loadScripts = async () => {
      for (const src of scriptUrls) {
        const script = document.createElement('script');
        script.src = src;
        await new Promise(resolve => {
          script.onload = resolve;
          document.body.appendChild(script);
        });
      }
      hasLoaded.current = true;
      // 若组件需手动初始化，在此处调用对应方法（例：window.initMyComponent(componentRef.current)）
    };

    loadScripts();

    // 页面卸载时清理资源
    return () => {
      document.head.removeChild(styleLink);
      scriptUrls.forEach(src => {
        const script = document.querySelector(`script[src="${src}"]`);
        script && document.body.removeChild(script);
      });
      hasLoaded.current = false;
    };
  }, [url]);

  return <div ref={componentRef} id="my-angular-component" url={url}></div>;
};

export default MyAngularComponent;

2. 在Demo页面MDX中使用组件 #

在需要展示Demo的MDX文件中导入并使用该组件：

import MyAngularComponent from '../components/MyAngularComponent';

# Angular组件Demo

<MyAngularComponent url="/mycomponent" />

只有当该Demo页面被访问时，才会加载组件所需的脚本和样式，其他页面无冗余资源加载。

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