开发类Intercom第三方库：如何通过boot挂载React自定义组件？

根据你使用的前端框架不同，挂载MyButton组件的方式也不一样，下面分几种常见场景说明：

场景1：MyButton是Vue 3组件 #

首先确保引入Vue的createApp方法，推荐创建独立容器挂载组件（避免依赖客户端现有DOM节点，降低冲突风险）：

import { createApp } from 'vue';
import MyButton from "./MyButton";

declare global {
    interface Window {
        MyClient: {
            boot: () => void;
        };
    }
}

export namespace MyClient {
    export const boot = () => {
        // 创建独立容器并添加到页面body
        const buttonContainer = document.createElement('div');
        buttonContainer.className = 'my-client-button-container'; // 加类名方便样式隔离
        document.body.appendChild(buttonContainer);

        // 挂载Vue组件到容器
        createApp(MyButton).mount(buttonContainer);
    };
}

window.MyClient = MyClient;

场景2：MyButton是React组件 #

引入React和ReactDOM，创建根节点后渲染组件：

import React from 'react';
import ReactDOM from 'react-dom/client';
import MyButton from "./MyButton";

declare global {
    interface Window {
        MyClient: {
            boot: () => void;
        };
    }
}

export namespace MyClient {
    export const boot = () => {
        const buttonContainer = document.createElement('div');
        buttonContainer.className = 'my-client-button-container';
        document.body.appendChild(buttonContainer);

        // 创建React根节点并渲染组件
        const root = ReactDOM.createRoot(buttonContainer);
        root.render(<MyButton />);
    };
}

window.MyClient = MyClient;

场景3：MyButton是原生Web Component #

如果MyButton是已注册的自定义元素，直接创建实例并添加到DOM：

import "./MyButton"; // 假设该文件已完成自定义元素<my-button>的注册

declare global {
    interface Window {
        MyClient: {
            boot: () => void;
        };
    }
}

export namespace MyClient {
    export const boot = () => {
        const button = document.createElement('my-button');
        document.body.appendChild(button);
    };
}

window.MyClient = MyClient;

Vite打包配置注意事项 #

为了让库能正确被任意前端应用引入，需在vite.config.js中配置库模式：

export default {
  build: {
    lib: {
      entry: 'src/你的入口文件路径.js',
      name: 'MyClient',
      fileName: 'my-client-lib',
    },
    rollupOptions: {
      // 若希望客户端自行提供框架依赖，配置external；否则移除该选项将框架打包进库
      external: ['vue', 'react', 'react-dom'],
      output: {
        // 为外部依赖指定全局变量名
        globals: {
          vue: 'Vue',
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
};

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