configuration file structure analysis and core options

The core structure of a Rollup configuration file consists of several components, including input, output, plugins, resolve, and external. These elements collectively define the rules for the build process to ensure code is bundled correctly.

1. input

The input specifies the starting point of source code, typically a string or an array pointing to files or directories that need processing. For example:

input: 'src/index.js'

To handle multiple files, you can use an array:

input: ['src/index.js', 'src/utils.js']

2. output

The output defines the path and format of the bundled output. Common formats include browser (for browser environments) and bundle (for standalone files), among others. For example:

output: {
  file: 'dist/bundle.js',
  format: 'browser'
}

To generate multiple outputs, you can use an array:

output: [
  { file: 'dist/bundle.js', format: 'browser' },
  { file: 'dist/bundle.min.js', format: 'esm' }
]

3. plugins

The plugins section is used to extend Rollup's functionality by customizing the build logic through plugins. For example:

plugins: [
  // Custom plugin definition
  {
    name: 'custom-plugin',
    options: {
      // Plugin configuration options
    }
  }
]

Plugins can inherit from base plugins using extends to achieve reusability.

4. resolve

The resolve controls the rules for resolving module paths, supporting relative paths and aliases. For example:

resolve: {
  alias: {
    '@': './src'
  }
}

For dynamic imports, you can use the import() function via this configuration:

resolve: {
  fullyDynamic: true
}

5. external

The external is used to declare dependencies that should not be bundled, typically for third-party libraries. For example:

external: ['lodash', 'react']

To dynamically exclude modules, you can use the exclude field:

external: {
  exclude: ['lodash']
}

Core Options Explained in Detail

1. input

• Type: String or Array
• Function: Specifies source code files or directories to be processed
• Example: input: 'src/index.js'

2. output

• Type: Object or Array
• Function: Defines the path and format of the bundled output
• Example: output: { file: 'dist/bundle.js', format: 'browser' }

3. plugins

• Type: Array
• Function: Extends Rollup functionality by customizing build logic through plugins
• Example: plugins: [ { name: 'custom-plugin' } ]

4. resolve

• Type: Object
• Function: Controls module path resolution rules, supporting aliases and dynamic imports
• Example: resolve: { alias: { '@': './src' } }

5. external

• Type: Array or Object
• Function: Declares dependencies that should not be bundled, typically for third-party libraries
• Example: external: ['lodash', 'react']

Usage Example of Configuration Files

{
  "input": "src/index.js",
  "output": {
    "file": "dist/bundle.js",
    "format": "browser"
  },
  "plugins": [
    {
      "name": "custom-plugin",
      "options": {
        "exclude": ["node_modules"]
      }
    }
  ],
  "resolve": {
    "alias": {
      "@": "src"
    }
  },
  "external": ["lodash", "react"]
}

This configuration file defines the process of bundling from src/index.js to dist/bundle.js, optimizing the build process through plugins and resolution rules.