最新の React ライブラリスターターの構築: 包括的なガイド-jsチュートリアル-php.cn

最新の React ライブラリスターターの構築: 包括的なガイド

Mary-Kate Olsen

リリース： 2024-11-09 22:32:02

オリジナル

158 人が閲覧しました

Building a Modern React Library Starter: A Comprehensive Guide

導入

最新の React ライブラリを作成するには、ビルドツール、開発経験、出力の最適化について慎重に検討する必要があります。このガイドでは、TypeScript、SWC、Rollup を使用してプロフェッショナルな React ライブラリスターターを構築する手順を説明します。これらは、優れたパフォーマンス、信頼性、開発者エクスペリエンスを提供する強力な組み合わせです。

これらのツールが重要な理由

TypeScript: タイプセーフティと開発者エクスペリエンス

静的型チェック: 実行時ではなく開発中にエラーをキャッチします
IDE サポートの強化: オートコンプリート、リファクタリング、コードナビゲーションの向上
自己文書化コード: 型は生きた文書として機能します
メンテナンスの改善: 大規模なコードベースをより管理しやすくします
成長するコミュニティ: 人気のあるライブラリの広範な型定義

SWC: 次世代コンピレーション

Rust を活用したパフォーマンス: Babel より最大 20 倍高速
ドロップイン置換: 既存の Babel 構成と互換性があります
低メモリ使用量: より効率的なリソース使用率
ネイティブ TypeScript サポート: 中間ステップなしの直接コンパイル
アクティブな開発: 定期的な更新と改善

ロールアップ: 最適化されたライブラリバンドル

ツリーシェイク: 高度なデッドコード除去
複数の出力形式: 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 フック (ハスキー) を使用します
セマンティックバージョニングを実装する
継続的インテグレーション/デプロイメントをセットアップする

2. 文書化

詳細な README.md を含めます
使用例を提供します
ピアの依存関係を文書化します

3. パフォーマンス

バンドルのサイズは最小限に抑えてください
ツリーシェイクフレンドリーなエクスポートを実装する
可能な限り実行時の依存関係を回避します

出版

package.json のバージョンを更新します
ライブラリをビルドします: npm run build
ビルドをテストします: npm Pack
パブリッシュ: 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 中国語 Web サイトの他の関連記事を参照してください。