@shgysk8zer0/rollup-import
v1.2.5
Published
A RollUp plugin for importing modules from URLs, paths, and bare specifiers using import maps.
Downloads
402
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.
Installation
npm i @shgysk8zer0/rollup-import
Supports
- External impormap
- 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
andimport.meta.resolve('path.ext')
Not yet supported
import html from 'template.html' with { type: 'html' }
- No spec yet and will have issues with TrustedTypesimport style from 'styles.css' with { type: 'style' }
- Would requirenew CSSStyleSheet().replace()
orstyle-src 'unsafe-inline'
import json from 'data.json' with { type: 'json' }
- Parsing from
<script type="importmap">
in an HTML file - Use of
scope
Example
rollup.config.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
{
"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
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.