Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

esbuild not bundling files

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

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 those files to me, minimized. They have basically 0 documentation on this and every post online about it has just copy/pasted the README from the GitHub. How can I make it bundle?

like image 334
Lee Morgan Avatar asked Jul 25 '20 09:07

Lee Morgan


People also ask

Why is Esbuild so fast?

#Why is esbuild fast? Several reasons: It's written in Go and compiles to native code. Most other bundlers are written in JavaScript, but a command-line application is a worst-case performance situation for a JIT-compiled language.

Does Esbuild use Tsconfig?

Note: esbuild will automatically detect that we're using TypeScript and look for a tsconfig. json . If it finds one, any options set there will override any compiler options we passed to our esbuild configuration.

Should I use Esbuild?

When esbuild hits 1.0 it's going to be very useful in big production sites and will save teams a whole lot of time waiting for builds to complete. Unfortunately, big production sites will have to wait until esbuild becomes stable. In the meantime, it'll just be good to add some speed to your bundling in side projects.


2 Answers

Based on Alexander response I finally came to this solution to pack a whole folder into a single file:

const esbuild = require('esbuild');
const glob = require('glob');

esbuild
    .build({
        stdin: { contents: '' },
        inject: glob.sync('src/js/**/*.js'),
        bundle: true,
        sourcemap: true,
        minify: true,
        outfile: 'web/js/bundle.js',
    })
    .then(() => console.log("⚡ Javascript build complete! ⚡"))
    .catch(() => process.exit(1))
like image 122
txigreman Avatar answered Oct 11 '22 21:10

txigreman


You can use inject option (https://esbuild.github.io/api/#inject), for example,

const options = {
  entryPoints: ['index.js'],
  inject: ['file1.js', ..., 'fileN.js'],
  bundle: true,
  minify: true,
  sourcemap: true,
  outdir: path,
};
esbuild.buildSync(options);
like image 30
Alexander Avatar answered Oct 11 '22 21:10

Alexander