DEV Community

Salman Dev
Salman Dev

Posted on

Getting Started with Babel and SWC in Node.js

#javascript #node #swc #babel

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
Enter fullscreen mode Exit fullscreen mode

Install Dev Dependencies 

npm install --save-dev @babel/core @babel/cli @babel/node @babel/preset-env nodemon
Enter fullscreen mode Exit fullscreen mode

babel.config.json

Put this at the project root:

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

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

.swcrc

At the root:

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

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Use in package.json 

{
  "scripts": {
    "dev": "tsx watch src/app.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

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

More at https://tsx.is/

Further Reading

Top comments (0)