Introduction to rollup-plugin-node-resolve

The rollup-plugin-node-resolve is an essential plugin for Rollup that allows you to use modules from the node_modules directory in your bundle. This plugin plays a crucial role in modern JavaScript development by facilitating seamless module resolution for your applications. In this post, we’ll dive deep into its APIs and provide practical examples to help you utilize this plugin effectively.

Getting Started

First, install the plugin via npm or yarn:

npm install @rollup/plugin-node-resolve --save-dev

yarn add @rollup/plugin-node-resolve --dev

Basic Usage

To use the plugin, import it in your rollup.config.js and add it to your plugins array:

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

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

API Details

Custom Module Directories

You can specify custom directories to resolve modules from:

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

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

Extensions

Resolve specific file extensions like .mjs, .js, .jsx, .json, etc.:

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

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

Browser Field

To resolve the browser field in package.json for browser-specific versions of a module:

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

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

Custom Resolvers

Use custom resolvers to manually resolve modules:

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

const myResolver = {
  resolveId(source) {
    if (source === 'custom') {
      return { id: '/path/to/custom.js', external: false };
    }
    return null;
  }
};

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

Practical App Example with rollup-plugin-node-resolve

Let’s create a simple application that uses the plugin to import various modules. We will import lodash, moment.js, and a local module.

// src/main.js
import _ from 'lodash';
import moment from 'moment';
import { myFunction } from './myModule';

console.log(_.join(['Hello', 'world!'], ' '));
console.log(moment().format('MMMM Do YYYY, h:mm:ss a'));
myFunction();

// src/myModule.js
export function myFunction() {
  console.log('This is a local module function');
}

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';

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

The configuration above sets up the plugin to resolve our lodash and moment.js modules from node_modules and also imports a local module to demonstrate how it all ties together.

By following these steps, you can effectively use rollup-plugin-node-resolve to manage module resolution in your Rollup projects, making your development process smoother and more efficient.

Hash: a8466e63b0a9b77be909c51951d1817a6257ab5a3348d992a2d44789bee2e5f8