如何实现Next.js商家日历页面的第三方网站嵌入功能？

需求背景 #

我有一个展示商家日历的页面，希望实现类似Calendly的嵌入功能，让商家只需添加一段脚本就能把日历嵌入自己的网站。我对webpack配置了解不多，之前查过相关资料但缺乏明确指引，只知道要把页面打包到public目录，不知道如何针对单个页面实现。

Calendly的嵌入示例如下：

<!-- Calendly inline widget begin -->
  <div class="calendly-inline-widget" data-url="https://calendly.com/s-m-sami125" style="min-width:320px;height:630px;"></div>
 <script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
 <!-- Calendly inline widget end -->

实现路径参考 #

1. 单独打包目标页面为可嵌入脚本 #

因为仅需针对单个日历页面做嵌入，无需打包整个应用，可按以下方式配置：

• 新建入口文件（如widget-entry.js），在文件中初始化日历页面组件，并监听页面中指定的DOM元素（类似Calendly的.calendly-inline-widget）。
• 配置webpack，将该入口文件打包为UMD格式的脚本（兼容AMD、CommonJS和全局变量），输出到public目录，命名可设为tappio-meeting-widget.js。
• 打包时可选择将所有依赖（React、组件代码等）打包进脚本，或通过CDN引入公共依赖以减小体积。

2. 脚本核心逻辑实现 #

在widget-entry.js中需完成以下操作：

• 查找页面中所有带有特定类名（如.tappio-meeting-widget）的DOM元素。
• 读取每个元素的data-url属性（用于指定商家的日历地址）。
• 在目标DOM元素内渲染日历，推荐两种方式：
  • iframe方式（快速实现）：创建iframe元素，将其src设为data-url的值，继承父元素宽高样式后插入目标DOM。
  • 组件渲染方式：确保React等依赖已加载，调用ReactDOM.render将日历组件挂载到目标元素上。

3. 提供给商家的嵌入代码 #

最终商家只需添加以下两段代码即可完成嵌入：

<!-- Tappio Meeting inline widget begin -->
<div class="tappio-meeting-widget" data-url="商家日历页面地址" style="min-width:320px;height:630px;"></div>
<script type="text/javascript" src="你的public目录下的widget脚本地址" async></script>
<!-- Tappio Meeting inline widget end -->

4. Webpack基础配置参考（简化版） #

针对单个页面的webpack配置示例：

const path = require('path');

module.exports = {
  entry: './src/widget-entry.js',
  output: {
    filename: 'tappio-meeting-widget.js',
    path: path.resolve(__dirname, 'public'),
    library: 'TappioMeetingWidget',
    libraryTarget: 'umd',
    globalObject: 'this'
  },
  module: {
    rules: [
      // 处理React的JSX文件
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      // 处理样式文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  externals: {
    // 若通过CDN引入React，可配置此项；否则删除
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};

5. 测试嵌入效果 #

创建静态HTML文件，复制上述嵌入代码并替换为你的脚本地址和日历地址，在本地测试是否能正常加载渲染。

内容的提问来源于stack exchange，提问作者Muhammad Sami