Skip to content

Latest commit

 

History

History
108 lines (89 loc) · 3.76 KB

README.md

File metadata and controls

108 lines (89 loc) · 3.76 KB
Raw

esbuild-plugin-sharp

Build CodeQL NPM Version

And esbuild plugin that generates webp and avif images out-of-the-box, and allows other formats supported by sharp.

Install

npm install @liber-ufpe/esbuild-plugin-sharp --save-dev

Usage

Important

metafile: true option is required to generate the images files. See more about metafile in esbuild docs.

import esbuild from "esbuild";
import {imagesPlugin} from "@liber-ufpe/esbuild-plugin-sharp";

esbuild.build({
    entryPoints: ["src/index.js"],
    bundle: true,
    metafile: true,
    outfile: "dist/index.js",
    plugins: [imagesPlugin()],
}).catch(() => process.exit(1));

Or when customizing the options:

import esbuild from "esbuild";
import {imagesPlugin} from "@liber-ufpe/esbuild-plugin-sharp";

esbuild.build({
    entryPoints: ["src/index.js"],
    bundle: true,
    metafile: true,
    outfile: "dist/index.js",
    plugins: [imagesPlugin({ webp: false })],
}).catch(() => process.exit(1));

If you need to add an extra format, for example, another webp image but with lower quality:

import esbuild from "esbuild";
import {imagesPlugin} from "@liber-ufpe/esbuild-plugin-sharp";

esbuild.build({
    entryPoints: ["src/index.js"],
    bundle: true,
    metafile: true,
    outfile: "dist/index.js",
    plugins: [
        imagesPlugin({
            extraFormats: [{
                name: "webp",
                extension: ".low.webp",
                options: {
                    quality: 50
                }
            }]
        })
    ],
}).catch(() => process.exit(1));

See sharp documentation for a full list of supported formats and options for each one of them.

Options

  • webp: Enable webp generation.
    • type: boolean
    • default: true
  • avif: Enable avif generation.
    • type: boolean
    • default: true
  • includes: List of glob patterns to match files that will be included
    • type: string[]
    • default: ["**/*.{jpg,jpeg,png}"]
  • excludes: glob patterns to exclude files. Takes precedence over includes.
    • type: string[]
    • default: []
  • webpOptions: configuration for webp generation.
  • avifOptions: configuration for avif generation.
  • extraFormats: an array listing other formats to be generated.
    • type: ImageFormat[]. ImageFormat has the following options:
      • name: name of the format according to what is supported by sharp
      • extension: which extension will be used for the generated file. For example, .lowquality.webp.
      • options: the options used for each format. See sharp docs for a list of options for each format.
    • default: []

References: