Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shgysk8zer0/rollup-import
A RollUp plugin for importing modules
https://github.com/shgysk8zer0/rollup-import
import-map node rollup-plugin
Last synced: 3 months ago
JSON representation
A RollUp plugin for importing modules
- Host: GitHub
- URL: https://github.com/shgysk8zer0/rollup-import
- Owner: shgysk8zer0
- License: mit
- Created: 2023-05-11T15:02:39.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-04T15:35:49.000Z (3 months ago)
- Last Synced: 2024-10-04T16:41:43.670Z (3 months ago)
- Topics: import-map, node, rollup-plugin
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/@shgysk8zer0/rollup-import
- Size: 368 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# rolllup-import
A RollUp plugin for importing modules from URLs, paths, and "bare specifiers" using
import maps. You'll no longer need to `npm i` everything you need in front-end code.
- - -
[](https://github.com/shgysk8zer0/rollup-import/actions/workflows/codeql-analysis.yml)
[](https://github.com/shgysk8zer0/rollup-import/blob/master/LICENSE)
[](https://github.com/shgysk8zer0/rollup-import/commits/master)
[](https://github.com/shgysk8zer0/rollup-import/releases)
[](https://github.com/sponsors/shgysk8zer0)
[](https://www.npmjs.com/package/@shgysk8zer0/rollup-import)
[](https://www.npmjs.com/package/@shgysk8zer0/rollup-import)
[](https://github.com/shgysk8zer0)
[](https://twitter.com/shgysk8zer0)
[](https://liberapay.com/shgysk8zer0/donate "Donate using Liberapay")
- - -
- [Code of Conduct](./.github/CODE_OF_CONDUCT.md)
- [Contributing](./.github/CONTRIBUTING.md)
## Installation
```bash
npm i @shgysk8zer0/rollup-import
```
## Supports
- External [impormap](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap)
- JSON
- YAML
- Object `{ imports, scope }` for importmap
- Map `new Map([[specifier, value]])` for importmap
- Importing modules from URL and paths and "bare specifiers"
- Resolving `import.meta.url` and `import.meta.resolve('path.ext')`
## Not yet supported
- `import html from 'template.html' with { type: 'html' }` - No spec yet and will have issues with TrustedTypes
- `import style from 'styles.css' with { type: 'style' }` - Would require `new CSSStyleSheet().replace()` or `style-src 'unsafe-inline'`
- `import json from 'data.json' with { type: 'json' }`
- Parsing from `` in an HTML file
- Use of `scope`
## Example
### `rollup.config.js`
```js
import {
rollupImport, // Handles `import '@scope/package' resolving and fetching`
rollupImportMeta // Handles `import.meta.url` and `import.meta.resolve()`,
} from '@shgysk8zer0/rollup-import';
import terser from '@rollup/plugin-terser';
// To load environment variables from `.env`
import { config } from 'dotenv';
config();
export default {
input: 'src/index.mjs',
plugins: [
rollupImport(['path/to/importmap.json']),
rollupImportMeta({
// MUST be a valid URL
baseURL: 'https://example.com', // Defaults to `process.env.URL` if set
// MUST be a `file:` URL
projectRoot: 'file:///home/user/Projects/my-project/', // Dfaults to `file:///${process.cwd()}/`
}),
terser(),
],
output: {
file: 'dest/index.js',
format: 'iife'
}
};
```
### `importmap.json`
```json
{
"imports": {
"leaflet": "https://unpkg.com/[email protected]/dist/leaflet-src.esm.js",
"firebase/": "https://www.gstatic.com/firebasejs/9.16.0/",
"@scope/package": "./node_modules/@scope/package/index.js",
"@shgysk8zer0/polyfills": "https://unpkg.com/@shgysk8zer0/[email protected]/all.min.js",
"@shgysk8zer0/polyfills/": "https://unpkg.com/@[email protected]/polyfills/"
}
}
```
### `index.js`
```js
import '@scope/package';
import '@shgysk8zer0/polyfills';
import '@shgysk8zer0/polyfills/legacy/object.js'; // -> "https://unpkg.com/@[email protected]/polyfills/legacy/ojbect.js"
import { initializeApp } from 'firebase/firebase-app.js';
import { name } from './consts.js';
const stylesheet = document.createElement('link');
stylesheet.rel = 'stylesheet';
stylesheet.href = import.meta.resolve('styles.css');
document.head.append(stylesheet);
```
## Notes
Using `import`s only, you may use only `rollupImport` or `rollupImportMeta`
via `@shgysk8zer0/rollup-import/import` and `@shgysk8zer0/rollup-import/meta`
respectively. To use with `require()`, you MUST import either/both using
`const {rollupImport, rollupImportMeta } = require('@shgysk8zer0/rollup-import')`.
This plugin works well if importing modules without bundling in the dev environment.
In order to do this, however, you **must** include a `<script type="importmap">`
in your HTML - `<script type="importmap" src="...">` will not work.