npm init
npm install react react-dom
npm i react-scripts
npm install --save-dev typescript @types/react @types/react-dom
Package.json
{ "name": "wizard-tsup", "version": "1.0.0", "description": "wizard tsup", "main": "index.js", "scripts": { "start": "react-scripts start", "build": "react-scripts build" }, "author": "", "license": "ISC", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1" }, "devDependencies": { "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", "typescript": "^4.9.5" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
tsconfig.json
{ "compilerOptions": { "target": "ES5" , "module": "ESNext" , "moduleResolution": "node" , "lib": [ "DOM", "ESNext" ] , "jsx": "react-jsx" , "noEmit": true , "isolatedModules": true , "esModuleInterop": true , "strict": true , "skipLibCheck": true , "forceConsistentCasingInFileNames": true , "resolveJsonModule": true }, "include": [ "src/**/*" ] }
Public and src folder
Package.json
{ "name": "wizard-tsup", "version": "1.0.0", "description": "wizard tsup", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", "types": "dist/types.d.ts", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "build:rollup": "rollup -c --bundleConfigAsCjs" }, "author": "", "license": "ISC", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1" }, "devDependencies": { "@rollup/plugin-commonjs": "^24.1.0", "@rollup/plugin-node-resolve": "^15.0.2", "@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-typescript": "^11.1.0", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", "rollup": "^3.29.4", "rollup-plugin-dts": "^5.3.0", "rollup-plugin-peer-deps-external": "^2.2.4", "typescript": "^4.9.5" }, "peerDependencies": { "react": "^18.2.0", "react-dom": "18.2.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
rollup.config.mjs
import resolve from "@rollup/plugin-node-resolve"; import commonjs from "@rollup/plugin-commonjs"; import typescript from "@rollup/plugin-typescript"; import dts from "rollup-plugin-dts"; import terser from "@rollup/plugin-terser"; import peerDepsExternal from "rollup-plugin-peer-deps-external";
const packageJson = require("./package.json");
export default [ { input: "src/index.ts", output: [ { file: packageJson.main, format: "cjs", sourcemap: true, }, { file: packageJson.module, format: "esm", sourcemap: true, }, ], plugins: [ peerDepsExternal(), resolve(), commonjs(), typescript({ tsconfig: "./tsconfig.json" }), terser(), ], external: ["react", "react-dom", "styled-components"], }, { input: "src/index.ts", output: [{ file: "dist/types.d.ts", format: "es" }], plugins: [dts.default()], }, ];
tsconfig.json
{ "compilerOptions": { "target": "ES5", "module": "ESNext", "moduleResolution": "node", "lib": ["DOM", "ESNext"], "jsx": "react-jsx", "isolatedModules": true, "esModuleInterop": true, "strict": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "declaration": true, "declarationDir": "types", "sourceMap": true, "outDir": "dist", "emitDeclarationOnly": true, "allowSyntheticDefaultImports": true }, "include": ["src//*"], "exclude": [ "dist", "node_modules", "src//.test.tsx", "src/**/.stories.tsx" ] }
npm install tsup --save-dev
Package.json
{ "name": "wizard-tsup", "version": "1.0.0", "description": "wizard tsup", "main": "index.tsx", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "build:tsup": "tsup" }, "author": "", "license": "ISC", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1" }, "devDependencies": { "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", "tsup": "^8.0.1", "typescript": "^4.9.5" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
tsconfig.json
{ "compilerOptions": { "target": "ES2022", "module": "CommonJS", "moduleResolution": "node", "lib": ["DOM", "ESNext"], "jsx": "react-jsx", "noEmit": true, "isolatedModules": true, "esModuleInterop": true, "strict": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "noImplicitAny": true, "strictNullChecks": true, "declaration": true, "outDir": "dist" }, "include": ["src/**/*"], "exclude": ["node_modules"] }
tsup.config.ts
import { defineConfig } from 'tsup'
export default defineConfig({ format:['cjs','esm'], entry:['./src/main.ts'], dts:true, shims:true, skipNodeModulesBundle: true, clean:true })