{"id":15711728,"url":"https://github.com/jacksteamdev/rollup-plugin-bundle-imports","last_synced_at":"2025-05-12T21:49:46.107Z","repository":{"id":42211320,"uuid":"177888130","full_name":"jacksteamdev/rollup-plugin-bundle-imports","owner":"jacksteamdev","description":"Bundle imports separately and use the result in your code.","archived":false,"fork":false,"pushed_at":"2023-01-03T18:36:13.000Z","size":1069,"stargazers_count":9,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-25T13:55:57.143Z","etag":null,"topics":["bundle","chrome-extensions","esmodules","import","rollup-js","rollup-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jacksteamdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-27T00:14:21.000Z","updated_at":"2025-02-11T08:49:32.000Z","dependencies_parsed_at":"2023-02-01T08:47:07.841Z","dependency_job_id":null,"html_url":"https://github.com/jacksteamdev/rollup-plugin-bundle-imports","commit_stats":null,"previous_names":["bumble-org/rollup-plugin-bundle-imports","bumble-org/rollup-plugin-code-string"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacksteamdev%2Frollup-plugin-bundle-imports","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacksteamdev%2Frollup-plugin-bundle-imports/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacksteamdev%2Frollup-plugin-bundle-imports/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jacksteamdev%2Frollup-plugin-bundle-imports/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jacksteamdev","download_url":"https://codeload.github.com/jacksteamdev/rollup-plugin-bundle-imports/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253830539,"owners_count":21970996,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bundle","chrome-extensions","esmodules","import","rollup-js","rollup-plugin"],"created_at":"2024-10-03T21:13:48.771Z","updated_at":"2025-05-12T21:49:46.086Z","avatar_url":"https://github.com/jacksteamdev.png","language":"JavaScript","readme":"\u003c!--\nTemplate tags:\nbumble-org\nrollup-plugin-bundle-imports\nIMG_URL\n--\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/bumble-org/rollup-plugin-bundle-imports\" rel=\"noopener\"\u003e\n  \u003cimg width=200px height=200px src=\"https://imgur.com/3E9Rowk.png\" alt=\"rollup-plugin-bundle-imports logo\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch3 align=\"center\"\u003erollup-plugin-bundle-imports\u003c/h3\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm (scoped)](https://img.shields.io/npm/v/rollup-plugin-bundle-imports.svg)](https://www.npmjs.com/package/${}/rollup-plugin-bundle-imports)\n[![GitHub last commit](https://img.shields.io/github/last-commit/bumble-org/rollup-plugin-bundle-imports.svg)](https://github.com/bumble-org/rollup-plugin-bundle-imports)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)\n[![TypeScript Declarations Included](https://img.shields.io/badge/types-TypeScript-informational)](#typescript)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![Fiverr: We make Chrome extensions](https://img.shields.io/badge/Fiverr%20-We%20make%20Chrome%20extensions-brightgreen.svg)](https://www.fiverr.com/jacksteam)\n[![ko-fi](https://img.shields.io/badge/ko--fi-Buy%20me%20a%20coffee-ff5d5b)](https://ko-fi.com/K3K1QNTF)\n\n\u003c/div\u003e\n\n---\n\nBundle 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.\n\nIf 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)\n\n## Table of Contents\n\n- [Getting Started](#getting_started)\n- [Usage](#usage)\n  - [Bundle A Service Worker](#usage-sw)\n  - [Bundle A Chrome Extension Content Script](#usage-script)\n  - [Recursive Usage](#usage-recursive)\n  - [Import As Both Code and Paths](#usage-import-as-both)\n- [Features](#features)\n  - [Works With TypeScript](#typescript)\n- [Options API](#options-api)\n\n## Getting Started \u003ca name = \"getting_started\"\u003e\u003c/a\u003e\n\nThis is a Rollup plugin, so your project will need to be up and running with [Rollup](https://rollupjs.org/guide/en/).\n\n### Installation\n\n```sh\n$ npm i rollup-plugin-bundle-imports -D\n```\n\n## Usage \u003ca name = \"usage\"\u003e\u003c/a\u003e\n\n```js\n// rollup.config.js\n\nimport { bundleImports } from 'rollup-plugin-bundle-imports'\n\nexport default {\n  input: 'index.js',\n  output: {\n    file: 'dist/bundle-esm.js',\n    format: 'esm',\n  }\n  plugins: [bundleImports()],\n}\n```\n\nDefault is to import a module that ends in `.code.js` as a string.\n\n```js\nimport code from './script.code.js'\n```\n\n### Bundle A Service Worker \u003ca name = \"usage-sw\"\u003e\u003c/a\u003e\n\nUse `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.\n\n```js\n// rollup.config.js\n\nimport { bundleImports } from 'rollup-plugin-bundle-imports'\n\nexport default {\n  input: 'register-service-worker.js',\n  plugins: [\n    bundleImports({\n      include: ['**/my-sw.js'],\n      // Import as path to bundle\n      importAs: 'path',\n    }),\n  ],\n}\n```\n\n```js\n// register-service-worker.js\n\nimport swPath from './my-sw.js'\n\nnavigator.serviceWorker.register(swPath)\n```\n\n### Bundle A Chrome Extension Content Script \u003ca name = \"usage-script\"\u003e\u003c/a\u003e\n\nBundle a content script to a code string to inject from the background page of a Web or Chrome extension.\n\n```js\n// rollup.config.js\n\nimport { bundleImports } from 'rollup-plugin-bundle-imports'\n\nexport default {\n  input: 'background.js',\n  plugins: [\n    bundleImports({\n      include: ['**/content.js', '**/inject.js'],\n      // Import as code string to bundle\n      importAs: 'code',\n    }),\n  ],\n}\n```\n\n```js\n// background.js\n\nimport code from './content.js'\n\n// Inject the bundled code to the active tab\nbrowser.tabs.executeScript({ code })\n```\n\n### Recursive Usage \u003ca name = \"usage-recursive\"\u003e\u003c/a\u003e\n\nInject the bundled code from the content script of the previous example into the page runtime through a script tag.\n\n```js\n// content.js\n\nimport code from './inject.js'\n\nconst script = document.createElement('script')\nscript.text = code\n\ndocument.head.append(script)\nscript.remove()\n```\n\n### Import As Both Code And Paths \u003ca name = \"usage-import-as-both\"\u003e\u003c/a\u003e\n\nIf you want to import some files as code and others as file paths, just create two plugins with different settings!\n\nBoth 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.\n\n```js\n// rollup.config.js\n\nimport { bundleImports } from 'rollup-plugin-bundle-imports'\n\nexport default {\n  input: 'index.js',\n  plugins: [\n    bundleImports({\n      include: ['**/my-sw.js'],\n      // Import as path to bundle\n      importAs: 'path',\n    }),\n    bundleImports({\n      include: ['**/content.js', '**/inject.js'],\n      // Import as code string to bundle\n      importAs: 'code',\n    }),\n  ],\n}\n```\n\n## Features \u003ca name = \"features\"\u003e\u003c/a\u003e\n\n### Works With TypeScript \u003ca name = \"typescript\"\u003e\u003c/a\u003e\n\nTypeScript definitions are included, so no need to install an additional `@types` library!\n\n## Options API \u003ca name = \"options-api\"\u003e\u003c/a\u003e\n\n### `[include]` \u003ca name = \"options-include\"\u003e\u003c/a\u003e\n\nType: `string[]`\n\nGlob patterns to for module names to include.\n\n```js\nbundleImports({\n  // Include files that end in `.code.js`\n  include: ['**/*.code.js'],\n})\n```\n\n### `[exclude]` \u003ca name = \"options-include\"\u003e\u003c/a\u003e\n\nType: `string[]`\n\nGlob patterns to for module names to include.\n\n```js\nbundleImports({\n  // Exclude files that end in `.code.js`\n  include: ['**/*.code.js'],\n  // Except for this one...\n  exclude: ['src/not-me.code.js'],\n})\n```\n\n### `[importAs]` \u003ca name = \"options-import-as\"\u003e\u003c/a\u003e\n\nType: `\"path\" | \"code\"`\n\nUse `\"code\"` to bundle the module and import it as a string.\n\n```js\nbundleImports({\n  importAs: 'path',\n})\n```\n\nUse `\"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.\n\n```js\nbundleImports({\n  importAs: 'path',\n})\n```\n\n### `[options]` \u003ca name = \"options-options\"\u003e\u003c/a\u003e\n\nType: `string[]`\n\n`rollup-plugin-bundle-imports` bundles the module into an IIFE, and uses the `plugins` array defined in your Rollup input options by default.\n\nIf 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`.\n\nThe properties `options.file` and `options.output` will be ignored.\n\n\u003e 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.\n\n```js\nbundleImports({\n  options: {\n    // Bundle the module as an ESM2015 module\n    format: 'esm',\n    // Use a different set of plugins\n    plugins: [resolve(), commonjs()],\n  },\n})\n```\n\n### Default options \u003ca name = \"options-defaults\"\u003e\u003c/a\u003e\n\n```js\n// rollup.config.js\n\nimport { rollup } from 'rollup'\nimport bundle from 'rollup-plugin-bundle-imports'\n\n// These are the default options\nconst options = {\n  include: ['**/*.code.js'],\n  importAs: 'code',\n  // Rollup input options for the imported module\n  options: {\n    plugins: [resolve(), commonjs()],\n    output: {\n      format: 'iife',\n      preferConst: true,\n    },\n  },\n}\n\nexport default {\n  input: 'index.js',\n  output: {\n    file: 'dist/bundle-esm.js',\n    format: 'esm',\n  }\n  plugins: [bundleImports()],\n  // This is the same as above\n  plugins: [bundleImports(options)],\n}\n```\n","funding_links":["https://ko-fi.com/K3K1QNTF"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacksteamdev%2Frollup-plugin-bundle-imports","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjacksteamdev%2Frollup-plugin-bundle-imports","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjacksteamdev%2Frollup-plugin-bundle-imports/lists"}