esbuild-plugin-pipe

Pipe esbuild plugins output.

A pipe is a form of redirection that is used to send the output of one program to another program for further processing.

⚠️ The plugins have to support piping.

Install

npm install esbuild-plugin-pipe -D

Use

esbuild.config.js

import esbuild from 'esbuild';
import pipe from 'esbuild-plugin-pipe';

esbuild
    .build({
        entryPoints: ['index.js'],
        bundle: true,
        outfile: 'main.js',
        plugins: [
            pipe({
                plugins: [...]
            })
        ]
    })
    .catch(() => process.exit(1));

package.json

{
    "type": "module",
    "scripts": {
        "start": "node esbuild.config.js"
    }
}

Configure

esbuild.config.js

pipe({
    filter: /.*/,
    namespace: '',
    plugins: []
});

Support

If you are a plugin maker, it's really easy to support piping. Here’s a commented plugin example.

const pluginExample = () => ({
    name: 'example',
    setup(build, { transform } = {}) {
        // The `setup` function receives a new `transform` argument if it’s in a pipe.

        // Create a function and move all the content of your `onLoad` function in it, except the `readfile`.
        const transformContents = ({ args, contents }) => {
            // It receives an object as an argument containing both the standard arguments of the `onLoad` function
            // and the `contents` of the previous plugin or file.

            // Move your code here. It should return `contents`.
            return { contents };
        };

        // If the `transform` argument exists, pass it to your new function.
        if (transform) return transformContents(transform);

        // Else call your `onLoad` function.
        build.onLoad({ filter: /.*/ }, async args => {
            // Read the files from disk.
            const contents = await fs.promises.readFile(args.path, 'utf8');

            // Call your function, but this time pass an object with the `onLoad` arguments and the file `contents`.
            return transformContents({ args, contents });
        });
    }
});

export default pluginExample;

Check

esbuild-serve   →   Serve with live reload for esbuild.

esbuild-plugin-babel   →   Babel plugin for esbuild.

esbuild-plugin-svg   →   Svg files import plugin for esbuild.

esbuild-plugin-postcss-literal   →   PostCSS tagged template literals plugin for esbuild.