Convert PDF.js to UMD Format Automatically: Use Babel and Shell Script for Legacy Browser Compatibility

If you've used PDF.js in JavaScript projects, you might have noticed the pdfjs-dist package provides files in ES6 module format (.mjs). But what if your project needs UMD-compatible .js files instead?
In this guide, I'll show you how to automatically transpile PDF.js from .mjs to UMD using Babel—no manual conversion required.

---

Why Use UMD Instead of ES6 Modules for PDF.js Integration?

Before we dive in, let’s clarify the difference:

ES6 Modules (.mjs)

• Modern JavaScript standard
• Works natively in newer browsers and Node.js
• Uses import/export syntax

UMD (.js)

• Works in older browsers, Node.js, and AMD loaders
• Better for legacy projects or bundlers that don’t support ES6

If your environment doesn’t support ES6 modules, UMD is the way to go.

See how module formats differ →

---

How to Use Babel to Transpile PDF.js from ES6 Modules to UMD Format

Instead of searching for pre-built UMD files (which may not exist), we’ll use Babel to convert them automatically.

Step 1:Install Babel and Required Plugins for UMD Conversion

First, install these globally (or locally in your project):

Copynpm install --global @babel/cli @babel/preset-env @babel/plugin-transform-modules-umd

• @babel/cli → Runs Babel from the command line
• @babel/preset-env → Converts modern JS to compatible code
• @babel/plugin-transform-modules-umd → Converts modules to UMD format

---

For more on Babel configurations, check out the official Babel docs.

Step 2: Create a Shell Script to Transpile PDF.js from .mjs to UMD

Save this as transpile_pdfjs.sh:

Copy#!/bin/bash

# Check if Babel is installed
if ! command -v npx &> /dev/null; then
  echo " Error: Babel (via npx) is required. Install Node.js first."
  exit 1
fi

# Define source (.mjs) and destination (UMD .js) folders
SRC_DIR="pdfjs-dist/build"
DEST_DIR="pdfjs-dist/umd"

# Create the output folder if missing
mkdir -p "$DEST_DIR"

# Run Babel to convert .mjs → UMD .js
npx babel "$SRC_DIR" \
  --out-dir "$DEST_DIR" \
  --extensions ".mjs" \
  --ignore "**/*.min.mjs" \
  --presets @babel/preset-env \
  --plugins @babel/plugin-transform-modules-umd

# Check if successful
if [ $? -eq 0 ]; then
  echo " Success! UMD files saved in: $DEST_DIR"
else
  echo " Transpilation failed. Check for errors above."
fi

---

Merge multiple PDFs into a single file effortlessly with our Free PDF Merger and Split large PDFs into smaller, manageable documents using our Free PDF Splitter.

Step 3:Run Your Babel Transpilation Script for PDF.js

1. Make it executable:

   Copychmod +x transpile_pdfjs.sh
   

2. Execute it:

   Copy./transpile_pdfjs.sh
   

---

What the PDF.js Babel Transpilation Script Actually Does

✔ Checks for Babel → Ensures the tool is installed.
✔ Creates a umd folder → Stores the converted .js files.
✔ Transpiles .mjs → UMD → Uses Babel to convert module formats.
✔ Skips minified files → Avoids re-processing .min.mjs.

Want to automate your JS build process further? Check out this BrowserStack.

---

Final Thoughts: Make PDF.js Compatible with All Browsers Using UMD Format

Now you can use PDF.js in any environment, even if it doesn’t support ES6 modules!

🔹 No manual conversion → Fully automated.
🔹 Works with the latest pdfjs-dist → Always up-to-date.
🔹 Reusable script → Run it anytime you update PDF.js.

And if you want to bundle your PDF.js output, Rollup’s guide to output formats is a great next read.
Next time you need UMD-compatible PDF.js, just run this script and you’re done!
Simplify the deployment of your Node.js applications Check out this nife.io.