https://github.com/jadedblueeyes/esbuild-plugin-asset-import-meta-url
esbuild plugin to support for the new URL import syntax
https://github.com/jadedblueeyes/esbuild-plugin-asset-import-meta-url
esbuild esbuild-plugin import-meta
Last synced: about 2 months ago
JSON representation
esbuild plugin to support for the new URL import syntax
- Host: GitHub
- URL: https://github.com/jadedblueeyes/esbuild-plugin-asset-import-meta-url
- Owner: JadedBlueEyes
- License: mit
- Created: 2025-02-14T23:11:45.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-03-19T02:17:13.000Z (3 months ago)
- Last Synced: 2025-03-29T13:17:42.480Z (2 months ago)
- Topics: esbuild, esbuild-plugin, import-meta
- Language: TypeScript
- Homepage:
- Size: 66.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# esbuild-plugin-asset-import-meta-url
An esbuild plugin that adds support for the `new URL(path, import.meta.url)` syntax, allowing you to reference assets with proper hashing and path resolution.
## Installation
```bash
npm install --save-dev esbuild-plugin-asset-import-meta-url
# or
yarn add -D esbuild-plugin-asset-import-meta-url
# or
pnpm add -D esbuild-plugin-asset-import-meta-url
```
## Usage
```js
import esbuild from 'esbuild'
import assetImportMetaUrl from 'esbuild-plugin-asset-import-meta-url'
await esbuild.build({
entryPoints: ['src/index.js'],
bundle: true,
outdir: 'dist',
plugins: [
assetImportMetaUrl()
]
})
```
in your code:
```js
import { readFile } from 'node:fs/promises'
const imageUrl = new URL('./assets/image.png', import.meta.url)
const imageBuffer = await readFile(imageUrl)
```
## Configuration
The plugin accepts an options object with the following properties:
```ts
interface Options {
fileName?: string; // Accepts the same options as output.assetNames. Default: "[name]-[hash]"
resolveDir?: string; // The directory to resolve relative paths from. Should be where your javascript files are outputted to. Defaults to the output directory.
}
```
### fileName
You can customize the output filename pattern using the following tokens:
- `[name]` - The original file name without extension
- `[hash]` - A unique hash of the file content (16 characters)
- `[extname]` - The original file extension (including the dot)
Example:
```js
assetImportMetaUrl({ fileName: 'media/[hash].js' })
```
## Features
- ✨ Supports `new URL(path, import.meta.url)` syntax
- 🔄 Automatically copies referenced assets to the output directory
- 🔒 Content-based hashing for cache busting
- 🗺 Source map support
- 🔍 Proper path resolution relative to the importing file
## How it Works
The plugin:
1. Scans JavaScript files for `new URL()` declarations with `import.meta.url`
2. Resolves the referenced asset paths
3. Generates a content hash for each asset
4. Copies the assets to the output directory with the configured naming pattern
5. Updates the URL constructor calls with the correct relative paths
## License
MIT - See [LICENSE](LICENSE) for details.