rollup-plugin-import-meta-url-to-module

Transform new URL(..., import.meta.url) to import statement. So vite can handle it.

Input:

const imgUrl = new URL('path/to/asset.png', import.meta.url);

Output:

import __asset_png__ from "path/to/asset.png";
const imgUrl = new URL(__asset_png__, import.meta.url || document.baseURI || self.location.href);

Installation

npm i rollup-plugin-import-meta-url-to-module

Usage

vite.config.js:

import urlToModule from 'rollup-plugin-import-meta-url-to-module';

export default {
  plugins: [
    urlToModule(options)
  ]
};

Maybe it can be used in rollup alone, but I haven't tested it.

Options

include and exclude

See https://github.com/rollup/plugins/tree/master/packages/pluginutils#include-and-exclude

optimizeHref

Defaults: false.

If .href is append and optimizeHref is true, the output code will be optimized:

Input:

const imgUrl = new URL('path/to/asset.png', import.meta.url).href;

Output:

import __asset_png__ from "path/to/asset.png";
const imgUrl = __asset_png__;

Because in Server-Side Rendering, import.meta.url is a file: protocol URL, if the base option in vite config does not include protocol and origin, the href is usually not you want. So we just use the imported file path.

But there is a small problem, the file path will not always be a Full URL, it depends on the base option.