如何在不修改React模块的前提下实现独立演示页的模块化加载？

以下是几种无需修改原有react-imgbox.js模块的解决方法：

1. 启用浏览器原生ES模块支持并兼容CommonJS #

如果你的react-imgbox.js是用CommonJS规范（module.exports/require）编写的，浏览器原生ES模块无法直接识别，可通过es-module-shims来兼容：

• 下载es-module-shims脚本文件到本地项目目录
• 在HTML头部引入该脚本：

  <script async src="./es-module-shims.js"></script>
  

• 添加导入映射配置，声明React相关依赖的本地路径：

  <script type="importmap-shim">
    {
      "imports": {
        "react": "./react.production.min.js",
        "react-dom": "./react-dom.production.min.js"
      }
    }
  </script>
  

  （需提前下载React和ReactDOM的UMD版本到本地）
• 将加载演示逻辑的脚本标签类型设为module-shim：

  <script type="module-shim" src="./Main.js"></script>
  

• 在Main.js中正常导入组件：

  import ReactImgbox from './react-imgbox.js';
  // 后续渲染逻辑...
  

2. 使用轻量构建工具打包（推荐） #

用Vite或Parcel这类零配置工具处理模块兼容，无需修改原模块：

以Vite为例： #

• 初始化项目：

  npm init -y
  npm install vite react react-dom --save-dev
  

• 创建index.html，引入演示脚本：

  <div id="root"></div>
  <script type="module" src="./Main.js"></script>
  

• 在Main.js中正常导入组件并编写渲染逻辑：

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import ReactImgbox from './react-imgbox.js';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <ReactImgbox />
  );
  

• 启动开发服务：

  npx vite
  

  浏览器会自动打开演示页面，Vite会自动处理CommonJS与ES模块的转换、依赖解析等问题。若要生成静态演示文件，执行npx vite build即可得到可直接部署的dist文件夹。

3. 配置HTML脚本为ES模块（仅适用于原模块是ES规范的情况） #

如果你的react-imgbox.js本身就是用ES模块规范（export default/import）编写的，只需两步：

• 在Main.js中正确导入组件：

  import ReactImgbox from './react-imgbox.js';
  // 渲染逻辑...
  

• 将HTML中的脚本标签设置为type="module"：

  <script type="module" src="./Main.js"></script>
  

  注意：此方法要求所有依赖（如React）也通过ES模块引入，或使用UMD版本并挂载到全局。

内容的提问来源于stack exchange，提问作者David Newcomb