Introduction to rollup-plugin-node-resolve

The rollup-plugin-node-resolve plugin is a powerful tool for anyone using the Rollup module bundler for their JavaScript applications. It allows the bundler to find and include modules located in the node_modules directory, effectively enabling the use of third-party libraries, Node.js built-in modules, and local JavaScript files. In this guide, we will walk you through its APIs and provide multiple examples to showcase its capabilities.

Installation

First, install rollup-plugin-node-resolve via npm or yarn:

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

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

Usage

To use the plugin, add it to your Rollup configuration file:

  
    import { nodeResolve } from '@rollup/plugin-node-resolve';

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

API Explanations

mainFields

Determines which fields in a package.json should be used to find the entry point of a module.

  
    // Default value: ['module', 'main']
    nodeResolve({
      mainFields: ['browser']
    });
  

extensions

Specifies the file extensions that the plugin should look for when resolving modules.

  
    // Default value: ['.js', '.json', '.node']
    nodeResolve({
      extensions: ['.js', '.jsx']
    });
  

preferBuiltins

Controls whether Rollup should prefer built-in modules (e.g., fs, path) or local ones.

  
    // Default value: true
    nodeResolve({
      preferBuiltins: false
    });
  

browser

This option replaces node-specific modules with browser-compatible versions.

  
    // Default value: false
    nodeResolve({
      browser: true
    });
  

dedupe

Prevents multiple instances of the same package in a bundle by specifying packages to deduplicate.

  
    nodeResolve({
      dedupe: ['react', 'react-dom']
    });
  

App Example

Let’s demonstrate an example where we use rollup-plugin-node-resolve to bundle a simple application that uses the moment library.

  
    // rollup.config.js
    import { nodeResolve } from '@rollup/plugin-node-resolve';
    import commonjs from '@rollup/plugin-commonjs';

    export default {
      input: 'src/index.js',
      output: {
        file: 'bundle.js',
        format: 'iife',
        name: 'MyApp'
      },
      plugins: [
        nodeResolve(),
        commonjs()
      ]
    };
  

  
    // src/index.js
    import moment from 'moment';

    const start = moment();
    console.log(`App started at ${start.format('LLLL')}`);
  

This setup utilizes rollup-plugin-node-resolve to find and include the moment library, allowing you to use it seamlessly in your project. The commonjs plugin is used to convert CommonJS modules to ES6, which helps in further compatibility.

By using rollup-plugin-node-resolve, you can leverage a rich ecosystem of packages and seamlessly bundle them into your JavaScript applications.

Hash: a8466e63b0a9b77be909c51951d1817a6257ab5a3348d992a2d44789bee2e5f8