跳到工具区
Web 开发

JavaScript 格式化与压缩

使用 Prettier 格式化、美化 JavaScript,或用 Terser 压缩代码并查看解析诊断;源码只解析,不执行。

输入0 个字符
结果0 个字符
就绪

想要更顺手的原生工作流?

把「JavaScript 格式化与压缩」放到一个快捷键里。

DevSexy Mac 版保留同样私密的本地处理,同时提供全局快捷键;不用管理浏览器标签页,需要时直接呼出。

全局快捷键可离线使用本地处理
免费试用 Mac 版

当前浏览器工具仍然免费。

静态转换 · 隔离执行

只读懂程序,不运行程序。

陌生 JavaScript 只是为了变得可读,不该先获得执行权限。DevSexy 会让源码经过 parser、AST 和 Prettier printer 或 Terser;不会把它交给 eval,也不会导入或运行其中的模块。

01

JavaScript 源码

02

Babel parser

03

抽象语法树(AST)

04

Prettier 或 Terser

代码执行没有入口

不会调用 eval、Function constructor,不导入用户模块、不注入 DOM,也不会触发源码里的运行时副作用。

语法通行证

按文档语法选择 parser。

Babel 适合现代 JavaScript;Babel-Flow 额外识别 Flow 类型标注。选择 Flow parser 只代表能解析这种语法,不会进行类型检查。

ES moduleexport { load } from './api.js'Babel · Flow
async / awaitconst value = await load()Babel · Flow
可选链profile?.team?.nameBabel · Flow
class fieldclass Store { ready = false }Babel · Flow
模板字符串 / 正则`/users/$` · /a+b/giBabel · Flow
Flow 类型标注function f(value: string): numberFlow parser

同一份源码,两种输出目的

便于审阅的代码和便于交付的代码,不是同一个任务。

格式化

审阅
export async function load(id) {
  const response = await fetch(`/items/${id}`);
  return response.json();
}
  • 变量名保持可读
  • 由 Prettier 统一缩进、换行与打印风格
  • 只重排源码,不执行函数或模块

压缩

交付
export async function load(t){const n=await fetch(`/items/${t}`);return n.json()}
  • 开启 mangle 时,局部变量名可能改变
  • 除 /*! 开头的注释外,大多数注释会移除
  • 可选生成内联 source map,并决定是否嵌入原始源码

压缩风险清单

Terser 压缩依赖的假设,需要在发布前复核。

直接 eval字符串代码可能依赖当前作用域的局部变量名谨慎启用 mangle,并单独测试相关作用域
动态属性访问运行时字符串键可能属于外部协议本页不启用或承诺 property mangling
许可证注释法律声明可能要求完整保留这里只保留 /*! 开头的注释,发布前检查许可证
Module 模式import/export 会自动启用 module 假设,也可手动开启它不是 bundler,也不做跨模块 tree-shaking
Source map内联 map 可能携带 sourcesContent 和源码公开部署前检查是否应嵌入原始源码

解析错误记录

遇到非法 token,只给诊断,不尝试执行。

Unexpected token · 第 2 行
const user = { name: 'Ada' };
if (user?.name {
  console.log(user.name);
}

条件以 ( 开始,却在遇到 { 前没有对应的 )。应先补全条件括号;后续报错位置可能只是连锁结果。

运行可复现的实例

格式化 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,可明确选择语法或让工具按 JSX 特征自动判断。

HTML/SVG 转 JSX/TSX

将 HTML 或 SVG 的属性和简单内联 style 改写为 React 语法,并按需输出 JSX/TSX 代码片段或组件。

文本 Diff 对比

在浏览器本地按行、词或字符比较两段文本,并清楚记录忽略规则与输出格式。

在 DevSexy Mac 应用中重复处理

反复处理本地数据时,可通过 Option 快捷键打开原生应用,离线使用工具。

直接回答

什么是 JavaScript 格式化与压缩?

在线使用 Prettier 格式化 JavaScript,或通过 Terser 压缩与 mangle 变量名;支持 Babel/Flow 和内联 source map,源码在浏览器本地处理且不会执行。

它能做什么?

  • 格式化
  • 诊断
  • 压缩

如何使用 JavaScript 格式化与压缩

  1. 01

    准备输入

    粘贴 JavaScript,必要时选择正确的解析器。

  2. 02

    选择操作

    选择格式化、诊断或压缩,并检查对应选项。

  3. 03

    核对结果

    在项目中另跑测试,解析成功不能证明运行行为。

常见问题

粘贴的 JavaScript 会运行吗?
不会。工具在 Worker 中解析和打印源码,不求值,也不会执行源码里的 import、函数调用或网络请求。
能够解析就代表代码正确吗?
不代表。语法通过不能证明变量可用、类型正确、副作用符合预期或兼容指定运行时。
需要检查压缩器选项吗?
需要。名称混淆、模块模式与内联 source map 各有影响;应通过正常构建验证,并决定是否适合嵌入原始源码。