我有一个主UI,我想以React组件的形式加载一个子UI,然后通过React.Suspense
JSX标签集成。主界面和子界面都将单独与Webpack捆绑在一起。Sub 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,但似乎没有办法将其与动态导入结合使用。
当我没有定义外部变量时,我得到以下错误:
未捕获错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一:
1.你可能有不匹配的React版本和渲染器(比如React DOM)
1.你可能违反了钩的规则
1.您可能在同一个应用程序中有多个React副本,请参阅https://reactjs.org/warnings/invalid-hook-call-warning.html了解有关如何调试和修复此问题的提示。
在webpack.config.js
中定义外部元素时,我得到了预期的错误:
未捕获引用错误:React未定义
那么,有没有一种方法可以将一个React组件“某种程度上”捆绑为一个库,然后将它导入到另一个React环境中并在那里使用它?
2条答案
按热度按时间gcuhipw91#
有了两个不同的本地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
将创建一个从全局安装的package-name到当前文件夹node_modules/
的符号链接现在,从my-app文件夹中,您可以安装some-dep
第二种方法:
将你的项目捆绑并发布到npm注册表,然后安装,导入到你的其他项目中。Refer this one我发布来试用
第三种方法:
Webpack ModuleFederation,当您导入项目/模块时,它会在node_modules中查找它,如果没有找到,则在联邦模块中查找。
参考:https://webpack.js.org/concepts/module-federation/
qmb5sa222#
你可以试试https://github.com/Paciolan/remote-component
或https://github.com/Paciolan/remote-module-loader