Rollup-scripts: "An ambitious project for JS/TS libraries"

Sachin Singh — Wed, 14 Jun 2023 06:33:20 +0000

Recently, I started working on a new project called "Rollup Scripts".

More details on the project can be found here: https://github.com/scssyworks/rollup-scripts

The name Rollup Scripts is derived from a very popular bundler named Rollup. It's a collection of scripts which simplifies the task of setting up project source files. Let me explain...

Setting up a project

When starting a new project, the initial setup phase often involves creating a basic folder structure and configuring essential files like rollup.config.js, .babelrc, and .eslintrc.json. These foundational components form the backbone of any JavaScript project.

To illustrate, here's a typical project structure:

<app name>
|
-- src
|   |
|   --index.js
|
-- package.json
|
-- .gitignore
|
-- rollup.config.js
|
-- .eslintrc.json
|
-- .babelrc

Furthermore, numerous dependencies such as rollup, eslint, eslint-plugin-*, @babel/core, @babel/preset-*, @babel/plugin-*, @rollup/plugin-*, and more need to be installed. The list can be quite extensive!

Undoubtedly, the most laborious aspect of this process is the constant iteration required to fine-tune the setup and achieve a satisfactory configuration. This refining process often consumes nearly half of the total time dedicated to building the project.

But what if I told you there's a better way? What if I told you that you have the choice to focus on what truly matters: creating a library?

Introducing `rollup-scripts`

In this guide, I will demonstrate how effortlessly you can set up your own JavaScript library project.

Step 1: Establishing the Folder Structure
Begin by creating a root folder named src and an entry file called index.js. Feel free to use index.mjs, index.ts, or index.mts based on your preference.

Step 2: Installing the Required Dev Dependency
To proceed, install rollup-scripts as the sole dev dependency. It includes everything you need for the setup.

npm i -D --save-exact rollup-scripts

Step 3: Configuring npm Scripts
To streamline your workflow, configure the following npm scripts in your package.json file:

{
  "scripts": {
    "build": "rollup-scripts build",
    "lint": "rollup-scripts lint",
    "init": "rollup-scripts init"
  }
}

package.json

That's it! You're now ready to dive into developing your incredible library without any further setup hassle.

DEV Community: Sachin Singh

Rollup-scripts: "An ambitious project for JS/TS libraries"

Setting up a project

Introducing rollup-scripts

Introducing `rollup-scripts`