javascriptbundling-and-minificationesbuild

esbuild not bundling files into a single output


I am trying to use esbuild to bundle and minify my files for an npm project. It is minimizing every file that I pass in, but it is not bundling them into a single output file. It gives me the error that I must use the outdir property when there are multiple files. However, using outdir gives me back all of those files, minimized, in a folder. This is not the behavior that I want - I need it to take all of those files and merge them into one.

My build script is as follows:

let {build} = require("esbuild");
let files = ["file1.js", "file2.js"];

build({
    entryPoints: files,
    outdir: "./views/dashboardPage/bundle",
    minify: true,
    bundle: true
}).catch(() => process.exit(1));

I have bundle set to true, but it still demands that I use outdir and it just returns the input files to me, minimized.

How can I bundle all of the files into a single output?


Solution

  • Each entry point file will become a separate bundle. Each bundle includes the entry point file and all files it imports. Passing two entry points will create two separate bundles. The bundling process is not the same thing as file concatenation.

    If you want all of the files in a single bundle, you can reference them all from a single file and use that file as the entry point:

    import "./file1.js"
    import "./file2.js"
    

    Doing that with esbuild could look something like this:

    let {build} = require("esbuild");
    let files = ["./file1.js", "./file2.js"];
    
    build({
        stdin: { contents: files.map(f => `import "${f}"`).join('\n') },
        outfile: "./views/dashboardPage/bundle.js",
        minify: true,
        bundle: true
    }).catch(() => process.exit(1));