Javascript 具有动态导入的主机应用程序

我有一个带有父组件和多个子组件的react应用程序。 每个子级使用清单表示不同的应用程序

src/
   host/ 
        Host.js
   app/
        foo/ 
            Foo.js
            manifest.json
        bar/ 
            Bar.js
            manifest.json 
        baz/
            Baz.js
            manifest.json  

我希望在每个应用程序中都有一些重要的应用程序数据（如路由名称） 应用程序清单，并让宿主应用程序读取它们

{
    "name": "Foo",
    "location": "this/is/a/foo/route"
}

主机应该能够使用路由器使用

清单.位置中的数据

---

我希望避免在主机中维护当前应用程序的列表 因此，代码尽可能可重用

我想的是做一些网页处理来识别路径 然后动态生成这些导入

我不知道我提出的解决方案是否可行。 有没有更好的方法用Webpack实现这种功能？ 你能给我指一下正确的方向吗

---

谢谢

关于您的方法的一些想法：

我希望在每个应用程序清单中包含一些重要的应用程序数据（如路由名称），并让宿主应用程序读取它们

{
    "name": "Foo",
    "location": "this/is/a/foo/route"
}

为什么子应用程序必须知道其在

manifest.json

中的路由器配置？您的主机应用程序负责编排您的所有子应用程序。它应该知道路由到特定子应用的映射

更详细地说：可能有一个原因，为什么你首先要将子应用程序隔离开来——它们是自给自足的，彼此独立，与主机无关。例如，想象一下，您可能希望重用其中一个应用程序，并将其作为独立应用程序运行。这也是为什么让孩子们在主人家登记自己并不理想的原因。因为这将加强子级和主机之间的更紧密耦合—子级必须知道，它被用于一些更大的应用程序中

儿童应用程序 关于子应用程序，它可以只导出一些可运行的回调，如果路由匹配，主机将调用这些回调。在使用React的情况下，导出一个将由主机呈现的

ReactElement

就足够了。这个入口点也可以通过Webpack以捆绑流程的形式创建

// as ReactElement
export const FooChildElement = <div>I am Foo child</div>
// as Component
export const FooChildComp = () => <div>I am Foo child</div>

主办 这样，主机只需知道导出的映射，在路由匹配时运行应用程序，执行一些错误处理和其他信封任务

const Router = ({route}) => routeToChildMapping[route].entry

// here getUrlSomewhere simplified
const MyHostApp = () => <Router route={getUrlSomewhere()}/>

const Router=（{route}）=>routeToChildMapping[route]。条目
//这里有一个简单的地方
const MyHostApp=（）=>

---

---

我试着简化大局，并遵守这里的

KISS

，因为一开始不要把事情过分复杂。当然，这在很大程度上取决于您构建的环境和项目。因此，请随时根据您的需要/要求调整该概念

非常感谢您的详细回复。有道理，我会按照你建议的方向去做。