Home >Web Front-end >JS Tutorial >Building a Modern React Library Starter: A Comprehensive Guide
Creating a modern React library requires careful consideration of build tools, development experience, and output optimization. This guide will walk you through building a professional React library starter using TypeScript, SWC, and Rollup—a powerful combination that offers superior performance, reliability, and developer experience.
Static Type Checking: Catch errors during development rather than runtime
Enhanced IDE Support: Better autocomplete, refactoring, and code navigation
Self-Documenting Code: Types serve as living documentation
Improved Maintenance: Makes large codebases more manageable
Growing Community: Extensive type definitions for popular libraries
mkdir react-library cd react-library npm init -y # Create essential directories mkdir src
# 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
Create 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"] }
Create 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'], }, ];
Update your 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" }, }
Create src/index.tsx:
mkdir react-library cd react-library npm init -y # Create essential directories mkdir src
Setup a vite app for providing example, and testing code changes in the repo itself. This can also be done with a storybook.
# 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
add your package in the dependencies section of the example 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"] }
Import your component and test it in the example project.
Your React library is now ready for publishing! ?
If you’d like to dive in with a ready-to-use setup, check out the complete starter template here: https://github.com/Abhirup-99/react-library-starter-template. This template includes everything we’ve covered and is designed to help you kickstart your React library development with minimal setup.
Happy coding!
The above is the detailed content of Building a Modern React Library Starter: A Comprehensive Guide. For more information, please follow other related articles on the PHP Chinese website!