rollup-plugin-assets

Rollup assets plugin

The best assets (fonts and images) management for rollup. Automatically gather assets from all packages/libraries.

1. Detect asset in import import faceAngel from './face-angel.png'
2. Generate human-friendly unique asset path: config.assetsUrl + 'my-package/face-angel.png'
3. Base url for all assets configurable in runtime, see zerollup/injector
4. Copy resources to dist/i/<pkg.name>/* directory of package
5. When building application - extracts assets from packages and copy them to dist/i/<pkg.names>/

Example zerollup demo site.

Library

my-unique-lib/src/index.ts

import faceAngel from './face-angel.png'

export {faceAngel}

Transpiled my-unique-lib/dist/index.js

import { config } from '@zerollup/injector';

var faceAngel = config.assetsUrl + "my-unique-lib/face_angel.png"

export { faceAngel };

ls my-unique-lib/dist/i:

my-unique-lib/
    face_angel.png

Application

my-unique-app/src/index.ts

import {faceAngel} from 'my-unique-lib'

console.log(faceAngel)

my-unique-app/dist/index.js

var myUniqueApp = (function () {
    'use strict';

    var baseUrl = {
        assets: '/'
    };

    var faceAngel = baseUrl.assets + "my-unique-lib/face_angel.png";

    console.log(faceAngel);

}());

ls my-unique-app/dist/i:

my-unique-lib/
    face_angel.png

Setup

Example rollup.config.js

const pkg = require('./package.json')

export default {
    plugins: [
        // ...
        assets({
            name: pkg.name,
            pkgRoot: process.cwd(),
            isLib: true
        })
    ]
}

For complex usage see zerollup rollup-preset-ts

For typescript

Install typescript asset module resolver fix:

cp -rf ./node_modules/@zerollup/base-url/@types/assets-fix ./node_modules/@types