How to Use ESBuild to Export Multiple JavaScript Module Formats

[00:00 - 00:07] There are cases when we will want to export multiple module types. And Scroller will be exposing the CommonJS and ECMAScript module formats.

[00:08 - 00:22] This allows consumers of Scroller to use older versions of Node.js to import CommonJS, or newer versions of Node to import the ECMAScript modules. This will allow consumers of Scroller which are stuck to older versions of Bund lers to take advantage of CommonJS formats.

[00:23 - 00:32] For the consumers using modern Bundlers, we'll be exporting ECMAScript modules. We first set up ESBuild using a package.json script that runs ESBuild's CLI tools.

[00:33 - 00:44] To achieve multiple builds, we'll need to create our own build file we're going to call it ESBuild.js. At the root of our Scroller project, create a new file called ESBuild.js.

[00:45 - 00:54] Inside ESBuild.js, we'll import the ESBuild library. Then call the build command using similar parameters to our build package.json script.

[00:55 - 01:07] You may notice we're using the require syntax to import ESBuild. Node.js requires files to opt in to using ECMAScript modules by using a .mjs extension, or update parameters in the package.json file.

[01:08 - 01:17] To avoid having to configure Node.js, we'll stick to Common.js formats for any build tool configuration. The code above should look similar to our package.json build script.

[01:18 - 01:25] We tell ESBuild how to build our code found in source/index.js as an ESM module . Then put the bundle code into a disk directory.

[01:26 - 01:34] Update an ESBuild to export multiple bundles as a matter of running the build for each module type. Don't worry, ESBuild is extremely fast, so running the build twice won't be a huge performance hit.

[01:35 - 01:41] We'll extract similar functionality into a common object called default config. Then run the build twice for each format.

[01:42 - 01:51] Three things have changed from a previous config to make multiple modules exported. As mentioned, we move similar properties into a common object that gets spread into the final build object.

[01:52 - 02:01] It becomes a maintainability problem if we have a copy of the same configuration values in multiple spots. If values change, then we need to remember to update everywhere that the configuration is used.

[02:02 - 02:08] Second, we switch from an outdoor to out file for each build. This is because ESBuild will output an index.js for each build.

[02:09 - 02:15] Since we're running more than one build, both modules will overwrite each other once they're built. We need to give a unique name to each file.

[02:16 - 02:25] ES modules has a convention of using the .mjs extension. We'll call the esm module index.mjs and the common.js module just index.js.

[02:26 - 02:32] Finally, we're calling build twice for ESBuild. This runs ESBuild twice, given the common.js and ECMAScript modules output.

[02:33 - 02:40] Finally, to run esbuild.js, we'll update our package.json file to build using it. Open up package.json and find the build script command.

[02:41 - 02:50] Replace the value of a build to use no.js to run esbuild.js. Run yarnBuild from the root of the scroller directory to build the two separate modules in the disk directory.