介紹

建立現(xiàn)代 React 函式庫(kù)需要仔細(xì)考慮建置工具、開發(fā)經(jīng)驗(yàn)和輸出最佳化。本指南將引導(dǎo)您使用 TypeScript、SWC 和 Rollup 建立專業(yè)的 React 庫(kù)啟動(dòng)器——這是一個(gè)強(qiáng)大的組合，可提供卓越的效能、可靠性和開發(fā)人員體驗(yàn)。

為什麼這些工具很重要

TypeScript：類型安全性和開發(fā)人員體驗(yàn)

• 靜態(tài)類型檢查：在開發(fā)過程中而不是運(yùn)行時(shí)捕獲錯(cuò)誤

• 增強(qiáng)的 IDE 支援：更好的自動(dòng)完成、重構(gòu)和程式碼導(dǎo)航

• 自文檔代碼：類型作為活文檔

• 改進(jìn)的維護(hù)：讓大型程式碼庫(kù)更容易管理

• 成長(zhǎng)中的社群：流行庫(kù)的廣泛類型定義

SWC：下一代編譯

• Rust 驅(qū)動(dòng)的效能：比 Babel 快 20 倍
• 直接替換：與現(xiàn)有的 Babel 配置相容
• 低記憶體佔(zhàn)用：更有效率的資源利用
• 原生 TypeScript 支援：直接編譯，無(wú)需中間步驟
• 積極開發(fā)：定期更新與改進(jìn)

Rollup：優(yōu)化的庫(kù)捆綁

• Tree Shaking：高階死碼消除
• 多種輸出格式：ESM、CommonJS 和 UMD 支援
• 更小的捆綁包大小：沒有不必要的運(yùn)行時(shí)代碼
• 外掛程式生態(tài)系統(tǒng)：豐富的官方和社群外掛程式
• 程式碼分割：高效率的區(qū)塊管理

項(xiàng)目設(shè)定指南

1. 初始化項(xiàng)目結(jié)構(gòu)

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

# Create essential directories
mkdir src

2.安裝依賴項(xiàng)

# 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"
  },
}

編寫庫(kù)程式碼

組件範(fàn)例

建立 src/index.tsx:

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

# Create essential directories
mkdir src

最佳實(shí)踐

1. 開發(fā)流程

• 使用 Git hooks (husky) 進(jìn)行預(yù)先提交 linting 和測(cè)試
• 實(shí)作語(yǔ)意版本控制
• 設(shè)定持續(xù)整合/部署

2. 文件

• 包含詳細(xì)的 README.md
• 提供使用範(fàn)例
• 記錄對(duì)等依賴關(guān)係

3. 性能

• 保持最小捆綁包大小
• 實(shí)施搖樹友善的出口
• 盡可能避免運(yùn)作時(shí)依賴

出版

1. 更新 package.json 中的版本
2. 建置庫(kù)：npm run build
3. 測(cè)試建置：npm pack
4. 發(fā)布：npm 發(fā)布

新增工作範(fàn)例

設(shè)定一個(gè) vite 應(yīng)用程式來(lái)提供範(fàn)例，並測(cè)試儲(chǔ)存庫(kù)本身的程式碼變更。這也可以透過故事書來(lái)完成。

# 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

將您的套件加入到範(fàn)例 package.json 的依賴項(xiàng)部分

{
  "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"]
}

匯入您的元件並在範(fàn)例專案中測(cè)試它。

您的 React 庫(kù)現(xiàn)已準(zhǔn)備好發(fā)布！ ？

如果您想深入了解即用型設(shè)置，請(qǐng)?jiān)诖颂幉榭赐暾娜腴T模板：https://github.com/Abhirup-99/react-library-starter-template。此範(fàn)本包含我們涵蓋的所有內(nèi)容，旨在協(xié)助您以最少的設(shè)定啟動(dòng) React 庫(kù)開發(fā)。

編碼愉快！

以上是建立現(xiàn)代 React 庫(kù)入門：綜合指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！