Bun.js is an amazing new project in the JavaScript community that uses an extensive runtime and toolchain. I have actually formerly composed a general intro to the task as a drop-in replacement for Node.js. This article focuses on Bun’s brand-new bundling function. While it’s still in early releases, the Bun bundler is rather capable and shows off Bun’s speed. It might easily change tools like WebPack, Vite, and Snowpack.Let’s check out the
brand-new bundling assistance in Bun.Why another bundler?The very first concern
for numerous designers is
why we require another bundler. We currently have a few of them, after all.So what’s unique about the Bun bundler? One advantage is that having a bundler in the Bun toolchain brings everything under one roofing system. Rather than developing a toolkit from parts, you have actually got everything you need in one toolchain. The other advantage is that Bun is developed for speed, which matters for bundling. Bun is built on Zig and JavaScript to support much faster built times. When magnified throughout advancement and devops(CI/CD)workflows, Bun’s performance benefit can have a substantial effect on productivity.State of the Bun bundler The Bun.js bundler is still in beta, so we can expect a few rough edges. But something you can’t miss is the speed of the engine. Shane O’Sullivan in the SOS blog site composed that structure with Bun seemed to”complete as the Enter key was still taking a trip back up-wards from carrying out the command. “Simply put, it’s quick. So are the other parts of Bun, like the server and package manager. Once again, having all the tools in one location and working quickly yields an evolved designer experience, which many designers will welcome.Take the bundler for a test drive Let’s take the Bun.js bundler for a test drive with a create-react-app. For this test, you’ll require Node and/or NPM set up. You can set up the create-react-app with the command: npm i-g create-react-app, or just use npx
, as we’ll do below. We of course also
require Bun.js, and we’ll require the latest version that includes the bundler(0.6.0+ ). There are a number of ways to install bun. You can use: npm:$npm i-g bun. Or, if you have it already set up with an older variation, ensure to update with$bun upgrade.Let’s produce
a new application by typing:$npx create-react-app bun-react. Then, switch to the brand-new directory site with $cd bun-react. Note that create-react-app will run npm set up for you automatically. If we were just using NPM, we could run the app in dev mode with $npm run start. Instead, let’s bundle it together and serve
it with Bun. To start, bundle the application with:$bun construct./ src/index. js– outdir./ develop. That will create a package of the application(with a default target of the browser) in the/ develop directory site.
Now, we need to develop an index.html page like the one shown here.Listing 1. Index.html with JavaScript and CSS included Note that your CSS file will be different from mine
depending upon the construct output. When you have the index in location, you can serve the application with: $ bunx serve build. Checking out localhost:3000 will now provide you the familiar create-react-app landing page.Execute the build with a script You can likewise use a script file to execute construct commands with the Bun API. The one shown in Listing 2 is the equivalent of the command-line
call we simply executed.Listing 2. Build script await Bun.build(entrypoints: [ ‘. )Bundling a server As the Bun
paperwork notes, you can frequently execute server-side code straight; however, bundling such code can
lower startup times. Moreover, the
advantages of doing so will compound in CI/CD scenarios.To bundle a server, you alter the target type to”bun “or “node,” depending on the runtime you are utilizing. Let’s create a simple Express server and run it with Bun.js. We’ll use the Hello World server shown in Listing 3. Noting 3. The Express server const reveal=require(‘express’
)const app = reveal()const port=3000 app.get(‘/’, (req, res )=> )app.listen (port,()= > p>
‘))Next, we utilize the following script to bundle the server.Listing 4. Bundling the server wait for Bun.build( .)This code outputs a complete server to./ out/index. js. You can run it with bun out/index. js and get the expected habits (“Hi World!”printed to the web browser at localhost:3000). Build a standalone executable The bundler consists of a very great power, to “put together”an application down to an executable target.We can take our Express server and make an executable with it by utilizing the– put together switch, as displayed in Noting 5. Noting 5.
Compile a standalone server
wait for Bun.build( out’, target: ‘bun’)
This will drop a server file into the current directory site which we can keep up:./ server. When you do this, you’ll get the very same server behavior. Pretty slick!Do more with Bun Let’s look at a few more of
Bun’s bundling functions. To start, we can have our bundled server (from Listing 3)output a text file to the browser.
Create a file in the working directory site, named” quote.txt, “and include some text to it.(I utilized”After silence that which
comes nearby to expressing the inexpressible is music.”)We can reference the file in the server as displayed in Listing 6. Noting 6. Outputting a text file to the web browser bun develop./ index.js– assemble– outfile server Now we can bundle the text file into our application with the command: $bun develop./ index.js– compile– outfile server. When you run the server now, you’ll see the contents of the quote.txt file output to the browser.Splitting Another important feature the Bun.js bundler supports is splitting. In essence, whenever you have 2 entry points in the application that both depend on the very same third package, you can instruct the bundler to break this out into a different chunk. You do this by setting the splitting property to true.We can see
this in action by duplicating the index.js file:$cp index.js index2.js
. Now, we have 2 files that both recommendation the quote.txt file.Next, create a build.js file like the
one in Listing 7. Noting 7. A construct file with splitting const reveal =require (‘ reveal’)const app= reveal() const port =3000 import contents from”./ quote.txt”; app.get (‘/’,(req, res)=> res.send (contents )
)app.listen(port,() => console.log (‘Example app listening on port$port ‘))This construct file sets splitting to real and includes both index.js and index2.js to the entrypoints. Now, we can run the build with:$bun build.js. The application will be output to/ develop and you’ll see three
files: index.js, index2.js, and chunk-8e53e696087e358a. js.This is a contrived example however in numerous circumstances, specifically on the front end, splitting is a crucial feature for lowering code bundle sizes. The browser can cache one variation of the bundle and all other code that depends on it will prevent having it included, and likewise avoid that trip to the server. When diligently utilized, code splitting is key to efficiency. The Bun bundler makes it dead simple to use.Plugins Bun uses a generic plugin format for both the runtime engine and the bundler. You can learn more about plugins here. For the bundler, you can add plugins as displayed in Listing 8, where we include a hypothetical YAML plugin. Listing 8. Plugin syntax wait for Bun.build(entrypoints: [.)The bundler likewise has controls for sourcemap generation, minification
, and “external”paths (resources not consisted of in final package). You can likewise personalize calling conventions with the calling property and fine-tune the root directory with the root property. The publicPath residential or commercial property enables you to define a root path for URLs, to handle things like images being hosted at a CDN.You can likewise define global variables that the bundler will replace with the worth given by the specify home, which works something like a macro.Conclusion Using the Bun.js bundler simply feels easy. It takes a general cleaner approach to bundling than earlier tools, and it applies the lessons gained from them.
No doubt, there are edge cases, gotchas, and wrinkles to be settled– both in the tool and for complex
or really custom-made build chains
. But the Bun.js group is working intensely on the codebase, and we can anticipate improvements over time. The tool’s peaks are its simpleness and the reality that it’s
part of an all-in-one toolset(bundler, packager, runtime), and the palpable speed of the engine. Entirely, you get a distinct feeling that you are using a next-generation tool. It’s most likely a good indicator of what we can expect to see from server-side JavaScript going forward: extensive, seamless, and quick. Copyright © 2023 IDG Communications, Inc. Source
