Simon Zünd
abf0cd1847
Since we have the major version jump, we needed to update quite
a few things to make this work:
1. rollup4 ships with native binaries. We can't check them into
our node_modules for all platforms. Luckily they also ship a
a wasm version. This requires us to adjust the 'binary' path
to `node_modules/@rollup/wasm-node/dist/bin/rollup` instead.
2. rollup4 is more strict when it comes to ES modules vs
CommonJS. We adjust this by renaming the rollup config files.
3. Some plugins got deprecated so we had to replace them with
the newer versions (source maps and terser).
Bug: None
Change-Id: If13d590c8185db6ad85b3992d0a869111909dc8c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5999255
Commit-Queue: Simon Zünd <szuend@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
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.