需要：

客户的我的项目须要用咱们的性能，且须要提供个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')  );};// 渲染sdkexport 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标签间接援用，这样就不会报错了。