Rollup 如何与 React 集成？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

要将 Rollup 与 React 集成，可以按照以下步骤进行：

安装必要的依赖：

npm install rollup @rollup/plugin-babel @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-replace react react-dom

配置 Rollup：在项目根目录下创建一个 rollup.config.js 文件，并添加以下配置：

-- -------------------- ---- -------
------ ----- ---- -----------------------
------ ------- ---- ------------------------------
------ -------- ---- --------------------------
------ ------- ---- -------------------------

------ ------- -
  ------ ---------------
  ------- -
    ----- -----------------
    ------- ------
  --
  -------- -
    ---------
      ----------------------- -----------------------------
      ------------------ -----
    ---
    ---------
      ----------- ------- --------
    ---
    -----------
    -------
      -------- ------------------
      -------- ------------------------
      ------------- ----------
    ---
  --
--

编写 React 组件：在 src/index.js 中编写你的 React 组件：

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

const App = () => <h1>Hello, Rollup with React!</h1>;

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

构建项目：运行以下命令来构建项目：
```
npx rollup -c
```

在 HTML 中使用生成的 bundle：在 index.html 中引入生成的 bundle.js：

-- -------------------- ---- -------
--------- -----
----- ----------
------
  ----- ----------------
  ----- --------------- ---------------------------- -------------------
  ------------- ---- -------------
-------
------
  ---- ----------------
  ------- ------------------------------
-------
-------

本题详细解读

Rollup 与 React 集成的基本原理

Rollup 是一个 JavaScript 模块打包器，主要用于将多个模块打包成一个或多个文件。React 是一个用于构建用户界面的 JavaScript 库。要将 Rollup 与 React 集成，主要需要解决以下几个问题：

JSX 转换：React 使用 JSX 语法，而浏览器无法直接理解 JSX，因此需要通过 Babel 将 JSX 转换为普通的 JavaScript 代码。
模块解析：React 和 ReactDOM 是外部依赖，Rollup 需要能够正确解析这些模块。
环境变量：React 在生产环境中会进行一些优化，因此需要通过 @rollup/plugin-replace 插件来设置 process.env.NODE_ENV。

配置详解

@rollup/plugin-babel：用于将 JSX 转换为 JavaScript，并支持其他 Babel 转换。
@rollup/plugin-node-resolve：用于解析 node_modules 中的模块。
@rollup/plugin-commonjs：用于将 CommonJS 模块转换为 ES 模块。
@rollup/plugin-replace：用于替换代码中的环境变量。

构建流程

输入文件：Rollup 从 src/index.js 开始打包。
插件处理：
- @rollup/plugin-replace 替换环境变量。
- @rollup/plugin-node-resolve 解析模块路径。
- @rollup/plugin-commonjs 将 CommonJS 模块转换为 ES 模块。
- @rollup/plugin-babel 将 JSX 转换为 JavaScript。
输出文件：最终生成 dist/bundle.js，可以在 HTML 中引入并使用。

通过以上步骤，你可以成功地将 Rollup 与 React 集成，并构建出一个可运行的 React 应用。