Transpiler

transpiler는 source-to-source 컴파일러다.
js에서는 es6, es7등 최신 js spec을 범용적으로 지원되는 es5 로 변경하기위해 사용한다.

화살표함수 (es6) -> function 키워드

const greet = (name) => `Hello, ${name}!`;

변경 후

var greet = function(name) {
  return 'Hello, ' + name + '!';
};

대표적인 트랜스파일러는 Babel, tsc, Postcss

Bundler

각각의 이런 js 파일이 있다고 해보자.

// entry.js
import { sum } from './math';
console.log(sum(1, 2));  // Outputs: 3

// math.js
export const sum = (a, b) => a + b;

이 스크립트가 있는 프로젝트를 웹팩으로 번들링하면 이런 식의 결과물이 나온다.

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/math.js":
/*!*********************!*\
  !*** ./src/math.js ***!
  \*********************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "sum": () => /* binding */ sum
/* harmony export */ });
function sum(x, y) {
  return x + y;
}


/***/ }),

/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/***/ ((__unused_webpack_module, __unused_webpack_exports, __webpack_require__) => {

var _math = __webpack_require__(/*! ./math */ "./src/math.js");

console.log((0, _math.sum)(2, 3)); 


/***/ })

/******/ 	});
/************************************************************************/

번들링이라는 행위는 여러개의 js 파일을 하나로 묶어주는 역할을 한다.

번들링은 왜 할까 ?

• 성능: 스크립트를 개별적으로 가져오지 않고 한번의 HTTP 요청으로 가져온다.
• 종속성 관리: 종속성이 있는 코드를 먼저 실행하도록 결과를 내놓는다.
• asset: 이미지나 글꼴 같은 것들도 js 코드에서 호출할 수 있게 처리해준다.

대표적인 번들러는 Webpack, esbuild

etc

• Nextjs의 번들링 및 트랜스파일링, minify의 기능은 rust로 작성된 swc가 담당한다.
  - 아마 코드 스플리팅, 트리쉐이킹 등 빌드 툴로써의 여러 기능들을 swc가 모두 지원하는 듯 (아마도)
  - 빌드 후 결과물을 보면 webpack이 보이는 것으로 봐서는 webpack이 어디선가 쓰이는 듯 하다.
  - [[Nextjs 빌드 결과물에는 왜 webpack이 보일까 ?]]
• 많이 사용되는 Vite는 통합 빌드 도구로 여러가지 기능을 지원한다.
  - 배포 시 번들링은 Rollup, 사전 번들링은 esbuild를 사용한다.
  - 배포 시 번들링과 사전 번들링의 차이는 잘 모르겠다. 참고
  - 타입스크립트 컴파일링은 esbuild를 사용