shgysk8zer0/rollup-import

A RollUp plugin for importing modules

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.

---

---

• Code of Conduct
• Contributing

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 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 <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 imports 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.