[카카오테크 부트캠프] 트랜스파일러와 빌드 도구

트랜스파일러의 개념

트랜스파일러(Transpiler)는 한 프로그래밍 언어로 작성된 코드를 다른 프로그래밍 언어로 변환하는 도구입니다.

주로 최신 자바스크립트 기능을 지원하지 않는 브라우저에서도 사용할 수 있도록 변환하는 데 사용됩니다.

 

주요 트랜스파일러로 Babel 과 TypeScript 가 있습니다.

 

• Babel: 최신 JavaScript 문법을 구형 브라우저에서도 동작할 수 있는 코드로 변환합니다.
• TypeScript: 정적 타입 검사 기능을 제공하는 TypeScript 코드를 JavaScript 코드로 변환합니다.

빌드 도구

빌드 도구는 프로젝트의 소스 코드를 배포 가능한 형태로 변환하고, 여러 작업을 자동화합니다.

주로 코드 번들링, 파일 압축, 트랜스파일링 등을 수행합니다.

주요 빌드 도구로 Webpack 과 Rollup 이 있습니다.

Webpack으로 빌드하기

Webpack은 모듈 번들러로서, 여러 파일을 하나의 번들 파일로 결합합니다.

트랜스파일링, CSS 전처리, 이미지 최적화 등을 수행할 수 있습니다.

const path = require("path");
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
          use: {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
    .....
};

Rollup으로 빌드하기

주로 라이브러리나 패키지의 번들링에 사용되며, 트리 쉐이킹(tree shaking) 기능을 지원하여 사용하지 않는 코드를 자동으로 제거합니다.

즉, 번들 크기를 최소화하여 성능을 개선할 수 있습니다.

import { terser } from "rollup-plugin-terser";

export default {
  input: "src/main.js",
  output: {
    file: "dist/bundle.js",
    format: "umd",
    name: "MyLibrary",
  },
  plugins: [terser()],
};