如何将 React 应用程序构建为另一个网站内的小部件

Posted 2023-02-22

【中文标题】如何将 React 应用程序构建为另一个网站内的小部件

【英文标题】：how to build a React application as a widget inside another website

【发布时间】：2017-04-30 07:59:04

【问题描述】：

我一直在使用 React 构建 SPA（单页应用程序）。每当我开始一个新项目时，我都会使用 create-react-app。到目前为止一切顺利。

我现在收到了将 React 应用程序作为小部件加载到现有 html 页面中的请求。

我的问题：我如何做到这一点？我可以使用 CDN 链接以及 Babel 来引用 react 文件，但是我在使用 Browserify 或 Webpack 打包这一切时遇到了麻烦。

你们中有人有这方面的经验吗？或许您可以与我分享最有效的方法。

我试过用谷歌搜索这个，但运气不佳。

谢谢。

【参考方案1】：

只需在 webpack.config.js 中添加行

...
externals: 
    'react': 'React',
    'react-dom': 'ReactDOM'
,
plugins: [...],
....

从包中排除 React，然后在你的包之前的页面添加它

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>

（它会照常挂载到指定的 HTML 元素）

【讨论】：

或者直接跳过所有这些，然后在页面上添加指向您的捆绑包的链接；）