Log in
product

Bundling Javascript in Swift projects using ESBuild

SwiftyESBuild: Streamlining Swift Web Bundling and JavaScript Integration for Effortless Development.

In an ongoing effort to streamline the process of building web apps and sites with Swift, I am delighted to introduce a new Swift Package: SwiftyESBuild. While modern browsers are capable of resolving and downloading ES module graphs, many projects still resort to bundling for various reasons, such as optimizing loading speed and supporting modern JavaScript features that may not be compatible with certain browsers. Nowadays, there is an abundance of tools available to assist with this task, but one tool, in particular, has gained significant popularity and serves as a foundational block for other tools like Vite, ESBuild.

Communities like JavaScript's or Ruby's have already discovered a seamless installation path (e.g. jsbundling-rails) that doesn't require the installation of additional runtimes like Node. Unfortunately, the Swift community lacks a similar streamlined method to integrate it into projects powered by frameworks like Vapor or Publish. This is where SwiftyESBuild comes in. By adding SwiftyESBuild as a dependency through a Swift Package, you can effortlessly incorporate the tool into your project. With just a few lines of code, you can use it to generate production-ready artifacts or keep it running in the background, automatically monitoring for any file changes.

Getting started

To get started with SwiftyESBuild, all you have to do is add the dependency to your project:

.package(url: "https://github.com/tuist/SwiftyESBuild.git", .upToNextMinor(from: "0.1.0"))

After adding the dependency, you'll need to create an instance of SwiftyESBuild:

let esbuild = SwiftyESBuild(version: .latest)

If you don't pass any arguments, it defaults to the latest version in the system's default temporary directory. If you're working in a team, we recommend fixing the version to minimize non-determinism across environments.

Running ESBuild

Running ESBuild is as easy as invoking the run function on the esbuild instance, passing the options you want to use:

import TSCBasic // AbsolutePath let entryPointPath = AbsolutePath(validating: "/project/index.js") let outputBundlePath = AbsolutePath(validating: "/projects/build/index.js") try await esbuild.run(entryPoint: entryPointPath, options: .bundle, .outfile(outputBundlePath))

Check out SwiftyESBuild.RunOption to know the available options. Note that not all the options supported by ESBuild are available, which is why we've added an .arguments option that allows you to pass any argument to the ESBuild CLI.

Next steps

We'll add some examples for how to use the tool with frameworks like Vapor and Publish. Additionally, we plan to build a Swift Package to integrate Orogene into Swift projects. This will allow developers to resolve and pull NPM packages without having to install Node in their system. It's the last missing step to have a fully integrated JavaScript bundling experience in Swift projects without requiring Node installation.

Supercharge your Swift app development

Get started

You might also like

Debugging the communication between Xcode and XCBBuildService
Learn how to debug the communication between Xcode and XCBBuildService with XCBLoggingBuildService.
Interview with Kamil Pyć - With Bazel we were able to reduce build times by 70% on clean builds
In this interview, we talk with Kamil Pyć, Senior Mobile Developer at Allegro. Allegro is one of the few companies that have undertaken replacing Xcode's build system with Bazel, and that led them to an improvement in build times of roughly 95%. In this interview, Kamil shares more about Bazel's adoption, and some other insights about their project and teams.
Announcing our first Tuist ambassadors
We are excited to introduce our first Tuist ambassadors.