Rollup 如何与 React 集成？

推荐答案

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

1. 安装必要的依赖：

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

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

   // www.javascriptcn.com code example
   import babel from '@rollup/plugin-babel';
   import resolve from '@rollup/plugin-node-resolve';
   import commonjs from '@rollup/plugin-commonjs';
   import replace from '@rollup/plugin-replace';
   
   export default {
     input: 'src/index.js',
     output: {
       file: 'dist/bundle.js',
       format: 'esm',
     },
     plugins: [
       replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
         preventAssignment: true,
       }),
       resolve({
         extensions: ['.js', '.jsx'],
       }),
       commonjs(),
       babel({
         exclude: 'node_modules/**',
         presets: ['@babel/preset-react'],
         babelHelpers: 'bundled',
       }),
     ],
   };

3. 编写 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'));

4. 构建项目： 运行以下命令来构建项目：

   npx rollup -c

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

   // www.javascriptcn.com code example
   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Rollup with React</title>
   </head>
   <body>
     <div id="root"></div>
     <script src="dist/bundle.js"></script>
   </body>
   </html>

本题详细解读

Rollup 与 React 集成的基本原理

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

1. JSX 转换：React 使用 JSX 语法，而浏览器无法直接理解 JSX，因此需要通过 Babel 将 JSX 转换为普通的 JavaScript 代码。
2. 模块解析：React 和 ReactDOM 是外部依赖，Rollup 需要能够正确解析这些模块。
3. 环境变量：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：用于替换代码中的环境变量。

构建流程

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

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