Steps to Integrate Rollup in Your React APP
What is Rollup?
Rollup in simple terms is a module bundler that allows you to build your own applications in a clean and efficient way. With Rollup, you can bundle your code into small, optimized packages that can be easily distributed to your users. In this tutorial, we’ll walk you through the steps to build your own app using Rollup.
#1 Setup Your Project
The first step in building an app with Rollup is to set up the project. Start by creating a new folder for your project and navigating to it in the terminal. Now here we have multiple options either you can create React using Create React App or using Vite.
Once you’re in the project directory, run the following command to initialize the package.json file:-
This will create a new package.json file for your project.
#2 Configure The Package.Json File
you need to configure the package.json file to work with Rollup. Start by adding the following commands.
** type
This tells Node.js that you’re using ECMAScript modules.
** main
This field points to the location where your code will be compiled. You can choose any location you want, but we’ll be using the “dist” folder in this tutorial.
** files
This specifies which files you want to publish to npm, if you want to publish your React hooks and components to reuse in another app. It’s optional so you can skip it if you don’t want to publish it.
** scripts
This specifies different sets of commands to perform different actions on the app like start, build, test etc. In our case, we have added a command for build action.
#3 Install The Required Packages
It’s time to install the required packages for your app so that we can configure Rollup. Rollup uses so many plugins which we can use to build our own app. Run the following command to install the necessary packages as dev-dependencies.
npm i –save-dev rollup, rollup-plugin-postcss, @rollup-plugin-terser, terser, @rollup/plugin-node-resolve, @rollup/plugin-json, @rollup/plugin-commons, @rollup/plugin-babel
#4 Install Babel And React Packages
* What is Babel?
Babel is a JavaScript transpiler that converts modern JavaScript code (written in ES6, ES7, etc.) into backward-compatible versions of JavaScript that can run in older environments (such as older browsers or Node.js versions). so We’ll use it to transpile our code so we can use it in any environment.
npm i –save-dev react, react-dom, @babel/cli, @babel/core, @babel/preset-react
Here, we installed React and React-Dom so that we can build components and hooks which we can publish to NPM.
#5 Configure The Rollup Config File
Create a new file called “rollup.config.js” in the root directory of your project. This file will contain all the configuration options for Rollup. Here’s an example of what the file might look like
refer to the Rollup official site to check out other available config options.
** input
This requires a set of file paths for which you need to create a build chunk.
** entryFileNames
With this option, you can customize your build folder structure. We are using “[name]/index.js” so it will create a separate folder for each entry name and place the corresponding index-js under that folder.
** dir
It takes the name of the build folder where all build chunks will be stored after the completion of the application build.
** format
Define a format in which you want to build your code. There are a few inbuilt options like, “esm”, “cjs”, “umd”.
** sourcemap
It will be false for production & for development, we can keep it to true as it’ll build that source map of code which will help to debug build code easily.
** external
Define packages that you don’t want to bundle in build chunks.
#6 Create “.Babelrc” File In Your Project Root Directory
The “.babelrc” file contains the configuration for Babel, Here we will give some preset rules to Babel as our project is built on React, so we have to set up rules for React so that Babel can compile our code accordingly.
Add the following code to your “.babelrc” file:
#7 Build The Project
Run: “npm run rollup”
This will generate a “dist” folder containing our code, as we have configured Rollup to do so. and This is how you can build your react app using Rollup which will run in all environments.
#8 Create “.Npmignore” File In Your Project Root Directory
If you want to publish your app to NPM you can add “.npmignore” file. Just like “.gitignore”, the “.npmignore” file allows you to define which files/folders should not be published to NPM. This is particularly useful for files like documentation or test files that are not needed in the published package.
Create a new file named “.npmignore” in your project root directory and add the following lines:
This will prevent the “node_modules” folder, log files, “.gitignore”, “.babelrc” and the “src” folder from being published to NPM. As we don’t need packages to push on npm we just wanna move our build folder which is in the dist folder.
# 9 Publish Your Package To NPM
After running the npm login. You will be prompted to enter your NPM credentials. Once you have successfully logged in, you can run the npm publish command after that your package will be published to NPM.
Congratulations! You Have Successfully Built And Published Your Own App Using Rollup.
In conclusion, using Rollup to build your own app can be a great way to bundle your code for production. By following the steps outlined above, you can create a project structure, install the necessary packages, and configure Rollup to bundle your code in the desired format. Additionally, using Babel to compile your code can help ensure that it is compatible with older browsers. Once your code is bundled, you can use npm to publish it and share it with others. By leveraging the power of Rollup and other tools, you can create high-quality apps that are optimized for performance and compatibility.
Leave a Reply