如何在Vanilla JS+React混合项目中使用React类库？

你的问题根源在于：Babel默认将ES6的import语法转换为Node.js环境的CommonJSrequire语法，但浏览器原生不支持require，因此报错。以下是几种可行的解决方式：

方式一：使用打包工具（推荐，适用于长期维护的项目） #

直接用Babel编译无法处理模块依赖，需要配合Webpack或Parcel这类打包工具将所有模块打包成浏览器能识别的单文件：

1. 安装必要依赖：

npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-react

2. 在项目根目录创建webpack.config.js：

module.exports = {
  entry: './react-js/你的入口组件.js', // 替换成你的React组件入口文件
  output: {
    filename: 'js/bundle.js', // 编译后的输出文件
    path: __dirname
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  mode: 'development'
};

3. 修改执行命令（或添加到package.json的scripts中）：

npx webpack --watch

4. 在HTML中引入打包后的bundle.js，替换原来的Babel编译输出文件。

方式二：直接引入类库的UMD版本（快速解决，适用于小型项目） #

react-responsive-carousel提供了UMD格式的文件，可以像引入React/ReactDOM一样直接通过script标签使用：

1. 若已通过npm安装类库，找到node_modules/react-responsive-carousel/dist目录下的carousel.min.js和carousel.min.css。

2. 将这两个文件复制到项目静态资源目录（比如js和css文件夹）。

3. 在HTML中按顺序引入：

<!-- 先引入React和ReactDOM -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 然后引入carousel的样式和脚本 -->
<link rel="stylesheet" href="css/carousel.min.css">
<script src="js/carousel.min.js"></script>

4. 在React组件中直接使用全局变量Carousel，无需import：

const { Carousel } = window;

function MyCarousel() {
  return (
    <Carousel>
      <div>
        <img src="image1.jpg" />
        <p className="legend">Legend 1</p>
      </div>
      <div>
        <img src="image2.jpg" />
        <p className="legend">Legend 2</p>
      </div>
    </Carousel>
  );
}

方式三：调整Babel配置转成UMD模块 #

修改Babel配置，让它将ES模块转换为浏览器兼容的UMD格式：

1. 安装对应插件：

npm install --save-dev @babel/plugin-transform-modules-umd

2. 创建或修改.babelrc文件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-modules-umd"]
}

3. 重新执行Babel编译命令：

npx babel react-js --out-dir js --presets @babel/preset-env,@babel/preset-react --plugins @babel/plugin-transform-modules-umd --watch

这种方式会将import转换为UMD格式适配浏览器，但部分类库可能存在全局变量命名冲突的风险。

内容的提问来源于stack exchange，提问作者Hitesh Jindal