Getting Started with Babel and SWC in Node.js

Salman Dev — Tue, 06 Jan 2026 12:17:44 +0000

Modern JavaScript has features (arrow functions, optional chaining, ESM, class fields) that Node.js environment or browser environments doesn’t always support natively across all versions. To write future-ready code without worrying about runtime/browsers support, we use transpilers that convert modern JS into backward-compatible output. The industry standard has been Babel, but recently SWC — a Rust-based compiler has gained traction because of its speed.

This guide shows how to set up both in an Express project, with straight-to-the-point config and scripts.

What Babel and SWC Are

Babel is a JavaScript compiler that rewrites ESNext/modern syntax into code that can run on older Node.js versions. It’s extremely flexible and has a huge plugin ecosystem. You can customize it to support JSX, TypeScript, and more. However, Babel is written in JavaScript itself, which can lead to slower build times for large projects.

SWC (Speedy Web Compiler) does the same job — transpiling modern JS/TS — but is written in Rust, so it’s much faster on builds and dev reloads. Benchmarks show dramatic speed improvements over Babel

1) Setting Up Babel in an Express Project

Assume this basic layout:

my-app/
├─ src/
│  └─ app.js
├─ dist/
└─ package.json

Install Dev Dependencies

npm install --save-dev @babel/core @babel/cli @babel/node @babel/preset-env nodemon

`babel.config.json`

Put this at the project root:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

This tells Babel to target the current Node version. You can find more information about the configuration options in the Babel documentation.

`package.json` Scripts

{
  "scripts": {
    "build": "babel src --copy-files --no-copy-ignored --delete-dir-on-start --out-dir dist",
    "start": "node dist/app.js",
    "dev": "nodemon -x babel-node src/app.js --ext js,graphql"
  }
}

How these work

build:
- --copy-files: Copies non-JS files to the output directory(i.e. .graphql, .json, .html).
- --no-copy-ignored: Prevents copying of ignored files.
- --delete-dir-on-start: Cleans the output directory before starting the build.
- --out-dir dist: Specifies the output directory.
dev: Uses babel-node for on-the-fly transpile with nodemon watching js and .graphql files.

You can find more information about the cli options in the Babel CLI documentation.

2) Setting Up SWC in an Express Project

SWC is often a better fit for fast iteration and build performance.

Install Dev Dependencies

npm install --save-dev @swc/core @swc/cli @swc-node/register nodemon

`.swcrc`

At the root:

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": false
    },
    "target": "es2022"
  },
  "module": {
    "type": "commonjs"
  }
}

This tells SWC how to parse and output code — in this case, modern JS to a CommonJS target. For more information on SWC configuration, check the SWC documentation.

`package.json` Scripts

{
  "scripts": {
    "build": "swc src -d dist --strip-leading-paths --copy-files",
    "start": "node dist/app.js",
    "dev": "nodemon -r @swc-node/register src/app.js --ext js,graphql"
  }
}

Command meanings

build: SWC compiles src straight into dist. --strip-leading-paths keeps the output clean, and --copy-files brings through non-JS assets.
start: Runs the compiled output normally.
dev: Uses SWC’s Node hook (@swc-node/register) so you don’t need a separate build step during development.

Because SWC is Rust-based and optimized for speed, compile times are generally much lower than Babel’s.

Bonus: `tsx` — Zero Config Runner for Dev

If you want to run code directly without separate build steps or config files, try tsx.

What `tsx` Is

tsx lets you execute JS/TS files with support for modern syntax right away — no Babel or SWC needed for development. It uses esbuild under the hood and is ideal for quick iteration.

Install

npm install --save-dev tsx

Use in `package.json`

{
  "scripts": {
    "dev": "tsx watch src/app.js"
  }
}

tsx watch watches files and reloads automatically — a simple alternative to heavier toolchains.

More at https://tsx.is/

DEV Community: Salman Dev

Getting Started with Babel and SWC in Node.js

What Babel and SWC Are

1) Setting Up Babel in an Express Project

Install Dev Dependencies

`babel.config.json`

`package.json` Scripts

2) Setting Up SWC in an Express Project

Install Dev Dependencies

`.swcrc`

`package.json` Scripts

Bonus: `tsx` — Zero Config Runner for Dev

What `tsx` Is

Install

Use in `package.json`

Further Reading

DEV Community: Salman Dev

Getting Started with Babel and SWC in Node.js

What Babel and SWC Are

1) Setting Up Babel in an Express Project

Install Dev Dependencies

babel.config.json

package.json Scripts

2) Setting Up SWC in an Express Project

Install Dev Dependencies

.swcrc

package.json Scripts

Bonus: tsx — Zero Config Runner for Dev

What tsx Is

Install

Use in package.json

Further Reading

`babel.config.json`

`package.json` Scripts

`.swcrc`

`package.json` Scripts

Bonus: `tsx` — Zero Config Runner for Dev

What `tsx` Is

Use in `package.json`