mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-10-06 20:11:38 +08:00
Tim van der Lippe
706ec965fb
These packages will be used to dynamically optimize SVG images during the build. R=jacktfranklin@chromium.org Bug: 1216402 Change-Id: I04e95aa7d79c9d67beaf8a7861182c52b16b7d0f Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2939992 Reviewed-by: Jack Franklin <jacktfranklin@chromium.org> Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
51 lines
1.4 KiB
Markdown
51 lines
1.4 KiB
Markdown
# 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);
|
|
```
|
|
|
|
## 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.
|