关于react.js:怎样写个sdk嵌套到别的项目

需要：

客户的我的项目须要用咱们的性能，且须要提供个modal嵌入到他们的我的项目里，在他们的table中点击对应的item，弹出我提供的modal。

解决方案

我的项目应用cra构建，应用webpack的library导出为一个库给第三方应用, 官网教程创立 library

   output: {
      library: 'Geek'
    }

这样的话客户就能够间接window.Geek.showModal()调用咱们的弹窗，
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

import './index.css';
import 'antd/dist/antd.less';

import { defaultAuditRecord } from 'constants/configration';

const modalState = {};

const createContainer = () => {
  const container = document.createElement('div');
  container.setAttribute('id', 'container');
  document.body.append(container);
};

const renderApp = (showBtn) => {
  ReactDOM.render(
    <React.StrictMode>
      <App modalState={modalState} showBtn={showBtn} />
    </React.StrictMode>,
    document.getElementById('container')
  );
};
// 渲染sdk
export const mount = (showBtn) => {
  createContainer();
  renderApp(showBtn);
};
// 显示弹窗
export const showModal = (record = defaultAuditRecord, callback = () => {}) => {
  // record 为{id:1,user:""}
  modalState.showModal(record, callback);
};

export const closeModal = () => {
  modalState.closeModal();
};

// mount(true);

客户调用sdk

  const handleAuditBtnClick = useCallback(
    (record) => () => {
      window.Geek.showModal(
        { id: record.id, user: record.username },
        (event) => { // sdk的modal操作动作执行后的回调
          if (
            event === AuditModalEvent.SAVE_SUCCESS ||
            event === AuditModalEvent.SUBMIT_SUCCESS ||
            event === AuditModalEvent.CANCEL_SUCCESS
          ) {
            fetchList();
          }
        }
      );
    },
    [fetchList]
  );

  useEffect(() => {
    window.Geek.mount();
  }, []);

遇到的坑

1. 自定义款式抵触
   sdk我的项目应用的是styled-components，咱们内部测试sdk的我的项目也是用styled-components创立的，我本认为该库生成的classname是随机的，然而两个我的项目生成的classname很多都是反复的，解体。。。 最容易想到的是为sdk所有classname加个前缀。
   package.json

   "babel": {
    "presets": [
      "@babel/preset-env"
    ],
    "plugins": [
      [
        "babel-plugin-styled-components",
        {
          "namespace": "jit-sdk"
        }
      ]
    ]
   },

2. antd的款式跟客户的款式抵触
   客户的我的项目也用到了antd,只不过是vue版的，然而有些款式是一样的。
3. sdk 在客户的我的项目中编译报错 unexpected token
   客户的我的项目是vue3的环境，将sdk放在src目录下编译就会报错，那么只好绕过编译，将生成的sdk.js 放到public目录下，在index.html用script标签间接援用，这样就不会报错了。