https://shaneosullivan.wordpress.com/2023/05/17/using-bun-js-as-a-bundler/

Skip to content
[abaeb4f714]

SOS

Shane O'Sullivan's technical blog... really ties the room together

Using Bun.js as a bundler

Shane O'Sullivan Technical May 17, 2023May 17, 2023 4 Minutes

Bun.js is a new (as of 2023) JavaScript runtime that is still very
much in development, with it's primary focus being on extreme speed.
I've been following it for a while but until today haven't had a good
excuse to use it.

The author, Jarred Sumner, announced on Twitter today that they have
shipped a beta version of a new code bundler for Bun, showing some
crazy speed increases over other bundlers. This piqued my interest,
as I use a combination of Webpack, Browserify and Uglify on my side
projects, in this case my tablet PWA that I built for my kids
kidzfun.art, which work but are really slow.

    Introducing the Bun Bundler

    A fast JavaScript bundler deeply integrated into Bun's runtime
    https://t.co/mGPXr0cv7f

    -- Jarred Sumner (@jarredsumner) May 16, 2023

My current workflow can result in a 5 - 7 second wait for all my JS
files to rebuild when I save a file, and I thought that Bun could
help with this. It turns out I was right! .... with caveats.

You can see the docs for Bun.build() at https://bun.sh/docs/cli/build
, and they are well written and quite comprehensive.

My requirements were to

  * Build multiple files quickly, each of which imports multiple
    other 3rd party files from node_modules.
  * Build minified and non-minified files
  * The resulting file can be included directly in a browser using a
    <script> tag.

Getting started

I started off by running default build code (for Bun v0.6.1)

const myFiles = [...];

await Bun.build({
  entrypoints: [myFiles],
  outdir: './build'
});


by adding a script to my package.json file

 "build-browser": "bun scripts/build-browser.js"

and this worked just fine. More importantly, it was crazily fast.
Instead of 5 seconds it now seemed to finish as the Enter key was
still traveling back upwards from executing the command. Nice!

Minification

Minification looks simple in the docs, but unfortunately it's where
the beta nature of Bun shows up. Running the code above with
minification

const myFiles = [...];

await Bun.build({
  entrypoints: [myFiles],
  outdir: './build',
  minify: true
});

results in an error being thrown that shuts down the process if there
is more than one entry point file.

Bus error: 10

Searching the web didn't turn up anything, but the solution is to
only pass a single entry point file path to Bun.build() if you are
minifying the code. Throw that in a for loop to get through all the
files and it runs just fine!

A second issue with the default minification is that it broke my app
in strange ways that I could not track down - I'm guessing that it's
rewriting the code in some way that is not fully stable yet. I solved
it by turning off the syntax minification option

const myFiles = [...];

await Bun.build({
  entrypoints: [myFiles],
  outdir: './build',
  minify:{
    whitespace: true,
    identifiers: true,
    syntax: false // Setting this to false fixes the issue
  }
});

Removing Exports

Bun inserts code that looks like this at the bottom of the built
file, in this case from a file called account.ts

var account_default = {};
export {
  account_default as default
};

If you load this in a browser <script> tag it will throw an error. I
couldn't find a way to tell Bun how to not output this, so I had to
write a relatively simple function to detect this at the end of each
output file and remove it.

Watch issues

I have some code that uses the node-watch module to automatically
re-run the build when a file changes. Under the hood this uses the
fs.watch function, which it turns out Bun does not yet support.
Here's the Github issue tracking it. I tried to use the native Bun
watch functionality, but this executed the script code which is not
what I'm looking for.

I came up with a hacky solution that works fairly well, where I use
the RunOnSave extension for VS Code to execute

touch ./.last_modified_timestamp

every time I save a file. Then in my build script I use setInterval
to check the last modified time of this file and re-run the build if
it has changed. Hacky but it works. Hopefully Bun will implement
fs.watch soon and I can throw out this code.

function build() {
  ...
}

const timestampFilePath = `${rootDir}/.last_modified_timestamp`;
if (fs.existsSync(timestampFilePath)) {
  let lastModifiedRootFolder = 0;
  setInterval(() => {
    const stat = fs.statSync(timestampFilePath);
    if (stat.mtime.getTime() !== lastModifiedRootFolder) {
      lastModifiedRootFolder = stat.mtime.getTime();
      build();
    }
  }, 500);
}

Vercel build failures

Once everything was running just fine locally on my Mac, I pushed the
branch to Github so Vercel would build it (it's a NextJS
application). This threw up a new issue. My build script uses the
native Node exec() function to move and copy files. This works just
fine on my Mac, but when running the build in the cloud environment
all these calls would fail. There's something unfinished with Bun's
implementation of the child_process module that breaks when run in
the Vercel build environment.

My solution to this was to simply change all these execSync calls to
use the Node fs functions, e.g.

import fs from 'fs';
....
fs.copyFileSync(srcPath, destPath);
fs.renameSync(path, `${rootDir}/public/${fileName}`);

Epilogue

After a few hours of work, reading up on Bun and working my way
through these issues, I now have a much simpler build system that
runs in the blink of an eye. My Vercel build times have reduced from
2 minutes to just 50 seconds (that's all React stuff & fetching
node_modules). My watch script runs in a few milliseconds instead of
5 or more seconds, My code is much simpler and I've removed Webpack,
Browserify and Uglify from my projects.

Thanks so much to the Bun team for a great project. Even as early as
it is at time of writing (mid 2023), it's highly useful, and as they
work through all the kinks it will only get more so. I look forward
to using it more in the months and years to come!

Advertisement

Share this:

  * Share
  * 

  * Facebook
  * Twitter
  * 

Like this:

Like Loading...

Related

[abaeb4f714]

Published by Shane O'Sullivan

I am a software engineer and manager from Ireland. I spent 7 years
working in Ireland from 2003 - 2010, then ten years in Silicon Valley
from 2010 to 2020. In California I spent about 6.5 years at Facebook
Engineering, the last three of which I was an engineering manager in
the Ads organisation focusing on customer facing products for
creating and managing ads. At Stripe I built the Developer
Productivity organisation, with teams that were responsible for the
use of the Ruby language, testing infrastructure, documentation,
developer tooling (e.g. IDE integrations) and more. At Promise, I was
Head of Engineering from 2018 - 2020, responsible for building the
first few iterations of our products, hiring for all product roles,
meeting with clients and investors, and anything else needed to get a
tiny startup bootstrapped and successful. Now I'm back in Ireland,
working on my next company. Coming soon (as of early 2021!). This
blog contains my various musings on all things technical/interesting
on the interweb and beyond. View all posts by Shane O'Sullivan

Published May 17, 2023May 17, 2023

Post navigation

Previous Post React.js: The Documentary & Q&A

2 thoughts on "Using Bun.js as a bundler"

 1. Pingback: Using Bun.js as a bundler - SOS - My Blog
 2. Pingback: HackerNews Summary (2023-05-17 03PM) - GPT News Reader

Leave a Reply Cancel reply

Enter your comment here...
[                    ]

Fill in your details below or click an icon to log in:

  *  
  *  
  *  

Gravatar
Email (required) (Address never made public)
[                    ]
Name (required)
[                    ]
Website
[                    ]
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out / 
Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s

[ ] Notify me of new comments via email.

[ ] Notify me of new posts via email.

[Post Comment] 

 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
D[                                             ] 

Other me

  * Twitter
  * LinkedIn
  * Facebook

Recent Posts

  * Using Bun.js as a bundler
  * React.js: The Documentary & Q&A
  * React.js: The Documentary
  * Kidz Fun Art - Tablet app for kids
  * Building Countdoku, a multiplayer Sudoku Web app

Archives

Archives [Select Month  ]

Subscribe

[feed-icon] Atom 0.3 [feed-icon] RSS 2.0

Recent Posts

  * Using Bun.js as a bundler
  * React.js: The Documentary & Q&A
  * React.js: The Documentary
  * Kidz Fun Art - Tablet app for kids
  * Building Countdoku, a multiplayer Sudoku Web app

Blogs

  * Alex Russell
  * Carol Jones
  * Chofter.com Blog
  * James Snell
  * Rob Yates

Interests

  * DojoBuilder
  * GreaseMonkey Scripts
  * MapViewer for Robotics

Links

  * JavaScript JS Documentation: JS Array join, JavaScript Array
    join, JS Array .join, JavaScript Array .join

Projects

  * Chofter webOS Apps
  * Chofter.com

Publications

  * Benchmarking Map Building Algorithms
  * Evaluation of Sonar Models
  * IBM WMC ISV Integration Guide
  * Linear Feature Prediction
  * Masters Thesis
  * Vectorising Spatial Maps

Visits to this blog

[shaneosull]
Create a free website or blog at WordPress.com.
[Close and accept] Privacy & Cookies: This site uses cookies. By
continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie
Policy
  * Follow Following
      + [wpcom-] SOS
        Join 25 other followers
        [                    ]
        Sign me up
      + Already have a WordPress.com account? Log in now.
  * 
      + [wpcom-] SOS
      + Customize
      + Follow Following
      + Sign up
      + Log in
      + Copy shortlink
      + Report this content
      + View post in Reader
      + Manage subscriptions
      + Collapse this bar

%d bloggers like this:

[b]