JavaScript整形・圧縮

JavaScript Beautifier & Minifier

名前は一切変えずにJavaScriptやTypeScriptからコメントと空白だけを落とし、1行に潰れたバンドルは読めるところまでインデントし直します。

圧縮されたJavaScriptやTypeScriptを読める形に開き、小さくしたいときはコメントと空白を落とします。パーサではなくトークナイザの上に作られていて、その境目こそがこのツールの正直なところです。名前を変えず、式を書き換えず、文字列・テンプレート・正規表現の中には手を触れません。

🔒 ブラウザの中だけで動きますjavascriptformatminifybeautify

モード

インデント

} else { を1行に

空行を残す

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 ほど小さくはなりませんが、動きが変わることもありません。
· 整形は中括弧・角括弧の深さと ; から文の切れ目を見つけ、字下げをやり直し、もとからあった改行はそのままにします。セミコロンを補わず、長い行を折らず、オブジェクトリテラルとブロックの区別がつかないので、どちらも1行に1項目ずつ書きます。
· TypeScript のジェネリクス Map<string, T> と比較 a < b は、前後のトークンを見て区別します。JSX は扱いません。
· 難読化されたバンドルを読めるようにするには十分です。これからコミットするコードには Prettier のほうが合っています。

圧縮されたスタックトレースの元の位置を探すにはソースマップで元の位置にを使ってください。

使い方

コードを貼り付けるか、ファイルをドロップします
1行に潰れたバンドル、インデントの入り混じったファイル、ジェネリクスの入ったTypeScript——どれも同じように読みます。ファイルはこのタブの中で読みます。
整形と圧縮のどちらかを選びます
整形は波括弧の深さでインデントを付け直し、もともとの改行はそのままにします。圧縮はコメントと空白を消すだけで、指定すれば`/*!`のライセンス表記は残します。
トークン列の検査を見守ります
実行のたびに、出力の意味のあるトークンを入力と比べます。もし違っていればページが赤字でそう伝え、入力のほうを使うように言います。黙って通してはならない唯一の失敗です。

よくある質問

圧縮したのにTerserより大きいのはなぜですか

ここではコメントと空白しか消さないからです。Terserはプログラムをパースして、ローカル変数の名前を縮め、定数を畳み、到達しない分岐を落とします。それにはASTとスコープの解析が要り、どちらかを微妙に間違えれば動作が変わります。ここでは、削減が小さくなる代わりにコードを壊さないほうを選んでいます。