# Using rollup to build react library

{% code title="tsconfig.json" %}

```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"
  ]
}
```

{% endcode %}

{% code title="package.json" %}

```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"
  }
}
```

{% endcode %}

{% code title="rollup.config.js" %}

```javascript
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()]
    }
];
```

{% endcode %}

* 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

{% embed url="<https://github.com/headshootcheng/rollup-library>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://petercheng7788.gitbook.io/developer-note/frontend/web-bundling-and-micro-frontend/using-rollup-to-build-react-library.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.