Rust-based platform for the Web – SWC

Node.js

# Node.js 버전 확인
➜ node -v
v20.9.0

# v20.9.0 가 설치되어 있지 않다면
➜ nvm install 20.9.0

# v20.9.0 를 사용하고 있지 않다면
➜ nvm use 20.9.0

# Node.js 버전 다시 확인
➜ node -v
v20.9.0

npm

# npm 버전 확인
➜ npm -v
10.2.1

# 최신 버전 npm 으로 업그레이드 
➜ npm i [email protected] -g

# npm 버전 다시 확인
➜ npm -v
10.2.1

pnpm

# pnpm 설치 확인 및 버전 확인
➜ pnpm -v
8.10.0

# 최신 버전 pnpm 으로 업그레이드 
➜ npm i [email protected] -g

# pnpm 설치 다시 확인 및 버전 다시 확인
➜ pnpm -v
8.10.0

Create Project

➜ mkdir swc-example

➜ cd swc-example

➜ corepack enable

➜ pnpm init

➜ corepack use [email protected]

➜ pnpm add @swc/cli @swc/core -D

Compile

// swc-example/src/arrow.js

export const test = () => {
  const hello = "world";
  const world = "unused";

  console.log(hello, "test");
};

➜ pnpm exec swc src/arrow.js
Successfully compiled 1 file with swc.
export var test = function() {
    var hello = "world";
    var world = "unused";
    console.log(hello, "test");
};

browserslist 활용하기

// swc-example/.swcrc
{
  "$schema": "<http://json.schemastore.org/swcrc>",
  "env": {
    "targets": "last 1 Chrome version"
  }
}

➜ pnpm exec swc src/arrow.js
Successfully compiled 1 file with swc.
export const test = ()=>{
    const hello = "world";
    const world = "unused";
    console.log(hello, "test");
};

// swc-example/.swcrc
{
  "$schema": "<http://json.schemastore.org/swcrc>",
  "env": {
    "targets": "last 100 Chrome versions"
  }
}

➜ pnpm exec swc src/arrow.js
Successfully compiled 1 file with swc.
export var test = function() {
    var hello = "world";
    var world = "unused";
    console.log(hello, "test");
};

minify

// swc-example/.swcrc
{
  "$schema": "<http://json.schemastore.org/swcrc>",
  "env": {
    "targets": "last 100 Chrome versions"
  },
  "minify": true
}

➜ pnpm exec swc src/arrow.js
Successfully compiled 1 file with swc.
export var test=function(){var hello="world";var world="unused";console.log(hello,"test")};