[ 살펴보기 ] SWC

SWC는 babel과 같은 transpiler 기능을 제공지만 Rust 기반 tool이기에 babel 보다 성능이 우수하다.

또한 configuration 설정을 통해 별도의 추가 pacakge 설치 없이 typescript, jsx transpile을 지원한다. 아래의 예제를 통해 SWC가 제공하는 기능을 대략적으로 살펴보자.

우선 필요한 package를 설치한다.

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

그리고 swc 설정파일인 .swcrc 파일을 project root에 생성해준다. 우선 typescript transpile 테스트를 위해 설정 파일은 아래와 같이 추가한다.

.swcrc

{
  "jsc": {
    "target": "es2015",
    "parser": {
      "syntax": "typescript"
    }
  }
}

테스트에 사용된 project structure는 다음과 같다.

...
tsconfig.json
package.json
src
    main.ts
    /utils
        calculate.ts

이제 다음 command를 통해 src directory에 존재하는 typescript를 javascript file로 transpile해보자.

npx swc ./src -d ./dist

위의 command를 실행해보면 src directory에 있던 typescript file들이 정상적으로 dist directroy로 transpile된 것을 확인할 수 있다.

src/utils/caculate.ts

export const sum = (firstNum: number, secondNum: number) => {
  return firstNum + secondNum;
};

dist/utils/calculate.js

export const sum = (firstNum, secondNum)=>{
    return firstNum + secondNum;
};

swc command를 통해 transpile을 실행할 때 사용할 수 있는 option은 다음과 같다.

-f, --filename : transfile을 수행할 file 이름을 지정한다.
```
  npx swc -f main.ts
```
--config-file : transpile을 수행할 때 적용할 configuration file을 설정한다.
```
  npx swc -f main.ts --config-file
```
--ignore : transpile에서 제외할 파일 또는 directroy를 설정한다. 다음 예제는 transpile을 수행할 때 ./src/utils directory는 제외한다.
```
  npx swc ./src -d ./dist --ignore ./src/utils
```
--only : 특정 파일 또는 directory에만 transpile을 수행하고 싶을 때 사용할 수 있다. 다음 예제는 transpile을 수행할 때 src/utils directroy만 transpile 대상에 포함된다.
```
  npx swc ./src -d ./dist --only ./src/utils
```
--out-file, -o : transpile 대상이 되는 모든 input file을 지정한 output file에 transpile한다. 다음 예제는 src directory에 있는 모든 파일의 transpile 결과를 dist/app.js file에 담는다.
```
  npx swc ./src -o ./dist/app.js
```
--out-dir, -d : transpile되어 나오는 output file을 담을 directory를 지정한다.
```
  npx swc ./src -d ./dist
```
--copy-files : css와 같은 transpile 대상이 아닌 파일을 output에서 제외 시키지 않고 그대로 copy해서 output directory에 포함시킨다.
```
  npx swc ./src -d ./dist --copy-files
```
--include-dotfiles : transpile output 결과에 .env와 같은 dot file도 포함 시킬 것인지 설정한다. 해당 옵션을 사용하려면 --copy-files option 역시 설정되어 있어야 한다.
```
  npx swc ./src -d ./dist --copy-files --include-dotfiles
```

위에서 소개한 options외에도 사용할 수 있는 options이 존재하며 전체 option list는 documentation을 통해 확인할 수 있다. ( Reference - swc/cli options )

React with Typescript

React JSX syntax 역시 별도의 추가 package없이 transpile할 수 있다. 테스트를 위해 react, react-dom을 설치하고 프로젝트 structure는 다음과 같다고 가정해보자.

...
tsconfig.json
package.json
.swcrc
src
    App.tsx
    index.tsx

src/App.tsx

const App = () => {
  const buttonLabel: string = "App Button";
  const handleClick = () => {
    console.log(" ::: handle click ::: ");
  };
  return <button onClick={handleClick}>{buttonLabel}</button>;
};

export default App;

src/index.tsx

import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root") as HTMLElement;
const root = createRoot(container);
root.render(<App />);

.swcrc

{
  "jsc": {
    "target": "es2015",
    "parser": {
      "syntax": "typescript",
      "tsx": true
    }
  }
}

package.json

{
  ...
  "scripts": {
    "build": "swc ./src -d ./dist"
  }
}

위의 설정 사항을 준비하고 npm run build command를 통해 transpile을 해보면 아래와 같이 jsx syntax가 정상적으로 transpile된 것을 확인할 수 있다.

src/App.tsx ( transpile 전 )

const App = () => {
  const buttonLabel: string = "App Button";
  const handleClick = () => {
    console.log(" ::: handle click ::: ");
  };
  return (
      <button onClick={handleClick}>{buttonLabel}</button>
  );
};

export default App;

dist/App.js ( transpile 후 )

const App = ()=>{
    const buttonLabel = "App Button";
    const handleClick = ()=>{
        console.log(" ::: handle click ::: ");
    };
    return /*#__PURE__*/ React.createElement("button", {
        onClick: handleClick
    }, buttonLabel);
};
export default App;

Babel과 마찬가지로 SWC은 transpile 작업을 수행하는 tool이므로 실제 프로젝트는 webpack이나 rollup과 같은 bundler와 함께 구축하여 사용한다. SWC 자체로 bundle 기능 역시 제공하는 것으로 보이나 해당 기능은 아직 개발이 진행 중이기도 하고 활발하게 개발이 진행되는 기능은 아니기에 실제 프로젝트에선 추천되진 않는다.

( Reference - Bundling (swcpack) )

Compile options

.swcrc파일을 통해 설정할 수 있는 configuration option은 다음과 같다.

sourceMaps : transpile output을 생성할 때 source map을 함께 생성할 것인지 여부를 설정한다.
```
  {
    "sourceMaps": true
  }
```
minify : transpile output을 minify mode로 생성할 것인지 여부를 설정한다.
```
  {
    "minify":true
  }
```
jsx.target : input file을 transpile할 때 어떤 version의 ecmascript로 transpile할지 설정할 수 있다.
```
  {
    "jsc": {
      "target": "es2016",
    }
  }
```
jsx.parser.syntax : transpile하는 대상이 typescript인지 일반 javascript ( ecmascript )인지 설정한다. transpile하는 대상에 typescript가 있으면 typescript로 설정해준다.
```
  {
    "jsc": {
      "parser": {
        "syntax": "typescript"
      }
    }
  }
```
env.targets : transpile output이 지원되어야 하는 환경을 설정할 수 있다. 만약 jsc.target이 이미 설정되어 있다면 env.targets은 사용할 수 없다. 아래 예제는 Chrome version 50과 그 이상 version을 지원할 수 있도록 output을 생성한다.
```
  {
    "jsc": {
      "parser": {
        "syntax": "typescript"
      }
    },
    "env": {
      "targets": "Chrome >= 50"
    }
  }
```

위에서 살펴본 options외에 설정할 수 있는 모든 option은 documentationd을 통해 확인할 수 있다. ( Documentation - Compilation ) swc를 통해 compile을 수행할 때 default로 적용되는 compile option은 다음과 같다.

{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": false,
      "dynamicImport": false,
      "privateMethod": false,
      "functionBind": false,
      "exportDefaultFrom": false,
      "exportNamespaceFrom": false,
      "decorators": false,
      "decoratorsBeforeExport": false,
      "topLevelAwait": false,
      "importMeta": false
    },
    "transform": null,
    "target": "es5",
    "loose": false,
    "externalHelpers": false,
    // Requires v1.2.50 or upper and requires target to be es2016 or upper.
    "keepClassNames": false
  },
  "minify": false
}