使用rollup捆绑为esm时，React未定义

在使用 Rollup 打包为 ESM（ECMAScript 模块）时，如果遇到 React is not defined 的错误，通常是因为 Rollup 没有正确处理 React 的导入。以下是一些基础概念和相关解决方案：

基础概念

ESM (ECMAScript Modules):
- ESM 是 JavaScript 的官方模块系统，使用 import 和 export 关键字。

Rollup:
- Rollup 是一个 JavaScript 模块打包器，主要用于构建库和应用程序。
React:
- React 是一个用于构建用户界面的 JavaScript 库。

可能的原因

缺少 React 和 ReactDOM 的导入:
- 确保在代码中正确导入了 React 和 ReactDOM。

Rollup 插件配置问题:
- 可能需要配置 Rollup 插件来正确处理 React 的导入。

解决方案

1. 确保正确导入 React 和 ReactDOM

在你的入口文件或需要使用 React 的文件中，确保有以下导入语句：

import React from 'react';
import ReactDOM from 'react-dom';

2. 配置 Rollup 插件

你需要使用 @rollup/plugin-node-resolve 和 @rollup/plugin-commonjs 插件来处理 CommonJS 模块，并确保 Rollup 能够找到 React 和 ReactDOM。

以下是一个基本的 Rollup 配置示例：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import babel from '@rollup/plugin-babel';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' }),
  ],
};

3. 使用 Babel 转译

确保你已经安装并配置了 Babel，以便正确转译 React 代码。你可以使用 @rollup/plugin-babel 插件。

安装必要的依赖：

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-react

然后在你的 Babel 配置文件（例如 .babelrc）中添加 React 预设：

{
  "presets": ["@babel/preset-react"]
}

示例代码

假设你有一个简单的 React 组件：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, World!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

确保你的 Rollup 配置如上所示，并且所有必要的插件都已正确安装和配置。