使用 React 和捆绑器为多个客户端构建插入式脚本

Question

好的，这就是我想做的，但我不确定怎么做，因为我才开始为单个客户创建 React 应用程序项目。但是，如果我有多个客户怎么办？如果不是整个网站，它只是在他们选择的元素中呈现的图库中的一个下降怎么办？

-multiclientscript
   -commoncomponents (react components)
   -clientAlpha
      -alpha.js (has logic, imports common components, renders components where client wants on their site)
   -clientBeta
      -beta.js (same as alpha.js, but might import different components, whatever)

是否可以使用 webpack 或其他一些捆绑器设置构建，以将每个客户端的所有依赖项捆绑到客户端可以包含在其页面上的单个脚本文件中？

如果是这样，请记住我只做过非常普通的 CRA 项目，有人可以帮我指出正确的方向吗？

谢谢！

Answer 1

除非您需要特定于 Webpack 的功能，否则使用 Rollup 可能会更好（并且更容易配置）。

但是，是的，这当然是可能的。您的捆绑包入口点将具有例如（可能需要例如添加事件侦听器以在所有可能的加载阶段工作，但你明白了要点）

import * as ReactDOM fom 'react-dom';
import Gallery from './my-components/Gallery';

Array.from(document.querySelectorAll(".my-gallery")).forEach(galleryEl => {
  const id = galleryEl.dataset.galleryId;
  ReactDOM.render(galleryEl, <Gallery id={id} />);
});

而客户的 HTML 会

<div class="my-gallery" data-id="123" />
<script src="gallery-bundle.js"></script>

它应该从那里开始工作。

当然，您可能需要考虑必须在捆绑包中运送 React 和 React DOM 的开销 – Preact 可能是一个选项...

使用 React 和捆绑器为多个客户端构建插入式脚本

Using React and a bundler to build drop-in script for multiple clients

bundler

reactjs

webpack