我有一个主 UI，我想以 React 组件的形式加载一个子 UI，然后通过React.SuspenseJSX 标签集成它。Main 和 Sub UI 都将分别与 Webpack 捆绑在一起。子 UI 捆绑为Webpack 5 Module Library.
现在，从 URL 动态加载组件似乎没有问题。我可以用
var path = "<< some URL to a JS-File in a CDN >>";
var SubUiComponent = React.lazy(() => import(/* webpackIgnore: true */ path));
但是因为我要导入的组件与 Webpack 捆绑在一起，所以正在使用另一个 React 实例。我已经尝试过使用 Webpack Externals，但似乎无法将其与动态导入结合使用。
当我没有定义外部对象时，我收到以下错误：
未捕获的错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：
- 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
- 你可能会违反 Hooks 规则
- 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/warnings/invalid-hook-call-warning.html以获取有关如何调试和修复此问题的提示。
使用 中定义的外部变量webpack.config.js，我得到了预期的错误：
未捕获的 ReferenceError：React 未定义
那么，有没有办法将 React 组件“某种”捆绑为一个库，然后将其导入另一个 React 环境并在那里使用它？
对于您的两个不同的本地 React 项目，您想从另一个链接/引用/导入一个项目吗？如果这是你想要做的，那么是的，这是可能的。
第一种方法：
你需要研究npm 链接
注意 package-name 取自 package.json，而不是目录名。
npm link在包文件夹中将在全局文件夹{prefix}/lib/node_modules/<package>中创建一个符号链接，该符号链接链接到执行 npm link 命令的包。
它还会将包中的任何 bin 链接到{prefix}/bin/{name}. 请注意， npm link 使用全局前缀（参见npm prefix -g了解其值）。
在其他位置，npm link package-name将创建从全局安装的包名到node_modules/当前文件夹的符号链接
cd ~/projects/some-dep
npm link # Step 1.
cd ~/projects/my-app
npm link some-dep # Step 2.
现在，从您的 my-app 文件夹中，您可以安装 some-dep
~/projects/my-app
npm install some-dep@
第二种方法：
将您的项目捆绑并发布到 npm 注册表，然后安装，将其导入到您的其他项目中。参考我发布的试用版
第三种方法：
Webpack ModuleFederation，当您导入项目/模块时，它会在 node_modules 中查找，如果未找到则在联合模块中。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句