gpt4 book ai didi

reactjs - 如何为第三方网站创建可嵌入的 next.js (react) 组件?

转载 作者:行者123 更新时间:2023-12-03 21:49:26 31 4
gpt4 key购买 nike

我正在尝试为我们的客户创建小部件以粘贴(嵌入)到他们自己的网站中。
理想情况下由第三方使用,如下所示: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'
}
}
结果:
这没有任何效果,我不明白为什么! :(
有用的来源:
Github (Next.js Discussions): Adding a Webpack entry to load separately from main.js
Next.js: Custom Webpack Config
Next.js: Setting a custom build directory
Next.js: exportPathMap
Stackoverflow: Writing embeddable Javascript plugin with React & Webpack
Webpack: Configuration Documentation

最佳答案

首先,您想要的嵌入/初始化格式(这当然是可嵌入小部件的典型格式)要求加载的脚本创建 Example全局对象,然后您可以在该对象上调用 .init() ,然后将您的小部件 html 呈现到选择器中指定的标签中。
Next 创建一个完整的页面,而不是一个可以如上所述调用的对象。
要更改此设置,您需要 override the Next server绕过整个app.render()处理特定的 url,而是创建 Example对象,它自己调用 ReactDOM.render().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/

关于reactjs - 如何为第三方网站创建可嵌入的 next.js (react) 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63248414/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com