如何将React项目导出为其他人可以包含在脚本标签中的库

Question

我过去在我的项目中使用过外部库，这些库有一个 UI 组件（例如 Intercom 支持聊天），并且您可以通过 HTML 页面中的脚本标签包含该组件，如下所示

<script type="module" src="https://some.webpage.com/ui-script.js" async></script>

然后将其加载到窗口全局变量中，然后您可以像这样初始化它

window.someApp.boot({
   APP_ID: 'APP_ID',
   user: {
      firstName:'Bob',
      lastName:'Bobby',
   }
});

如何创建这样一个库，其他人可以将其包含在脚本标记中，并将其作为 ReactJS 项目附加到窗口？ ReactJS 可用于渲染 UI 组件的模块（例如 ant-d、tailwind 等）是否有任何限制？该库通常使用什么身份验证模型来与其相应的 API 进行身份验证？仅仅使用 API Key 就足够安全了吗？

Answer 1

您可以使用 React Context 或 React Custom Hooks 来实现。

逻辑是，您可以在逻辑中使用

React.useEffect()

运行脚本。

所以，举个例子

使用LivechatHooks.js

const useLiveChat = (portalId) => {
  const [ hasLoaded, setHasLoaded ] = React.useState(false);

  React.useEffect(() => {
    console.log('hey')
    
    // Add event listener.
    window.hsConversationsOnReady = [() => {
      setHasLoaded(true);
    }];
   
    // Create script component.
    let script = document.createElement('script');
    script.src=`//js.hs-scripts.com/${portalId}.js`;
    script.async = true;
    
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
      window.hsConversationsOnReady = [];
    }
    
  }, []);

  return ...
}

或者您可以使用

contect provider

来实现类似的逻辑