@nuance-fe/unplugin-assets-transform

A complete unplugin package that rewrites image imports to CDN URLs at build time.

What It Does

This plugin transforms:

import logo from './assets/logo.png'

into:

const logo = 'https://cdn.example.com/images/logo.svg'

Install

npm i -D @nuance-fe/unplugin-assets-transform

Usage

Vite

import { defineConfig } from 'vite'
import CdnAssets from '@nuance-fe/unplugin-assets-transform/vite'

export default defineConfig({
  plugins: [
    CdnAssets({
      toCdnURL: async (_relativePath, { absoluteId }) => uploadAndGetURL(absoluteId),
    }),
  ],
})

Rollup

import CdnAssets from '@nuance-fe/unplugin-assets-transform/rollup'

export default {
  plugins: [CdnAssets({ toCdnURL: async (_p, { absoluteId }) => uploadAndGetURL(absoluteId) })],
}

Webpack

module.exports = {
  plugins: [
    require('@nuance-fe/unplugin-assets-transform/webpack')({
      toCdnURL: async (_p, { absoluteId }) => uploadAndGetURL(absoluteId),
    }),
  ],
}

Rspack

module.exports = {
  plugins: [
    require('@nuance-fe/unplugin-assets-transform/rspack')({
      toCdnURL: async (_p, { absoluteId }) => uploadAndGetURL(absoluteId),
    }),
  ],
}

Esbuild

import { build } from 'esbuild'
import CdnAssets from '@nuance-fe/unplugin-assets-transform/esbuild'

await build({
  entryPoints: ['src/main.ts'],
  bundle: true,
  plugins: [CdnAssets({ toCdnURL: async (_p, { absoluteId }) => uploadAndGetURL(absoluteId) })],
})

Options

• include?: RegExp
• exclude?: RegExp
• root?: string
• toCdnURL: (relativeAssetPath, context) => Promise<string> | string (required)

Defaults:

• include = /\.(apng|avif|bmp|gif|ico|jpe?g|png|svg|tiff?|webp)(\?.*)?$/i
• exclude = /node_modules/
• root = process.cwd()

Development

npm run dev
npm run typecheck
npm run build