webpack 从外部URL动态导入React组件并使用父React环境

yqyhoc1h  于 2023-04-30  发布在  Webpack
关注(0)|答案(2)|浏览(135)

我有一个主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环境中并在那里使用它?

gcuhipw9

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/的符号链接

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注册表,然后安装,导入到你的其他项目中。Refer this one我发布来试用

第三种方法:

Webpack ModuleFederation,当您导入项目/模块时,它会在node_modules中查找它,如果没有找到,则在联邦模块中查找。
参考:https://webpack.js.org/concepts/module-federation/

qmb5sa22

qmb5sa222#

你可以试试https://github.com/Paciolan/remote-component

const url = "https://remote.../HelloWorld.js";

const HelloWorld = ({ name }) => <RemoteComponent url={url} name={name} />;

const Container = (
  <>
    <HelloWorld name="Remote" />
  </>
);

https://github.com/Paciolan/remote-module-loader

import loadRemoteModule from "./lib/loadRemoteModule";

const myModule = loadRemoteModule("https://remote.../my-module.js");

myModule.then(m => {
  const MyComponent = m.default();
  console.log({ MyComponent });
});

相关问题