跳到工具區
Web 開發

JavaScript 格式化與壓縮工具

在瀏覽器本機以 Prettier 整理 JavaScript,或用 Terser 壓縮並重新命名區域變數;只解析與改寫原始碼,不會執行。

輸入0 個字元
結果0 個字元
就緒

想要更順手的原生工作流程?

把「JavaScript 格式化與壓縮工具」放進一個快速鍵。

DevSexy Mac 版保留同樣私密的本機處理,同時提供全域快速鍵;不用管理瀏覽器分頁,需要時直接叫出。

全域快速鍵可離線使用本機處理
免費試用 Mac 版

目前的瀏覽器工具仍然免費。

靜態解析與改寫 · 不執行程式碼

只解析、排版與壓縮;不執行,也不做型別檢查。

格式化與診斷使用 Babel 或 Babel-Flow parser;Minify 則直接交給 Terser,Flow 型別語法不在其輸入範圍。兩條路徑都不會 eval、import 或執行你貼上的程式碼,也不會驗證執行結果。

01

JavaScript 原始碼

02

依操作選擇 parser

03

建立語法樹,不執行

04

Prettier 或 Terser 輸出

執行程式碼沒有路徑

不呼叫 eval 或 Function constructor,不匯入使用者 module、不注入 DOM,也不觸發原始碼裡的網路請求或其他 runtime side effect。

語法通行證

Parser 選項只影響格式化與診斷。

Babel 適合現代 JavaScript;Babel-Flow 額外辨識 Flow annotation,但不執行 Flow type checker。Minify 使用 Terser 自己的 JavaScript parser,含 Flow 型別的輸入會失敗。

ES moduleexport { load } from './api.js'Babel · Babel-Flow
async / awaitconst value = await load()Babel · Babel-Flow
Optional chainingprofile?.team?.nameBabel · Babel-Flow
Class fieldclass Store { ready = false }Babel · Babel-Flow
Template literal/RegExp`/users/$` · /a+b/giBabel · Babel-Flow
Flow annotationfunction f(value: string): number僅 Babel-Flow;Terser 不接受

同一份原始碼,兩種輸出目的

格式化方便閱讀;壓縮為單一輸入縮小體積。

格式化

檢閱
export async function load(id) {
  const response = await fetch(`/items/${id}`);
  return response.json();
}
  • 保留識別字與註解,統一縮排、空白與換行
  • 可選 2/4 空格或 Tab;print width 是偏好值,不是硬上限
  • Prettier standalone 不讀取專案的 config、ignore 或額外 plugin

壓縮

交付前檢查
export async function load(t){const n=await fetch(`/items/${t}`);return n.json()}
  • Terser 固定執行兩輪 compress,可能移除、合併或改寫可判定的程式碼
  • mangle 預設開啟,只重新命名可處理的識別字;不是加密,也不啟用 property mangle
  • source map 只會以 data URL 內嵌;sourcesContent 可選擇是否放入完整輸入

壓縮風險清單

Terser 的最佳化假設,需要用真實程式流程驗證。

直接 eval/反射名稱字串程式碼、Function.name 或 stack 可能依賴原始識別字Terser 預設避開 direct eval 可見名稱;仍應視情況關閉 mangle 並實測
動態 property外部協定可能透過字串 key 讀取物件欄位本站沒有開啟 property mangle;一般 mangle 不等於改名物件 key
授權註解發佈條款可能要求保留 copyright 或 license notice本站只保留 /*! 開頭的註解;其他授權文字請另外保存並核對
Module 模式行首 import/export 會自動啟用,也可手動開啟 strict 與 top-level 假設可能移除單一輸入內的未使用程式碼;不解析依賴,也不是 bundler 或跨 module tree shaking
Source map內嵌 map 會跟著輸出發布,sourcesContent 還能包含完整原始碼上線前檢查 data URL 與原始碼內容;source map 不是執行正確性的保證

Parser 錯誤記錄

遇到不合法的 token,只提供診斷,不嘗試執行。

Unexpected token,預期「)」· 第 2 行第 16 欄
const user = { name: 'Ada' };
if (user?.name {
  console.log(user.name);
}

條件以 ( 開始,卻在補上 ) 前先遇到 {。Prettier 的錯誤訊息會附行列與原始碼片段;本站的結構化 line/column 欄位不一定另有值,後續位置也可能只是連鎖錯誤。

執行可重現的範例

格式化 JavaScript 或檢查現代語法,全程不執行原始碼。

使用範例會替換目前輸入、參考輸入、操作與選項。以下均為公開示範資料。

格式化使用者物件

使用 Babel 解析器與兩個空格縮排。

輸入

const user={name:"Ada",roles:["editor"]}

列印器補齊一致的空格和結尾分號。

const user = { name: "Ada", roles: ["editor"] };

檢查模組與可選鏈

診斷一個包含可選鏈和空值合併的匯出運算式。

輸入

export const label=user?.name??"Guest"

報告標出這些語法訊號,不匯入、不求值、不執行。

present  ES modules
present  optional chaining
present  nullish coalescing
never evaluated

繼續處理相關任務

TypeScript/TSX 程式碼格式化

使用 Prettier 在瀏覽器本機整理 TypeScript 與 TSX 的縮排、換行與空白;可指定 TS、TSX,或以 JSX 片段啟發式選擇語法。

HTML/SVG 轉 JSX/TSX 工具

在瀏覽器本機改寫常見 HTML/SVG attribute 與簡單 inline style,輸出 Fragment、JSX component 或 TSX component 骨架。

文字 Diff 比對

在瀏覽器本機依行、詞或字元比對兩段文字,並清楚標示檢視方式、忽略規則與複製輸出格式。

在 DevSexy Mac 應用程式中重複處理

反覆處理本機資料時,可透過 Option 快捷鍵開啟原生應用程式,離線使用工具。

直接回答

什麼是 JavaScript 格式化與壓縮工具?

線上以 Prettier 格式化 JavaScript,或用 Terser 進行兩輪 compress 與可選 mangle;支援 Babel/Flow 與 inline source map,程式碼在瀏覽器本機處理且不會執行。

它能做什麼?

  • 格式化
  • 診斷
  • 壓縮

如何使用 JavaScript 格式化與壓縮工具

  1. 01

    準備輸入

    貼上 JavaScript,必要時選擇正確的解析器。

  2. 02

    選擇操作

    選擇格式化、診斷或壓縮,並檢查對應選項。

  3. 03

    核對結果

    在專案中另跑測試,解析成功不能證明執行行為。

常見問題

貼上的 JavaScript 會執行嗎?
不會。工具在 Worker 中解析和列印原始碼,不求值,也不會執行原始碼裡的 import、函式呼叫或網路請求。
能夠解析就代表程式碼正確嗎?
不代表。語法透過不能證明變數可用、型別正確、副作用符合預期或相容指定執行時。
需要檢查壓縮器選項嗎?
需要。名稱混淆、模組模式與內聯 source map 各有影響;應透過正常構建驗證,並決定是否適合嵌入原始原始碼。