아니요. JSX는 여기 없는 파서가 필요합니다. 토큰 수준에서 ` `는 비교 연산과 구분되지 않고, `Map `를 처리하는 제네릭 추측이 이미 짐작으로 할 수 있는 한계입니다. `.tsx` 파일에는 Prettier를 쓰세요.

자바스크립트 정렬·압축

JavaScript Beautifier & Minifier

자바스크립트·타입스크립트의 주석과 공백만 지워 압축하고, 한 줄로 뭉친 번들을 다시 들여써서 읽을 수 있게 만듭니다. 이름을 바꾸거나 구문을 다시 쓰지는 않습니다.

압축된 JavaScript·TypeScript를 읽을 수 있게 펼치고, 반대로 주석과 공백을 지워 작게 만들기도 합니다. 파서가 아니라 토크나이저 위에 지었고, 그 경계가 이 도구의 솔직한 부분입니다. 이름을 바꾸지 않고, 식을 다시 쓰지 않고, 문자열·템플릿·정규식 안은 건드리지 않습니다.

🔒 브라우저 안에서만 처리javascriptformatminifybeautify

모드

들여쓰기

} else { 를 한 줄에

빈 줄 유지

JavaScript · TypeScript 입력

.js / .ts 파일 놓기

이 탭 안에서만 읽습니다. 어디에도 올라가지 않습니다.

정렬 결과

// Code squashed onto one line, or with the indentation all over the place
const items = [{ id: 1, name: "Kim Jiwon" }, { id: 2, name: "Lee Seojun" }];
function total(xs) {
  let sum = 0;
  for (const x of xs) {
    sum += x.id
  }
  return sum
}
const re = /\/api\/v1/g;
const path = "/api/v1/users".replace(re, "/v2")
export const summary = `${items.length} items, total ${total(items)}`
if (path.includes("v2")) {
  console.log(summary)
} else {
  throw new Error("that is a different path")
}

토큰

109

줄

솔직하게: 이건 파서가 아니라 토크나이저입니다

· 토크나이저는 정규식 리터럴과 나눗셈, 템플릿 리터럴 안의 ${ {a:1}.a }, 문자열 안의 //를 정확히 구분합니다. 그래서 문자열·템플릿·정규식 안은 한 글자도 건드리지 않습니다.
· 압축은 주석과 공백만 지웁니다. 이름을 줄이거나 식을 바꾸지 않으며, 세미콜론 자동 삽입(ASI)이 기대는 줄바꿈 — return 뒤, 후위 ++ 앞, 다음 줄이 (나 [로 시작하는 곳 — 은 남깁니다. Terser처럼 작아지지는 않지만 동작이 달라지지도 않습니다.
· 정렬은 중괄호·대괄호 깊이와 ;로 문장 경계를 잡아 다시 들여쓰고, 원본에 있던 줄바꿈은 그대로 둡니다. 세미콜론을 넣어 주지 않고, 긴 줄을 접지 않으며, 객체 리터럴과 블록을 구분하지 못해 둘 다 한 줄에 한 항목씩 씁니다.
· TypeScript 제네릭 Map<string, T> 과 비교 연산 a < b 는 앞뒤 토큰을 보고 추측합니다. JSX는 다루지 않습니다.
· 난독화된 번들을 읽을 만하게 펼치는 데는 충분하고, 커밋할 코드를 다듬는 데는 Prettier가 맞습니다.

압축된 스택 트레이스의 원래 위치를 찾으려면 소스맵 원본 복원을 쓰세요.

사용 방법

코드를 붙여넣거나 파일을 놓습니다
한 줄로 뭉친 번들, 들여쓰기가 뒤섞인 파일, 제네릭이 든 TypeScript 모두 같은 방식으로 읽습니다. 파일은 이 탭에서 읽습니다.
정렬과 압축 중에 고릅니다
정렬은 중괄호 깊이로 다시 들여쓰고 원래 있던 줄바꿈은 그대로 둡니다. 압축은 주석과 공백만 지우며, 원하면 `/*!` 라이선스 표기는 남깁니다.
토큰 열 검사를 지켜봅니다
실행할 때마다 출력의 유효 토큰을 입력과 비교합니다. 혹시라도 다르면 빨간 글씨로 알리고 입력을 쓰라고 말합니다. 조용히 넘어가서는 안 되는 유일한 실패입니다.

자주 묻는 질문

압축했는데 왜 Terser보다 큰가요?

여기서는 주석과 공백만 지우기 때문입니다. Terser는 프로그램을 파싱해서 지역 변수 이름을 줄이고 상수를 접고 죽은 분기를 버립니다. 그러려면 AST와 스코프 분석이 필요하고, 둘 중 하나만 미묘하게 틀려도 동작이 달라집니다. 여기서는 덜 줄어드는 대신 코드가 깨지지 않는 쪽을 택했습니다.