Recent posts

1 post tagged with "es6"

View All Tags

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

Nida Sahar

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?#

Comparison chart of ES6 Modules vs UMD format for PDF.js compatibility in different environments

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#

Diagram showing Babel transforming ES6 module PDF.js into UMD for browser compatibility

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):

npm 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:

#!/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:

    chmod +x transpile_pdfjs.sh

  2. Execute it:

    ./transpile_pdfjs.sh

What the PDF.js Babel Transpilation Script Actually Does#

Visualization of JavaScript code automation using Babel for UMD conversion of PDF.js modules

✔ 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.