@web/rollup-plugin-import-meta-assets

Rollup Plugin import-meta-assets

Rollup plugin that detects assets references relative to modules using patterns such as new URL('./assets/my-img.png', import.meta.url).

The referenced assets are added to the rollup pipeline, allowing them to be transformed and hash the filenames.

How it works

A common pattern is to import an asset to get the URL of it after bundling:

import myImg from './assets/my-img.png';

This doesn't work in the browser without transformation. This plugin makes it possible to use an identical pattern using import.meta.url which does work in the browser:

const myImg = new URL('./assets/my-img.png', import.meta.url);

Dynamic variables

You can also use dynamic variables like so:

const myImg = new URL(`./assets/${myImg}.png`, import.meta.url);

Please consult the dynamic-import-vars plugin documentation for options and limitations.

Install

Using npm:

npm install @web/rollup-plugin-import-meta-assets --save-dev

Usage

Create a rollup.config.js configuration file and import the plugin:

import { importMetaAssets } from '@web/rollup-plugin-import-meta-assets';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'es',
  },
  plugins: [importMetaAssets()],
};

Then call rollup either via the CLI or the API.

Documentation

See our website for full documentation.