Rollup-plugin-url-emit NPM

Requirements

This plugin requires an LTS Node version (v8.0.0+) and Rollup v2.0.0+.

Install

Using npm:

npm install rollup-plugin-url-emit --save-dev

Usage

Create a rollup.config.js configuration file and import the plugin:

import url from 'rollup-plugin-url-emit';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [url()]
};

Then call rollup either via the CLI or the API.

With an accompanying file src/index.js, the local image.svg file would now be importable as seen below:

// src/index.js
import svg from './image.svg';
console.log(`svg contents: ${svg}`);

Options

`exclude`

Type: String | Array[...String] Default: null

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should ignore. By default no files are ignored.

`include`

Type: String | Array[...String] Default: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif']

A minimatch pattern, or array of patterns, which specifies the files in the build the plugin should operate on. By default .svg, .png, .jpg, and .gif files are targeted.

`limit`

Type: Number Default: 14336 (14kb)

The file size limit for inline files. If a file exceeds this limit, it will be copied to the destination folder and the hashed filename will be provided instead. If limit is set to 0 all files will be copied.

`publicPath`

Type: String Default: (empty string)

A string which will be added in front of filenames when they are not inlined but are copied.

`emitFiles`

Type: Boolean Default: true

If false, will prevent files being emitted by this plugin. This is useful for when you are using Rollup to emit both a client-side and server-side bundle.

`fileName`

Type: String Default: '[hash][extname]'

If emitFiles is true, this option can be used to rename the emitted files. It accepts the following string replacements:

[hash] - The hash value of the file's contents
[name] - The name of the imported file (without its file extension)
[extname] - The extension of the imported file (including the leading .)
[dirname] - The parent directory name of the imported file (including trailing /)

sourceDir

Type: String Default: (empty string)

When using the [dirname] replacement in fileName, use this directory as the source directory from which to create the file path rather than the parent directory of the imported file. For example:

src/path/to/file.js

import png from './image.png';

rollup.config.js

url({
  fileName: '[dirname][hash][extname]',
  sourceDir: path.join(__dirname, 'src')
});

Emitted File: path/to/image.png

rollup-plugin-url-emit v1.0.0