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

52次阅读

共计 1803 个字符，预计需要花费 5 分钟才能阅读完成。

客户的我的项目须要用咱们的性能，且须要提供个 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();
  }, []);

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

正文完