Initial Setup

1. npm init

2. create folder src and components

3. create index.js in src

4. npm install --save-dev react react-dom

5. add peerDependencies with react and react-dom in package.json

Story Book

1. npx sb init install storybook

Create Component

1. create file with component name in component folder
2. create index.js file with export * from "./ComponentName"
3. go to index.js file under src with export * from "./components/ComponentName"

Create Story Book Component

1. create a Name.stories.js under stories folder
2. add the following code

import React from 'react';
import {storiesOf} from '@storybook/react';
import {ExampleComponent} from '../components/ExampleComponent';

const stories = storiesOf('App Test', module);

stories.add('App', ()=> {
    return (<ExampleComponent/>)
});

3. run npm run storybook to Dev the component

Roll-up

1. run

npm install rollup rollup-plugin-babel @rollup/plugin-babel @rollup/plugin-node-resolve rollup-plugin-peer-deps-external --save-dev

2. run

npm install --save-dev @babel/preset-react

3. modify the package.json script add

"rollup-plugin-postcss": "^4.0.2"

4. create a rollup.config.js on root folder

import babel from 'rollup-plugin-babel';
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";

export default [
    {
        input: './src/index.js',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
            }
        ],
        plugins: [
            babel({
                exclude: 'node_module/**',
                presets: ['@babel/preset-react']
            }),
            external(),
            resolve(),
        ]
    }
]

5. run

npm install rollup-plugin-postcss

6. update the rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";

export default [
    {
        input: './src/index.js',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
            }
        ],
        plugins: [
            postcss({
                plugins: [],
                minimize: true,
            }),
            babel({
                exclude: 'node_module/**',
                presets: ['@babel/preset-react']
            }),
            external(),
            resolve(),
        ]
    }
]

7. run

npm run build-lib

Minimize the dis by Terser

1. import terser in rollup.config.js

import {terser} from 'rollup-plugin-terser';

2. update the rollup.config.js

import babel from 'rollup-plugin-babel';
import resolve from "@rollup/plugin-node-resolve";
import external from "rollup-plugin-peer-deps-external";
import {terser} from 'rollup-plugin-terser';
import postcss from "rollup-plugin-postcss";

export default [
    {
        input: './src/index.js',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
            }
        ],
        plugins: [
            postcss({
                plugins: [],
                minimize: true,
            }),
            babel({
                exclude: 'node_module/**',
                presets: ['@babel/preset-react']
            }),
            external(),
            resolve(),
            terser(),
        ]
    }
]

Publish the package

1. login the npm ac

npm login

2. update the code with the following code on package.json

  "main": "dist/index.js",
  "module": "dist/index.es.js",

3. publish the lib

npm publish