최신 React 라이브러리 스타터 구축: 종합 가이드-JS 튜토리얼-php.cn

Building a Modern React Library Starter: A Comprehensive Guide

소개

최신 React 라이브러리를 만들려면 빌드 도구, 개발 경험 및 출력 최적화를 신중하게 고려해야 합니다. 이 가이드는 뛰어난 성능, 안정성 및 개발자 경험을 제공하는 강력한 조합인 TypeScript, SWC 및 Rollup을 사용하여 전문적인 React 라이브러리 스타터를 구축하는 과정을 안내합니다.

이러한 도구가 중요한 이유

TypeScript: 유형 안전 및 개발자 경험

정적 유형 검사: 런타임이 아닌 개발 중에 오류를 포착
향상된 IDE 지원: 향상된 자동 완성, 리팩터링 및 코드 탐색
자체 문서화 코드: 유형은 살아있는 문서 역할을 합니다
개선된 유지 관리: 대규모 코드베이스를 더욱 쉽게 관리할 수 있습니다
커뮤니티 성장: 인기 있는 라이브러리에 대한 광범위한 유형 정의

SWC: 차세대 컴파일

Rust 기반 성능: Babel보다 최대 20배 빠릅니다
드롭인 교체: 기존 Babel 구성과 호환
낮은 메모리 공간: 보다 효율적인 리소스 활용
네이티브 TypeScript 지원: 중간 단계 없이 직접 컴파일
적극적인 개발: 정기적인 업데이트 및 개선

롤업: 최적화된 라이브러리 번들링

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. 타입스크립트 구성

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!