- 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
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.
Create Your Component File
- YourComponentStyle.css
.YourComponent {
display: flex;
max-width: 100px;
}
- YourComponent.js
.YourComponentImg {
display: flex;
max-width: 100px;
}
- YourComponentImg.jpg
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'
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'