🎢从零打造React组件库！Rollup+TS+React19保姆级上车指南（一）🚀

摘要

"旨在通过从0到1式，通过一个个依赖，搭建起来一个正常的react + rollup项目，帮大家理解项目运行机制，以及基于前端工程化的基础搭建流程"

一、🚦 初始化项目（Show Me The Code!）

bash 复制代码

mkdir violet-ui && cd violet-ui
pnpm init

二、📦 核心依赖安装（这些包到底有啥用？）

✅ 第一步：安装 React 相关依赖

bash 复制代码

# React全家桶
pnpm add react react-dom

包名	用途
react	React 核心库（必须）
react-dom	渲染 DOM（浏览器中用它）

✅ 第二步：安装 TypeScript + 类型声明

bash 复制代码

pnpm add -D typescript @types/react @types/react-dom

包名	用途
typescript	编写和编译 .ts 和 .tsx 的基础工具
@types/react	React 的类型定义（比如 FC, useState）
@types/react-dom	React DOM 的类型（如 createRoot）

✅ 第三步：安装 Rollup 核心工具

bash 复制代码

pnpm add -D rollup

包名	用途
react	React 核心库（必须）
react-dom	渲染 DOM（浏览器中用它）

✅ 第四步：让 Rollup 能加载模块（如 React）

bash 复制代码

pnpm add -D @rollup/plugin-node-resolve @rollup/plugin-commonjs

包名	用途
@rollup/plugin-node-resolve	让 Rollup 能加载 node_modules 中的模块
@rollup/plugin-commonjs	把 CommonJS 格式（如 React）转成 ESM 使用

✅ 第五步：让 Rollup 支持 TypeScript

bash 复制代码

pnpm add -D @rollup/plugin-typescript @babel/preset-typescript

包名	用途
@rollup/plugin-typescript	让 Rollup 能打包 .ts 和 .tsx 文件

✅ 第六步：安装 Babel 相关（处理 JSX + ES 转译）

bash 复制代码

pnpm add -D @babel/core @babel/preset-env @babel/preset-react @rollup/plugin-babel

包名	用途
@babel/core	Babel 核心库，负责编译 JS
@babel/preset-env	把现代 JS 转为兼容老浏览器的代码
@babel/preset-react	把 JSX 转换成 React.createElement
@rollup/plugin-babel	让 Babel 能嵌入 Rollup 打包流程中

✅ 第七步：本地开发服务器（浏览器预览页面）

bash 复制代码

pnpm add -D rollup-plugin-serve rollup-plugin-livereload @rollup/plugin-replace cross-env dotenv

包名	用途
rollup-plugin-serve	启动本地服务器（浏览器预览打包页面）
rollup-plugin-livereload	文件变动时刷新浏览器
@rollup/plugin-replace	注入process环境变量
cross-env	支持跨端变量

三、🎛️ 灵魂配置文件详解

1. Rollup核心配置

javascript 复制代码

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

export default {
  input: 'src/main.tsx',      // 📌 入口文件定位
  output: {
    file: 'dist/bundle.js',  // 📦 输出文件路径
    format: 'esm',           // 🌐 模块格式选择
    sourcemap: true          // 🗺️ 调试神器开启
  },
  plugins: [
    // 🔍 模块解析器
    replace({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
        preventAssignment: true
    }),
    // 👀 让 Rollup 能从 node_modules 中正确找到 React、ReactDOM 等第三方库
    resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
    // 🔄 CJS转ESM
    commonjs(),
    // 🧬 JSX转换器
    babel({
        babelHelpers: 'bundled',
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
        exclude: 'node_modules/**'
    }),
    cleandir('dist')
  ]
}

2. TypeScript配置玄机

json:/Users/chenhebin/Documents/violet/code/front/openCode/violet-ui/tsconfig.json 复制代码

{
  "compilerOptions": {
    "jsx": "react-jsx",     // 🔄 自动JSX转换
    "moduleResolution": "node", // 🗺️ 模块解析策略
    "strict": true          // 🔒 严格类型检查
  }
}

3. 流程图

csharp 复制代码

你写的 .tsx 代码

      ↓

[typescript 插件] 编译成 JS（但仍包含 JSX）

      ↓

[babel 插件] 转 JSX + 语法降级

      ↓

[resolve + commonjs] 引入 node_modules 中的依赖

      ↓

生成 dist/bundle.js

      ↓

[serve 插件] 本地起服务，访问 public/index.html

      ↓

[livereload 插件] 页面自动刷新

完整配置输出

javascript 复制代码

import babel from '@rollup/plugin-babel'
import replace from '@rollup/plugin-replace'
import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import { cleandir } from 'rollup-plugin-cleandir'

import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'
import { config } from 'dotenv'
import { fileURLToPath } from 'url';
import path from 'path'; // 修改导入方式
const __dirname = path.dirname(fileURLToPath(import.meta.url)); // 使用 path 的方法
// 根据环境加载对应的配置文件
config({
    path: path.resolve(
        __dirname,
        `.env${process.env.NODE_ENV ? `.${process.env.NODE_ENV}` : ''}`
    )
})
// 判断是否为生产环境
const isProduction = process.env.NODE_ENV === 'production'

// 基础配置
const baseConfig = {
    input: 'src/main.tsx',
    output: {
        file: 'dist/bundle.js',
        format: 'esm',
        sourcemap: true
    },
    plugins: [
        replace({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
            preventAssignment: true
        }),
        babel({
            babelHelpers: 'bundled',
            extensions: ['.js', '.jsx', '.ts', '.tsx'],
            exclude: 'node_modules/**'
        }),
        resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx'] }),
        commonjs(),
        cleandir('dist')
    ]
}

// 开发环境配置
const devConfig = {
    plugins: [
        serve({
            open: true,
            contentBase: [
                path.resolve(__dirname),
                path.resolve(__dirname, 'dist'),
                path.resolve(__dirname, 'public')
            ],
            port: 3000,
            host: 'localhost'
        }),
        livereload({
            watch: 'dist'
        })
    ]
}

// 生产环境配置
const prodConfig = {
    plugins: [
        // 可添加生产环境专用插件
    ]
}

export default isProduction ? 
    { ...baseConfig, plugins: [...baseConfig.plugins, ...prodConfig.plugins] } :
    { ...baseConfig, plugins: [...baseConfig.plugins, ...devConfig.plugins] }

4. pack依赖

json 复制代码

{
  "name": "violet-ui",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV=development rollup -c -w",
    "build": "cross-env NODE_ENV=production rollup -c",
    "lint": "eslint src --ext .ts,.tsx"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.26.10",
    "@babel/preset-env": "^7.26.9",
    "@babel/preset-react": "^7.26.3",
    "@babel/preset-typescript": "^7.27.0",
    "@rollup/plugin-babel": "^6.0.4",
    "@rollup/plugin-commonjs": "^28.0.3",
    "@rollup/plugin-node-resolve": "^16.0.1",
    "@rollup/plugin-replace": "^6.0.2",
    "@rollup/plugin-typescript": "^12.1.2",
    "@types/react": "^19.1.0",
    "@types/react-dom": "^19.1.2",
    "cross-env": "^7.0.3",
    "dotenv": "^16.5.0",
    "rollup": "^4.39.0",
    "rollup-plugin-cleandir": "^3.0.0",
    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-serve": "^3.0.0",
    "typescript": "^5.8.3"
  },
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0"
  }
}

5. babel配置

perl 复制代码

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

四、💥 实战踩坑记录

1. 浏览器报process未定义

解决方案：

bash 复制代码

pnpm add -D @rollup/plugin-replace

javascript 复制代码

import replace from '@rollup/plugin-replace'

plugins: [
  replace({
    'process.env.NODE_ENV': JSON.stringify('development')
  })
]

2. 开发服务器404报错

javascript 复制代码

import serve from 'rollup-plugin-serve'

serve({
  contentBase: ['dist', 'public'], // 🎯 静态资源双保险(路径会有问题！)
  port: 3000
})

五、🚀 开发体验优化

1. 热更新配置

javascript 复制代码

import livereload from 'rollup-plugin-livereload'

livereload({
  watch: 'dist'
})

2. 环境变量黑科技

bash 复制代码

pnpm add -D dotenv cross-env

javascript:/Users/chenhebin/Documents/violet/code/front/openCode/violet-ui/rollup.config.js 复制代码

import { config } from 'dotenv'
config()

六、💡 项目亮点总结

闪电启动速度 ⚡（Rollup天然优势）
完美支持React19新特性 🆕
类型安全护甲 🛡️（TS深度集成）
开发体验爽到飞起 🛫（热更新+错误监控）

结尾彩蛋

"看到这里你已经打败了80%的开发者！欢迎在评论区留下你的实战体验，遇到任何妖魔鬼怪问题，本猿24小时在线捉妖！👾"