为React App创建类似插件的基础设施

Question

我想创建一个使用类似插件的基础设施的React应用程序。这意味着，在应用程序中，有一些基本功能总是可用的，但它可以通过插件来增强，这些插件可以使用设置环境变量的配置文件来启用。

我已经通过动态导入组件和Javascript函数实现了目标，但我在动态导入Typescript类型方面遇到了问题，这些类型只能在启用插件时使用。我创建了一个应用程序示例，展示了我正在采取的方法(也不确定这是否是最好的方法(。你可以在这里找到整个应用程序：我在Stacklitz 上的应用程序

App.tsx文件是所有内容的集合：

import * as React from 'react';
import CompA from './components/CompA';
function App() {
//  const ENV_VARS = window.__RUNTIME_CONFIG__;
//  let showPlugin1: boolean = ENV_VARS.ENABLED_PLUGINS.includes('PLUGIN_1');
let showPlugin1 = true;
let PluginB: any;
let PluginC: any;
let FuncA: any = undefined;
const [FuncVal, setFuncVal] = React.useState<string | undefined>();
let TypedFunction: any = undefined;
if (showPlugin1) {
PluginB = React.lazy(() => import('./components/plugins/CompB'));
PluginC = React.lazy(() => import('./exports/CompC'));
const loader = async () => {
({ FuncA } = await import('./components/plugins/Functions'));
setFuncVal(FuncA());
};
loader();
// import type {TypeA} from './components/plugins/Functions';
// TypedFunction = (testType: TypeA) => {
//   return <div>Function Call with TypeA</div>
// }
}
return (
<React.Fragment>
<CompA />
<React.Suspense fallback={<div>Loading Plugins...</div>}>
{PluginB && <PluginB />}
{PluginC && <PluginC />}
{FuncVal && FuncVal}
{TypedFunction && TypedFunction()}
</React.Suspense>
</React.Fragment>
);
}
export default App;

正如你所看到的，我已经注释掉了我试图根据变量的设置从文件导入类型的部分。此外，我从设置文件中读取环境变量的部分也被注释掉了，因为这似乎在Stacklitz上不起作用。

任何帮助都将不胜感激。

Answer 1

好吧，这个问题有点愚蠢。我通过将类型定义移动到.d.ts文件中解决了这个问题，这样我就不必再导出或导入它们了。

所以我的解决方案有一个基于插件的结构，如上所述，现在工作得很好。我并不是说这是最好的解决方案，但至少它有效。