https://github.com/jacksteamdev/rollup-plugin-bundle-imports
Bundle imports separately and use the result in your code.
https://github.com/jacksteamdev/rollup-plugin-bundle-imports
bundle chrome-extensions esmodules import rollup-js rollup-plugin
Last synced: 9 months ago
JSON representation
Bundle imports separately and use the result in your code.
- Host: GitHub
- URL: https://github.com/jacksteamdev/rollup-plugin-bundle-imports
- Owner: jacksteamdev
- License: mit
- Created: 2019-03-27T00:14:21.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:36:13.000Z (about 3 years ago)
- Last Synced: 2025-04-25T13:55:57.143Z (10 months ago)
- Topics: bundle, chrome-extensions, esmodules, import, rollup-js, rollup-plugin
- Language: JavaScript
- Homepage:
- Size: 1.02 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
rollup-plugin-bundle-imports
[](https://www.npmjs.com/package/${}/rollup-plugin-bundle-imports)
[](https://github.com/bumble-org/rollup-plugin-bundle-imports)
[](/LICENSE)
[](#typescript)
[](https://www.fiverr.com/jacksteam)
[](https://ko-fi.com/K3K1QNTF)
---
Bundle imports separately and use the result as [a file path](#usage-sw) or [a string of code](https://github.com/bumble-org/rollup-plugin-bundle-imports#usage-script). Tested to work [recursively](https://github.com/bumble-org/rollup-plugin-bundle-imports#usage-recursive) or as multiple plugin instances with different options.
If you are coming here from [`rollup-plugin-code-string`](https://www.npmjs.com/package/rollup-plugin-code-string), the API has become more robust, [but the defaults will work the same!](https://github.com/bumble-org/rollup-plugin-bundle-imports#options-defaults)
## Table of Contents
- [Getting Started](#getting_started)
- [Usage](#usage)
- [Bundle A Service Worker](#usage-sw)
- [Bundle A Chrome Extension Content Script](#usage-script)
- [Recursive Usage](#usage-recursive)
- [Import As Both Code and Paths](#usage-import-as-both)
- [Features](#features)
- [Works With TypeScript](#typescript)
- [Options API](#options-api)
This is a Rollup plugin, so your project will need to be up and running with [Rollup](https://rollupjs.org/guide/en/).
### Installation
```sh
$ npm i rollup-plugin-bundle-imports -D
```
```js
// rollup.config.js
import { bundleImports } from 'rollup-plugin-bundle-imports'
export default {
input: 'index.js',
output: {
file: 'dist/bundle-esm.js',
format: 'esm',
}
plugins: [bundleImports()],
}
```
Default is to import a module that ends in `.code.js` as a string.
```js
import code from './script.code.js'
```
Use `options.importAs` to bundle an imported module and emit it as an asset file. The imported value will be the file path to the asset.
```js
// rollup.config.js
import { bundleImports } from 'rollup-plugin-bundle-imports'
export default {
input: 'register-service-worker.js',
plugins: [
bundleImports({
include: ['**/my-sw.js'],
// Import as path to bundle
importAs: 'path',
}),
],
}
```
```js
// register-service-worker.js
import swPath from './my-sw.js'
navigator.serviceWorker.register(swPath)
```
### Bundle A Chrome Extension Content Script
Bundle a content script to a code string to inject from the background page of a Web or Chrome extension.
```js
// rollup.config.js
import { bundleImports } from 'rollup-plugin-bundle-imports'
export default {
input: 'background.js',
plugins: [
bundleImports({
include: ['**/content.js', '**/inject.js'],
// Import as code string to bundle
importAs: 'code',
}),
],
}
```
```js
// background.js
import code from './content.js'
// Inject the bundled code to the active tab
browser.tabs.executeScript({ code })
```
Inject the bundled code from the content script of the previous example into the page runtime through a script tag.
```js
// content.js
import code from './inject.js'
const script = document.createElement('script')
script.text = code
document.head.append(script)
script.remove()
```
### Import As Both Code And Paths
If you want to import some files as code and others as file paths, just create two plugins with different settings!
Both plugin instances will work recursively with each other, so you can import a path into a code string, or import a code string into an asset and import the asset path into your entry bundle.
```js
// rollup.config.js
import { bundleImports } from 'rollup-plugin-bundle-imports'
export default {
input: 'index.js',
plugins: [
bundleImports({
include: ['**/my-sw.js'],
// Import as path to bundle
importAs: 'path',
}),
bundleImports({
include: ['**/content.js', '**/inject.js'],
// Import as code string to bundle
importAs: 'code',
}),
],
}
```
TypeScript definitions are included, so no need to install an additional `@types` library!
Type: `string[]`
Glob patterns to for module names to include.
```js
bundleImports({
// Include files that end in `.code.js`
include: ['**/*.code.js'],
})
```
Type: `string[]`
Glob patterns to for module names to include.
```js
bundleImports({
// Exclude files that end in `.code.js`
include: ['**/*.code.js'],
// Except for this one...
exclude: ['src/not-me.code.js'],
})
```
Type: `"path" | "code"`
Use `"code"` to bundle the module and import it as a string.
```js
bundleImports({
importAs: 'path',
})
```
Use `"path"` to emit the module as a file and import the file path as a string. This works well for [service workers](#usage-sw), for example.
```js
bundleImports({
importAs: 'path',
})
```
Type: `string[]`
`rollup-plugin-bundle-imports` bundles the module into an IIFE, and uses the `plugins` array defined in your Rollup input options by default.
If you need to use other plugins or plugin settings for bundled imports, this is the place. You can set any of the [Rollup input options](https://rollupjs.org/guide/en/#big-list-of-options) in `options`.
The properties `options.file` and `options.output` will be ignored.
> Note that most libraries expect to be bundled into a UMD or IIFE, so using `options.format` to create an ES2015 module may cause unexpected results.
```js
bundleImports({
options: {
// Bundle the module as an ESM2015 module
format: 'esm',
// Use a different set of plugins
plugins: [resolve(), commonjs()],
},
})
```
```js
// rollup.config.js
import { rollup } from 'rollup'
import bundle from 'rollup-plugin-bundle-imports'
// These are the default options
const options = {
include: ['**/*.code.js'],
importAs: 'code',
// Rollup input options for the imported module
options: {
plugins: [resolve(), commonjs()],
output: {
format: 'iife',
preferConst: true,
},
},
}
export default {
input: 'index.js',
output: {
file: 'dist/bundle-esm.js',
format: 'esm',
}
plugins: [bundleImports()],
// This is the same as above
plugins: [bundleImports(options)],
}
```