What is SWC?

The SWC Project is an open-source JavaScript/TypeScript compiler focused on speed, transforming ECMAScript 2015+ (ES6+) code into JavaScript that can be run on older browsers. It is written in Rust which makes it very fast.

Pros

Easy Configuration Consistency

SWC is very easy to configure compared to babel.js. Instead of having to download a bunch of plugins and extensions to set up babel to work the way you want it to, all you need to do is add an .swcrc file and toggle features on and off.

Speed

Arguably the key feature of SWC, it really is an extremely fast compiler that easily works 20 times faster than babel.

Cons

Small Community

Recently SWC has received more attention after NextJS added it to their build system but the community as a whole is barely learning how to use it in projects outside of NextJS. This makes it harder to find solutions to any issues you may run into whether they're in your compiler or your bundler. It also makes it harder to find plugins to help optimize builds even further.

Cannot execute in-place

A minor annoyance more than anything, the swc command cannot execute commands in-place so you cannot write a common Javascript file and then pass it through the compiler and expect to see it's output. You would need to build it first and then execute the build. The closest equivalent to being able to do this would be through ts-node by doing something like this:

ts-node --swc do-something.js

Working with it today

Today, SWC has a bundler in alpha. Because it's in alpha, I'm still staying away from it and preferring to just use the compiler on its own or with webpack depending on the needs of the project.

SWC Config

Ultimately, I believe the configuration that works best for me is this:

// .swcrc
{
  "$schema": "https://json.schemastore.org/swcrc",
  "module": {
    "type": "commonjs"
  },
  "env": {
    "targets": {
      "node": 18
    }
  },
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true,
      "dynamicImport": true,
      "privateMethod": false,
      "functionBind": false,
      "exportDefaultFrom": true,
      "exportNamespaceFrom": false,
      "decorators": false,
      "decoratorsBeforeExport": false,
      "topLevelAwait": false,
      "importMeta": false
    },
    "target": "es2015",
    "loose": false,
    "externalHelpers": true,
    "keepClassNames": false,
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    },
    "paths": {
      "~/*": ["./*"]
    },
    "baseUrl": "src"
  },
  "minify": true
}

This configuration will compile react JSX and also allow absolute imports from root via ~/ where the root is the src directory. Notice we are setting externalHelpers to true which requires adding SWC's helpers as a dependency.

What to install

This is what you would want to install to have this configuration work.

npm i @swc/core @swc/cli -D
npm i @swc/helpers

What's a project without proper linting?

We have to have proper linting with this configuration as well, this is what I like to use:

const prettierConfig = require('./.prettierrc');

module.exports = {
  extends: [
    'airbnb-base',
    'react-app',
    'plugin:jest/recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['jest'],
  rules: {
    'import/order': 0,
    'import/no-anonymous-default-export': 0,
    'import/no-import-module-exports': 0,
    'no-import-assign': 0,
    'no-underscore-dangle': 0,
    'prefer-regex-literals': 0,
    'class-methods-use-this': 0,
    'default-param-last': 0,
    'max-len': [
      'error',
      prettierConfig.printWidth,
      2,
      {
        ignoreUrls: true,
        ignoreComments: true,
        ignoreRegExpLiterals: true,
        ignoreStrings: true,
        ignoreTemplateLiterals: true,
      },
    ],
  },
  settings: {
    'import/resolver': {
      alias: {
        map: [['~', './src']],
        extensions: ['.js', '.jsx', '.json'],
      },
    },
  },
  parserOptions: {
    ecmaVersion: 2020,
  },
  env: {
    node: true,
    'jest/globals': true,
  },
};

Make sure to follow instructions on how to install airbnb-base's peer dependencies properly.

Conclusion

SWC is awesome and improves the things I personally care for the most: ease-of-use and speed. The few drawbacks it has today will soon be filled as the community grows into this awesome tool.