Introduction to SWC

SWC (Speedy Web Compiler) is a super-fast and highly efficient JavaScript/TypeScript compiler written in Rust. Designed to be an alternative to Babel, SWC can help you transform modern JavaScript and TypeScript code into backwards-compatible versions, thus improving performance.

Getting Started with SWC

Installing SWC is simple, and you can integrate it with your existing workflow easily.

  
  npm install -D @swc/core @swc/cli
  

Example APIs and Code Snippets

Basic Transformation

You can easily transform ES6+ syntax to ES5 using SWC:

  
  const swc = require('@swc/core');
  const output = swc.transformSync(`
    const greet = () => {
      console.log("Hello, SWC!");
    };
    greet();
  `, {
    jsc: {
      target: 'es5'
    }
  });
  console.log(output.code);
  

TypeScript Compilation

SWC can compile TypeScript files into JavaScript:

  
  const swc = require('@swc/core');
  const result = swc.transformSync(`
    const message: string = "Hello, TypeScript!";
    console.log(message);
  `, {
    jsc: {
      parser: {
        syntax: "typescript"
      },
      target: "es5"
    },
  });
  console.log(result.code);
  

React JSX Compilation

If you’re using JSX, SWC can convert it to JavaScript:

  
  const swc = require('@swc/core');
  const jsxCode = `
    const App = () => 
Hello, React!
;
  `;
  const output = swc.transformSync(jsxCode, {
    jsc: {
      parser: {
        syntax: 'ecmascript',
        jsx: true
      },
      target: 'es5'
    }
  });
  console.log(output.code);
  

Minification

SWC also provides code minification:

  
  const swc = require('@swc/core');
  const minifiedOutput = swc.transformSync(`
    function foo() {
      console.log("This is a test function.");
    }
  `, {
    minify: true,
    jsc: {
      target: 'es5'
    }
  });
  console.log(minifiedOutput.code);
  

Example App Using SWC

Let’s see an example Node.js application showcasing some of these capabilities:

  
  // Install necessary packages
  // npm install express @swc/core @swc/cli

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

  app.get('/', (req, res) => {
    // Sample code to be transformed and served
    const code = `
      import React from 'react';
      import ReactDOM from 'react-dom';

      const App = () => 
Hello, World!
;

      ReactDOM.render(, document.getElementById('root'));
    `;

    const output = swc.transformSync(code, {
      jsc: {
        parser: {
          syntax: 'ecmascript',
          jsx: true,
          dynamicImport: true
        },
        target: 'es5'
      },
      minify: true
    });

    // Write the transformed code to disk
    fs.writeFileSync('public/app.js', output.code);

    res.send(`
      
      
      
        
        
        
      
      
        

        
      
      
    `);
  });

  app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
  });
  

With this example, you can see how SWC can be integrated into a Node.js and React workflow to improve performance and streamline code transformation.

In Summary

SWC is a powerful tool that can help developers transform, compile, and optimize their JavaScript and TypeScript code with ease. Its Rust-based implementation offers remarkable speed improvements over other compilers, making it an excellent choice for modern web development.