https://github.com/modernweb-dev/rollup-plugin-import-meta-assets

Rollup plugin that detects assets references relative to modules using patterns such as `new URL('./path/to/asset.ext', import.meta.url)`. The assets are added to the rollup pipeline, allowing them to be transformed and hash the filenames.
https://github.com/modernweb-dev/rollup-plugin-import-meta-assets

Last synced: 6 days ago
JSON representation

Rollup plugin that detects assets references relative to modules using patterns such as `new URL('./path/to/asset.ext', import.meta.url)`. The assets are added to the rollup pipeline, allowing them to be transformed and hash the filenames.

• Host: GitHub
• URL: https://github.com/modernweb-dev/rollup-plugin-import-meta-assets
• Owner: modernweb-dev
• Created: 2024-01-11T18:02:54.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-04-11T04:40:55.000Z (7 months ago)
• Last Synced: 2024-04-14T00:24:14.975Z (7 months ago)
• Language: JavaScript
• Size: 217 KB
• Stars: 1
• Watchers: 5
• Forks: 0
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# 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:

```js

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:

```js

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

```

### Dynamic variables

You can also use dynamic variables like so:

```js

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

```

Please consult the [dynamic-import-vars plugin](https://github.com/rollup/plugins/blob/master/packages/dynamic-import-vars) 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](https://www.rollupjs.org/guide/en/#configuration-files) and import the plugin:

```js

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](https://www.rollupjs.org/guide/en/#command-line-reference) or the [API](https://www.rollupjs.org/guide/en/#javascript-api).

## Documentation

See [our website](https://modern-web.dev/docs/building/rollup-plugin-import-meta-assets/) for full documentation.