如何为第三方网站创建可嵌入的 next.js (react) 组件？答案

【问题标题】：How do I create an embeddable next.js (react) component for third-party websites?如何为第三方网站创建可嵌入的 next.js (react) 组件？
【发布时间】：2020-08-04 13:53:15
【问题描述】：

我正在尝试为我们的客户创建小部件，以便在他们自己的网站中粘贴（嵌入）。

理想情况下由第三方使用：

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

【问题讨论】：

查看github.com/krakenjs/zoid
@Nico 似乎并没有完全实现我所追求的目标
老实说，我认为 Next.js 是在这里使用的错误工具。使用从 create-react-app 生成的包将是一种更简单的方法。
@Jackyef 是的，我也有这种感觉。我希望有一种简单的方法，不需要不同的环境。
@MrGithubMan 嗨，我对下一个 js 有一些问题。最后你知道如何解决吗？谢谢

标签： reactjs webpack next.js

【解决方案1】：

首先，您想要的嵌入/初始化格式（这当然是可嵌入小部件的典型格式）要求加载的脚本创建 Example 全局对象，然后您可以在该对象上调用 .init()，然后呈现您的将小部件 html 添加到选择器中指定的标签中。

接下来会创建一个完整的页面，而不是如上所述可以调用的对象。

要更改此设置，您需要 override the Next server 绕过特定 URL 的整个 app.render() 进程，而是创建 Example 对象，该对象自己调用 .init() 上的 ReactDOM.render()。

您还需要解决两种可能的情况，即嵌入您的小部件的网页可能是基于 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/

【讨论】：