GitHub - nativew/esbuild-plugin-pipe: Pipe esbuild plugins output. (original) (raw)

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.