2

设想：

我想将 React 组件作为独立的 React 应用程序嵌入到网页中。例如，假设一个日期选择器和一个颜色选择器。

我不想为每个独立的捆绑包捆绑 React 或其他常见依赖项两次（或者与我最终使用这种方法一样多次）。我知道我可以使用 webpack externals 来实现这一点。

为什么使用 webpack externals 并不理想

webpack externals 意味着通过脚本标签加载一个版本的 React 并使其作为全局对象可用。在我正在处理的网站的整个生命周期中，我会被卡住：

  • 使用一个版本的 React
  • 如果我想使用新版本，痛苦地更新所有组件

理想的解决方案

Webpack 将各个应用程序捆绑到它们自己的范围内，如果我打包不同的 React 版本而不将它们放在外部，它似乎可以毫无问题地工作，因为每个实例都是隔离的。

是否有某种方法可以配置 webpack 在运行时查找外部模块（例如，来自 CDN 的特定版本的 React），但最重要的是不将其附加到全局命名空间并将其加载到捆绑代码的范围内？

主要的好处是允许浏览器缓存 React，并避免每次构建新组件时添加相同的下载足迹。

感谢您的时间和考虑。

4

1 回答 1

1

不是 100% 确定这是你想要的，但我正在做类似的事情：

我在一个配置中有多个 webpack 条目，它们呈现不同的反应组件。然后我将常见的依赖关系拆分成不同的块。这意味着没有外部环境污染全局命名空间。如果我想渲染这些组件中的至少一个，我需要包含react-common块以及包含组件的非常小的文件。

webpack 5 配置的重要部分如下所示：

{
  entry: [
    'my-component-1': './react-dir/entries/component-1.jsx',
    'my-component-2': './react-dir/entries/component-2.jsx',
  ],
  // ... loaders, plugins
  optimization: {
    splitChunks: {
      cacheGroups: {
        reactDependencies: {
          test: /([\\/]node_modules[\\/](react[\\/]|react-(dom|toastify|transition-group))/, //defining all common react dependencies that should be split off because they are in more than one component
          name: "react-common",
          chunks: "all",
        }
      }
    }
  }  
}

然后我像这样定义我的组件条目：

//react-dir/entries/component-1.jsx`
import React from 'react';
import ReactDOM from 'react-dom';
import Component1 from '../components/Component1';
const container = document.getElementById("idOfContainerWhereComponentShouldBeRenderedInto");

ReactDom.render(<Component1 />, container);
于 2021-08-02T15:26:57.520 回答