spa-side-bar v0.6.0

React Module Seperate Method

The moule Part

Features

• Component Driven Development
• Modular Architecture
• Create Module with CSS and Image and generate a compiled library distribute file
• Local and npm support
• Customization

We will be Using

• React(TypeScript)
• Rollup
• babel

Installation

Install the dependencies and devDependencies and start the server.

npx create-react-app YourProjectName
git init

Run this command to install rollup and all the plugins we require to bundle our package. Here is a brief description of what each plugin does:

• rollup-plugin-babel: This integrates rollup with babel.
• @rollup/plugin-commonjs: Converts any commonjs module to ES6.
• @rollup/plugin-node-resolve: Locates third party modules in node_modules
• @rollup/plugin-image:Imports your images and svg icons.
• rollup-plugin-peer-deps-external: Externalize dependencies in a rollup bundle. This is automatic for peerDependencies.
• rollup-plugin-postcss: Transforms styles with js plugins. You need this if your package contains styles
• rollup-plugin-visualizer: Visualize and analyze your Rollup bundle to see which modules are taking up space.

npm i -D rollup rollup-plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-image rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-visualizer

Run this to install babel and the babel plugins needed for your compilation

npm i -D @babel/cli @babel/core @babel/preset-env @babel/preset-react

Modify Package.Json

{
...
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
},
dependencies{
    empty 
}, 
"peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0"
  },
 "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@rollup/plugin-commonjs": "^11.0.2",
    "@rollup/plugin-image": "^2.0.4",
    "@rollup/plugin-node-resolve": "^7.1.1",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-scripts": "3.4.0",
    "rollup": "^2.0.6",
    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-peer-deps-external": "^2.2.2",
    "rollup-plugin-postcss": "^2.4.1",
    "rollup-plugin-visualizer": "^3.3.1"
  }

"files": [ "dist/*" ]

Create A rollup.config.js file

import babel from 'rollup-plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import resolve from '@rollup/plugin-node-resolve';
import image from '@rollup/plugin-image'
import visualizer from 'rollup-plugin-visualizer';
import pkg from './package.json';

export default {
  input: './src/lib/Dog.js',
  output: [
    {
      file: pkg.main,
      format: 'cjs'
    },
    {
      file: pkg.module,
      format: 'esm'
    }
  ],
  plugins: [
    external(),
    postcss(),
    babel({
      exclude: 'node_modules/**'
    }),
    resolve(),
    commonjs(),
    image(),
    visualizer()
  ]
};

• input: The entry point to the component you want to bundle. In this article, I am pointing directly to Dog.js but it is common to find projects where a main file like index.js file is created to export the component(s)

• output: This specifies the directory where you want to save the bundled library. With rollup, you can specify an array of multiple outputs in different formats and directories. We are importing the output paths from package.json

• plugins: This specifies all the plugins you wish to use and their respective configurations. You can look up documentation on each plugin if there is a need to configure them differently.

Your Component

Create Your Component File

• YourComponentStyle.css

.YourComponent {
  display: flex;
  max-width: 100px;
}

• YourComponent.js

.YourComponentImg {
  display: flex;
  max-width: 100px;
}

• YourComponentImg.jpg

Usage

create Module bundle

rollup -c

Create a local linking to the bundle

npm link
npm link your-package-name

After that, you should be able to use the library locally by

import YourComponent from 'your-package-name'

Publish to npm

create a .npmignore file

src
rollup.*
.babelrc
.eslintrc
stats.html

npm login
npm publish

After that, you should be able to use the library anywhere by

npm install <package-name>

and import to the code

import YourComponent from '@yourGithubName/your-package-name'