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

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

Input:

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

Output:

1import __asset_png__ from "path/to/asset.png";
2const 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:

1import urlToModule from 'rollup-plugin-import-meta-url-to-module';
2
3export default {
4  plugins: [
5    urlToModule(options)
6  ]
7};

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:

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

Output:

1import __asset_png__ from "path/to/asset.png";
2const 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.