How to transpile JavaScript with SWC

SWC, or Speedy Web Compiler, is a Rust-based compiler that offers an efficient way to transpile JavaScript and TypeScript code. It’s designed to be a drop-in replacement for Babel, but with a focus on speed and performance. One of the key advantages of SWC is its ability to handle large codebases much faster than traditional tools, thanks to its multi-threaded architecture.

Another notable feature of SWC is its support for modern JavaScript and TypeScript features. This means you can write code using the latest language constructs without worrying about compatibility issues in older environments. Furthermore, SWC provides built-in optimizations that can significantly reduce bundle sizes, which is essential for improving load times in production environments.

When it comes to configuration, SWC employs a simpler setup process. You can easily integrate it into your existing projects without having to overhaul your entire build system. With a simple configuration file, you can tailor SWC to meet your specific needs, whether you are working with React, Vue, or plain JavaScript.

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "decorators": true
    },
    "target": "es2020"
  },
  "module": {
    "type": "es6"
  }
}

One of the compelling advantages of using SWC is its compatibility with existing tooling. You can seamlessly integrate it with popular package managers like npm and Yarn. This compatibility extends to other tools in the JavaScript ecosystem, allowing you to maintain your workflow with minimal disruption.

When you compare SWC’s performance with that of Babel, the differences become strikingly clear. Benchmarks show that SWC can compile code up to several times faster than Babel, especially in larger projects. This speed improvement can lead to a more efficient development cycle, saving precious time during the build process.

Additionally, SWC’s focus on providing a solid developer experience cannot be overstated. The error messages are clear and simple, which helps in quickly identifying and fixing issues in your code. That is particularly beneficial for teams working in agile environments where rapid iteration is key.

const example = async () => {
  const data = await fetch('/api/data');
  const json = await data.json();
  console.log(json);
};

Furthermore, SWC supports source maps, which are essential for debugging. This means that when you transpile your code, you can still trace errors back to the original source. Maintaining a clean debugging experience especially important, especially when working with complex applications where tracking down issues can become a chore.

As the ecosystem evolves, SWC continues to gain traction, with an active community contributing to its development. This community support ensures that the tool remains up-to-date with the latest advancements in JavaScript and TypeScript, making it a reliable choice for developers looking to future-proof their projects.

Setting up your environment for SWC

To get started with SWC in your project, you’ll first need to install the necessary packages. For simpler use cases, the primary package is @swc/cli, which provides command-line access to SWC’s compiler functionality. Alongside this, you typically install @swc/core, the core library that processes the JavaScript and TypeScript files.

npm install --save-dev @swc/core @swc/cli

Once installed, adding a configuration file is the next step. SWC looks for .swcrc in the root of your project by default. This JSON file drives the behavior of the compiler. Here’s a minimalist example that targets modern browsers and transpiles TypeScript:

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": false
    },
    "target": "es2019"
  },
  "module": {
    "type": "commonjs"
  }
}

While the CLI usage is handy for quick tasks, most projects integrate SWC into their build pipelines for automation. For instance, if you’re using Node.js for server-side code written in TypeScript, you can add an npm script to transpile your source files before running them:

"scripts": {
  "build": "swc src -d lib"
}

This command tells SWC to compile everything in src and output the resulting JavaScript to the lib directory, preserving the folder structure. This approach is far more lightweight compared to invoking larger build tools. If you’re integrating SWC into a bundler like Webpack, SWC provides a loader that can improve your build times dramatically.

To add SWC to a Webpack project, install the loader:

npm install --save-dev swc-loader @swc/core

Then update your Webpack configuration to use it for JavaScript and TypeScript files:

module.exports = {
  module: {
    rules: [
      {
        test: /.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true
              },
              target: 'es2019'
            }
          }
        }
      }
    ]
  }
};

If you prefer to script your compilation programmatically, the @swc/core API provides a simpler interface:

const swc = require('@swc/core');
const fs = require('fs');

const inputCode = fs.readFileSync('src/app.ts', 'utf8');

swc.transform(inputCode, {
  filename: 'app.ts',
  jsc: {
    parser: {
      syntax: 'typescript',
      tsx: false
    },
    target: 'es2019'
  }
}).then(output => {
  fs.writeFileSync('lib/app.js', output.code);
});

This call returns a promise that resolves with the transpiled code, letting you plug SWC into any custom build scripts or tooling you might have. The flexibility here means you’re not locked into a rigid setup; you can automate or customize your workflow as your project demands.

Keep in mind the ecosystem is actively evolving. For example, SWC recently added experimental support for JSX automatic runtime and React 18 features, so staying current with the package versions and release notes will help you leverage new capabilities without delay. Setting up SWC properly means you reap the benefits of speed and modern standards without the hassle.

Transpiling JavaScript code with SWC

To actually transpile your code with SWC from the command line, use the swc CLI command followed by the input directory or files and specify the output directory using the -d option. For example:

npx swc src -d dist

This command compiles all compatible files in the src folder and writes the output into dist, preserving subdirectory structure. It respects your .swcrc config by default, so any parser, target, or module changes are applied automatically.

If you want to transpile single files explicitly without a config, you can pass options directly in the CLI. For instance, to compile a plain JavaScript file to a specific ES target:

npx swc input.js --out-file output.js --jsc-target es2018 --no-swcrc

Here, --no-swcrc disables reading from configuration files, letting you override everything inline. This flexibility is useful for one-off transpilation or scripting in CI pipelines.

When your project grows, speed becomes critical. You can enable parallelism by passing the --parallel flag, letting SWC spawn multiple workers to speed up batch compilation:

npx swc src -d dist --parallel

This tends to cut down compile times considerably on multi-core machines, especially in larger projects.

For cases where you want to integrate source map support, add --source-maps to your CLI command:

npx swc src -d dist --source-maps

This produces separate map files for each transpiled output, allowing debugging tools to map back error lines accurately to the original source code.

In programmatic scenarios, SWC’s transformFile method can handle input from disk directly. Here’s a concise example that transpiles a file with TypeScript syntax support:

const swc = require('@swc/core');

swc.transformFile('src/component.tsx', {
  jsc: {
    parser: {
      syntax: 'typescript',
      tsx: true
    },
    target: 'es2019'
  },
  sourceMaps: true
}).then(result => {
  console.log(result.code);
  // result.map contains the source map
});

SWC also supports minification out of the box, which can be triggered by setting the minify option to true. This allows you to at the same time transpile and reduce your JavaScript bundle size:

npx swc src -d dist --minify

Or programmatically:

swc.transformFile('src/index.js', {
  minify: true,
  jsc: {
    parser: {
      syntax: 'ecmascript'
    },
    target: 'es5'
  }
}).then(({ code }) => {
  console.log(code);
});

Advanced users can fine-tune minification by configuring the minify object with options such as compress, mangle, and more.

While SWC’s simplicity is a virtue, complex projects sometimes need plugin support or custom transforms. Although SWC lacks Babel’s full plugin ecosystem, it does provide an experimental plugin architecture to augment or modify the AST during compilation. This can be quite powerful but is still maturing.

Here’s a minimal example of invoking a plugin programmatically:

const swc = require('@swc/core');

async function customTransform() {
  const input = 
    const a = 1;
    console.log(a);
  ;

  const output = await swc.transform(input, {
    plugin: require('./my-swc-plugin.js'),
    jsc: {
      parser: {
        syntax: 'ecmascript',
      },
      target: 'es5',
    },
  });

  console.log(output.code);
}

customTransform();

Such plugin-driven workflows allow inserting custom transformations tailored exactly to your project’s needs, though that is less common than using the config and loader options.