What is @rollup/plugin-inject?
@rollup/plugin-inject is a Rollup plugin that allows you to automatically inject variables or modules into your bundle. This can be useful for polyfilling global variables, injecting dependencies, or providing shims for certain environments.
What are @rollup/plugin-inject's main functionalities?
Injecting Global Variables
This feature allows you to inject global variables into your bundle. In this example, the `$` variable is automatically injected and mapped to the `jquery` module.
const inject = require('@rollup/plugin-inject');
module.exports = {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife'
},
plugins: [
inject({
$: 'jquery'
})
]
};
Injecting Multiple Variables
This feature allows you to inject multiple variables into your bundle. In this example, both `$` and `_` are injected and mapped to `jquery` and `lodash` respectively.
const inject = require('@rollup/plugin-inject');
module.exports = {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife'
},
plugins: [
inject({
$: 'jquery',
_: 'lodash'
})
]
};
Injecting Custom Code
This feature allows you to inject custom code or modules into your bundle. In this example, `customVar` is injected and mapped to `src/customModule.js`.
const inject = require('@rollup/plugin-inject');
module.exports = {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'iife'
},
plugins: [
inject({
include: '**/*.js',
exclude: 'node_modules/**',
modules: {
customVar: 'src/customModule.js'
}
})
]
};
Other packages similar to @rollup/plugin-inject
babel-plugin-transform-define
babel-plugin-transform-define is a Babel plugin that allows you to inject global constants into your code. It is similar to @rollup/plugin-inject but is used within the Babel ecosystem. It is useful for defining environment variables and other constants at build time.
browserify-global-shim
browserify-global-shim is a Browserify plugin that allows you to replace global variables with require calls. It is similar to @rollup/plugin-inject but is used within the Browserify ecosystem. It is useful for shimming global variables and providing polyfills.

@rollup/plugin-inject
🍣 A Rollup plugin which scans modules for global variables and injects import
statements where necessary.
Requirements
This plugin requires an LTS Node version (v14.0.0+) and Rollup v1.20.0+.
Install
Using npm:
npm install @rollup/plugin-inject --save-dev
Usage
Create a rollup.config.js
configuration file and import the plugin:
import inject from '@rollup/plugin-inject';
export default {
input: 'src/index.js',
output: {
dir: 'output',
format: 'cjs'
},
plugins: [
inject({
Promise: ['es6-promise', 'Promise']
})
]
};
Then call rollup
either via the CLI or the API.
This configuration above will scan all your files for global Promise usage and plugin will add import to desired module (import { Promise } from 'es6-promise'
in this case).
Examples:
{
Promise: [ 'es6-promise', 'Promise' ],
P: [ 'es6-promise', 'Promise' ],
$: 'jquery',
fs: [ 'fs', '*' ],
'Object.assign': path.resolve( 'src/helpers/object-assign.js' ),
}
Typically, @rollup/plugin-inject
should be placed in plugins
before other plugins so that they may apply optimizations, such as dead code removal.
Options
In addition to the properties and values specified for injecting, users may also specify the options below.
exclude
Type: String
| Array[...String]
Default: null
A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.
include
Type: String
| Array[...String]
Default: null
A picomatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default all files are targeted.
Meta
CONTRIBUTING
LICENSE (MIT)