构建现代 React 库入门：综合指南

介绍

创建现代 React 库需要仔细考虑构建工具、开发经验和输出优化。本指南将引导您使用 TypeScript、SWC 和 Rollup 构建专业的 React 库启动器——这是一个强大的组合，可提供卓越的性能、可靠性和开发人员体验。

为什么这些工具很重要

TypeScript：类型安全和开发人员体验

• 静态类型检查：在开发过程中而不是运行时捕获错误

• 增强的 IDE 支持：更好的自动完成、重构和代码导航

• 自文档代码：类型作为活文档

• 改进的维护：使大型代码库更易于管理

• 成长中的社区：流行库的广泛类型定义

SWC：下一代编译

• Rust 驱动的性能：比 Babel 快 20 倍
• 直接替换：与现有的 Babel 配置兼容
• 低内存占用：更高效的资源利用
• 原生 TypeScript 支持：直接编译，无需中间步骤
• 积极开发：定期更新和改进

Rollup：优化的库捆绑

• Tree Shaking：高级死代码消除
• 多种输出格式：ESM、CommonJS 和 UMD 支持
• 更小的捆绑包大小：没有不必要的运行时代码
• 插件生态系统：丰富的官方和社区插件
• 代码分割：高效的块管理

项目设置指南

1. 初始化项目结构

mkdir react-library
cd react-library
npm init -y

# Create essential directories
mkdir src

2.安装依赖项

# Core dependencies
npm install react react-dom --save-peer

# Development dependencies
npm install --save-dev typescript @types/react @types/react-dom \
  @swc/core @swc/helpers \
  rollup @rollup/plugin-swc @rollup/plugin-node-resolve \
  @rollup/plugin-commonjs rollup-plugin-peer-deps-external

3.TypeScript 配置

创建 tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "declaration": true,
    "declarationDir": "dist/types",
    "emitDeclarationOnly": true,
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

4. 汇总配置

创建 rollup.config.js：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { swc, defineRollupSwcOption } from '@rollup/plugin-swc';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import terser from '@rollup/plugin-terser';

const packageJson = require('./package.json');

const swcConfig = defineRollupSwcOption({
  jsc: {
    parser: {
      syntax: 'typescript',
      tsx: true,
    },
    transform: {
      react: {
        runtime: 'automatic',
        development: false,
        refresh: false,
      },
    },
    target: 'es2018',
  },
  minify: false,
});

export default [
  // ESM build
  {
    input: 'src/index.tsx',
    output: [
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
      }),
      commonjs(),
      swc(swcConfig),
      terser(),
    ],
    external: ['react', 'react-dom'],
  },
  // CommonJS build
  {
    input: 'src/index.tsx',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true,
        exports: 'auto',
      },
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        extensions: ['.ts', '.tsx', '.js', '.jsx'],
      }),
      commonjs(),
      swc(swcConfig),
      terser(),
    ],
    external: ['react', 'react-dom'],
  },
];

5.Package.json配置

更新你的 package.json:

{
  "name": "your-library-name",
  "version": "1.0.0",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/types/index.d.ts",
  "files": [
    "dist"
  ],
  "sideEffects": false,
  "scripts": {
    "build": "rollup -c",
    "types": "tsc",
    "prepare": "npm run types && npm run build",
    "lint": "eslint ."
  },
  "peerDependencies": {
    "react": ">=17.0.0 <19.0.0",
    "react-dom": ">=17.0.0 <19.0.0"
  },
}

编写库代码

组件示例

创建 src/index.tsx:

mkdir react-library
cd react-library
npm init -y

# Create essential directories
mkdir src

最佳实践

1. 开发流程

• 使用 Git hooks (husky) 进行预提交 linting 和测试
• 实施语义版本控制
• 设置持续集成/部署

2. 文档

• 包含详细的 README.md
• 提供使用示例
• 记录对等依赖关系

3. 性能

• 保持最小捆绑包大小
• 实施摇树友好的出口
• 尽可能避免运行时依赖

出版

1. 更新 package.json 中的版本
2. 构建库：npm run build
3. 测试构建：npm pack
4. 发布：npm 发布

添加工作示例

设置一个 vite 应用程序来提供示例，并测试存储库本身的代码更改。这也可以通过故事书来完成。

# Core dependencies
npm install react react-dom --save-peer

# Development dependencies
npm install --save-dev typescript @types/react @types/react-dom \
  @swc/core @swc/helpers \
  rollup @rollup/plugin-swc @rollup/plugin-node-resolve \
  @rollup/plugin-commonjs rollup-plugin-peer-deps-external

将您的包添加到示例 package.json 的依赖项部分

{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "declaration": true,
    "declarationDir": "dist/types",
    "emitDeclarationOnly": true,
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

导入您的组件并在示例项目中测试它。

您的 React 库现已准备好发布！ ？

如果您想深入了解即用型设置，请在此处查看完整的入门模板：https://github.com/Abhirup-99/react-library-starter-template。该模板包含我们涵盖的所有内容，旨在帮助您以最少的设置启动 React 库开发。

编码愉快！

以上是构建现代 React 库入门：综合指南的详细内容。更多信息请关注PHP中文网其他相关文章！