React Typescript library

steps.md

1. Create an empty directory and cd into it

• $ mkdir your-component-library && cd your-component-library

2. Initialize yarn

• $ yarn init

3. Initialize eslint

• $ eslint --init # OR "npx eslint --init" if eslint isn't installed globally on your machine

4. Initialize typescript: create tsconfig.json file with the following content:

  {                                             
    "compilerOptions": {
      "declaration": true,
      "declarationDir": "./dist",               
      "forceConsistentCasingInFileNames": true,
      "noImplicitAny": true,
      "jsx": "react-jsx",
      "lib": ["es5", "dom"],
      "module": "esnext",
      "moduleResolution": "node",
      "outDir": "./dist",
      "strict": true,
      "target": "es5"
    },
    "include": ["src/**/*.tsx"],
    "exclude": ["node_modules"]
  }

5. Initialize git

• $ git init
• 5.1. Optional: Intialize Commitizen
  • $ npx commitizen init cz-conventional-changelog --yarn --dev --exact

6. Install dependencies

• $ yarn add --peer react react-dom; yarn add -D typescript @types/react @types/node @types/react-dom rollup rollup-plugin-typescript2 rollup-plugin-terser rimraf mkdirp concurrently

7. Update package.json

{
  "main": "dist/index.js",
  "module": "dist/index.es.js",
  "jsnext:module": "dist/index.es.js",
  "types": "dist/index.d.js",
  "files": ["dist"],
  "scripts": {
     "build": "rimraf dist; mkdirp rimraf; rollup -c",
     "build:dev": "rollup -c -w"
  },
}

8. Create rollup.config.js

import typescript from "rollup-plugin-typescript2";
import { terser } from "rollup-plugin-terser";

import pkg from "./package.json";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: pkg.main,
      format: "cjs",
    },
    {
      file: pkg.module,
      format: "es",
    },
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  plugins: [typescript(), terser()],
};