@web/rollup-plugin-import-meta-assets
TypeScript icon, indicating that this package has built-in type declarations

2.2.1 • Public • Published

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.

Dependencies (5)

Dev Dependencies (0)

    Package Sidebar

    Install

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

    Weekly Downloads

    5,922

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    13.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • d4kmor
    • passle
    • jorenbroekema
    • bennyp
    • larsdenbakker
    • westbrook
    • modern-web