DEV Community

Sachin Singh
Sachin Singh

Posted on • Edited on

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

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

package.json

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more