https://github.com/yoyo930021/unplugin-dynamic-resource

A unplugin for support dynamic require resource(png/jpg/svg). Used in shared library when cross bundler in monorepo.
https://github.com/yoyo930021/unplugin-dynamic-resource

monorepo require unplugin vite webpack

Last synced: 17 days ago
JSON representation

A unplugin for support dynamic require resource(png/jpg/svg). Used in shared library when cross bundler in monorepo.

• Host: GitHub
• URL: https://github.com/yoyo930021/unplugin-dynamic-resource
• Owner: yoyo930021
• License: mit
• Created: 2021-10-14T03:14:39.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-09-08T09:08:49.000Z (about 2 years ago)
• Last Synced: 2024-10-05T10:07:01.853Z (about 1 month ago)
• Topics: monorepo, require, unplugin, vite, webpack
• Language: JavaScript
• Homepage:
• Size: 104 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# unplugin-dynamic-resource

A unplugin for support dynamic require resource(png/jpg/svg). Used in shared library when cross bundler in monorepo.

## Support bundler

- vite

- webpack

## Install

```bash

npm install --dev unplugin-dynamic-resource

yarn add -D unplugin-dynamic-resource

```

### vite

```javascript

// vite.config.js

import { dynamicResourceUnPlugin } from 'unplugin-dynamic-resource'

export default {

  plugins: [

    dynamicResourceUnPlugin.vite({ /* options */ })

  ]

}

```

### webpack

```javascript

// webpack.config.js

import { dynamicResourceUnPlugin } from 'unplugin-dynamic-resource'

module.exports = {

  plugins: [

    dynamicResourceUnPlugin.webpack({ /* options */ })

  ]

}

```

## Usage

```javascript

// Usage

export const getIconImage = (iconName) => __dynamicResource(`../assets/icon/${iconName}.png`, '__resource__')

// Will convert to....

// webpack

export const getIconImage = (iconName) => require(`../assets/icon/${iconName}.png`)

// vite

export const getIconImage = (iconName) => new URL(`../assets/icon/${iconName}.png`, import.meta.url).href

```

## Options

### fn

- type: `string`

- default: `__dynamicResource`

- Convert function name

### include

- type: `(id: string) => boolean`

- default: (id) => id.endsWith('.js')

- include transform file

### esModule

- type: `boolean`

- default: `false`

- Same as `url-loader` esModule option, when `true`, will `require().default`