我正在尝试为我们的客户创建小部件以粘贴（嵌入）到他们自己的网站中。
理想情况下由第三方使用，如下所示：
example.html
<div id="example"></div>
<script src="https://example.com/widgets/example.bundle.js"></script>
<script>
Example.init({
selector: "#example",
name: "example"
});
</script>
我只是不知道如何使用 next.js 将特定入口点“捆绑”到单个文件中。
我使用的是从 GitHub 构建的 Vercel，因此理想情况下我希望在构建时生成这些捆绑包，而不会破坏现有的 next.js 站点。
我尝试过的：
next.config.js
module.exports = {
entry: {
example: './pages/example.js'
},
output: {
path: "./public/widgets",
filename: '[name].bundle.js'
}
}
Result:
这没有任何效果，我不明白为什么！ :(
有用的来源：
Github（Next.js 讨论）：添加一个 Webpack 条目以与 main.js 分开加载
Next.js：自定义 Webpack 配置
Next.js：设置自定义构建目录
Next.js：exportPathMap
Stackoverflow：使用 React 和 Webpack 编写可嵌入的 Javascript 插件
Webpack：配置文档
首先，您想要的嵌入/初始化格式（这当然是可嵌入小部件的典型格式）要求加载的脚本创建Example全局对象，然后您可以调用它.init()，然后将您的小部件 html 渲染到选择器中指定的标签中。
接下来创建一个完整的页面，而不是如上所述可以调用的对象。
要改变这个你需要覆盖下一个服务器绕过整个app.render()处理特定的 url，而是创建Example对象，它自己调用ReactDOM.render() on .init().
您还需要解决两种可能的情况：嵌入您的小部件的网页可以是基于 React 的页面，也可以不是。因此，您要么需要使用已经加载的 ReactDOM，要么让浏览器加载 React，然后才能渲染您的小部件。
虽然所有这些都是可行的，但要使其健壮并不容易，并且在 NextJS 中进行会使其更加麻烦。我的建议是以这样的方式构建 NextJS 应用程序的代码，即您在小部件中需要的部分是可以在 NextJS 主应用程序和使用普通 CRA 的单独的可嵌入小部件中使用的组件。
一些进一步阅读：
https://selleo.com/blog/how-to-create-embedded-react-widget（但不是 iFrame 部分）
https://meda.io/embed-react-into-an-html-web-page/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
