Using rollup to build react library

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "baseUrl": "src",
    // generate types file .d.ts and put it under types folder
    "declaration": true,
    "declarationDir": "./types",
    "sourceMap": true,
  },
  "include": [
    "**/*.ts",
    "**/*.tsx"
  ]
}

package.json

{
  "name": "my_rollup_library",
  "version": "1.2.1",
  // declare the entry point from library
  "main": "dist/index.js",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/headshootcheng/webpack-library.git"
  },
  // only include dist folder when install as a library
  "files": [
    "dist"
  ],
  // declare the library needed from other repo which install the library
  "peerDependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.8.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "scripts": {
    "build": "rollup -c rollup.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.18.5",
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.8.4",
    "@rollup/plugin-commonjs": "^22.0.0",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-typescript": "^8.3.3",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "node-sass": "^7.0.1",
    "postcss": "^8.4.14",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rollup": "^2.75.7",
    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "rollup-plugin-postcss": "^4.0.2",
    "rollup-plugin-sass": "^1.2.12",
    "rollup-plugin-terser": "^7.0.2",
    "sass": "^1.53.0",
    "tslib": "^2.4.0",
    "typescript": "^4.7.4"
  }
}

rollup.config.js

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import { terser } from "rollup-plugin-terser";
import PeerDepsExternalPlugin from "rollup-plugin-peer-deps-external";
import dts from "rollup-plugin-dts";
import postcss from 'rollup-plugin-postcss';
import packageJson from "./package.json";

export default [
    {
        input: "src/index.ts",
        output: {
                file:  packageJson.main,
                format: "cjs",
                sourcemap: true
            },
        plugins: [
            // help to find the library from node_modules
            resolve(),
            // support cjs syntax
            commonjs(),
            // support typescript
            typescript({ tsconfig: "./tsconfig.json" }),
            // reduce the bundle size
            terser(),
            // put the all the peer-dependencies into externals automatically
            PeerDepsExternalPlugin(),
            // support sass
            postcss({
                extract: false,
                modules: true,
                use: ['sass'],
            }),
        ],
    },
    // put it from types folder to index directory
    {
        input: "dist/types/index.d.ts",
        output: [{ file: "dist/index.d.ts", format: "esm" }],
        // allow to bundle my type file
        plugins: [dts()]
    }
];

• Personally, i think rollup is more suitable to build a library instead of webpack, as its related library is popular, the required customization is smaller and more developer-friendly, but also easier to build different version of js

https://github.com/headshootcheng/rollup-librarygithub.com