5

我们正在开发一个 React 组件库。某些组件需要更新，而无需重新部署主机应用程序代码。这很像谷歌地图库，其中客户端 API 是一个小的 shell 代码，它在运行时导入实际的地图代码，从而允许热更新而无需任何主机停机时间。所以我们计划把这个库的输出分成两部分——

  1. Shell 组件库，任何主机应用程序代码都将使用它来从中导入 Shell 组件。例如

    import Notifications from 'our-shell-lib';
render(){
    return <Notifications .../>;
}
  2. 我们计划在我们的服务器上托管的核心组件库。我们将继续使用新的修复程序和功能对其进行更新。

在上面的示例中，Notifications 组件将从我们的服务器下载 NotificationsCore 组件并在内部安装它。

我们已经能够导出单个 shell 组件，并使用此处描述的基于scriptjs的技术在运行时正确下载相应的核心组件。

但是，当核心组件使用动态导入时，这会中断，这会导致代码拆分。所有核心组件文件都在远程服务器上可用，但我们还没有成功地将它们打包成具有动态导入的核心组件可以以与服务器 URL 无关的方式从远程服务器加载其拆分块。我们不想在 core bundle 中硬编码公共路径。我们可以在运行时将服务器路径传递给核心组件，以帮助它找到动态导入，但还没有找到这样做的方法。

想法？

4

1 回答 1

3

很抱歉回复太晚了......

我们能够通过使用来解决这个问题__webpack_public_path__。在发布这个问题时，关于这个简洁的小功能的文档很少。它允许你设置 webpack shim 使用的公共路径（包含在每个 webpack 包中）来解析相对导入。

因此，我们在核心库中导出了一个瘦包装器函数，外壳组件可以调用该函数来设置他们从哪个 CDN 导入核心库的公共路径。

于 2019-06-13T07:24:07.633 回答