How to Manage Dependencies in Rollup: A Simple Guide

If you enjoy this story about climbing ladders and picking apples, feel free to give it a like or share.

---

I found myself standing at the base of a towering apple tree, ready to harvest its bounty. But first, I needed to climb. The ladder I had was sturdy, but it was missing a few key rungs, much like my Rollup project that needed its dependencies managed carefully.

As I placed the first rung on the ladder, it reminded me of the core dependency in my project—a fundamental package that everything else relied on. Without it, I couldn’t even start climbing, just as my project couldn’t run without its essential modules.

With each step up, I added another rung, representing the carefully chosen plugins and packages in my Rollup configuration. Some rungs needed to be lighter, like those packages I marked as external, ensuring my bundle wasn’t burdened with unnecessary weight. Others required a firm grip, akin to internal dependencies that needed to be tightly integrated.

I reached a point where the ladder wobbled slightly. That’s when I remembered to check the peer dependencies, ensuring that everything was compatible and stable, so I wouldn’t topple over mid-climb. It was a balancing act, much like ensuring compatibility in my project’s package.json file.

As I neared the top, I spotted a few apples that were out of reach. They symbolized optional dependencies—nice to have but not essential for my climb. I made a mental note to come back for them later, ensuring my focus remained on the task at hand.

Finally, at the top of the ladder, I reached for the juiciest apples. My ascent was smooth because I had taken the time to build a reliable path upward, just as I had crafted a seamless build process in my Rollup project. Each apple I picked was a module that worked harmoniously with the others, contributing to a fruitful harvest of clean, efficient code.

---

1. Core Dependencies:

Just like the first rung of the ladder, I started by identifying the core dependencies in my package.json. These are essential for my project to function.

{
  "dependencies": {
    "lodash": "^4.17.21",
    "axios": "^0.21.1"
  }
}

2. Marking Externals:

Certain “rungs” needed to be marked as external to keep my bundle lightweight. This is akin to leaving some apples on the tree for another day, ensuring my basket isn’t overloaded.

// rollup.config.js
export default {
  input: 'src/main.js',
  external: ['lodash', 'axios'],
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

3. Plugins for Support:

I used Rollup plugins to add support and functionality, much like the additional rungs on my ladder that made the climb possible.

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/main.js',
  plugins: [resolve(), commonjs()],
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

4. Managing Peer and Optional Dependencies:

I carefully handled peer dependencies by ensuring they were installed in the project environment, preventing any wobbles in my build process. Optional dependencies were noted but not immediately necessary.

{
  "peerDependencies": {
    "react": "^17.0.0"
  },
  "optionalDependencies": {
    "fsevents": "^2.3.2"
  }
}

Key Takeaways:

• Planning is Essential: Just like climbing a ladder, managing dependencies requires careful planning to ensure a stable build environment.
• Use External and Internal Wisely: Marking modules as external when they are already available in the runtime environment can significantly reduce bundle size.
• Leverage Plugins: Plugins in Rollup can extend functionality much like additional rungs on a ladder, aiding in a smoother build process.
• Compatibility Checks: Always ensure that peer dependencies are compatible and correctly installed to prevent build issues.