跳到工具区
Web 开发

JavaScript 格式化与压缩

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

Web Worker 仅本地处理工具
输入0 个字符
结果0 个字符
就绪

静态转换 · 隔离执行

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

陌生 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 格式化与压缩?

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

它能做什么?

  • 格式化
  • 诊断
  • 压缩

如何使用 JavaScript 格式化与压缩

  1. 01

    选择任务

    在工作区选择格式化、诊断和压缩。

  2. 02

    提供输入

    const greet = (name) => console.log(`Hello, ${name}!`);。内容始终留在浏览器的本地处理流程中。

  3. 03

    检查结果

    运行工具,检查结果和诊断信息;页面提供复制或下载时,可以直接导出。

常见问题

JavaScript 格式化与压缩是什么?
在浏览器本地使用 Prettier 格式化 JavaScript,或通过 Terser 压缩与 mangle 变量名。支持 Babel/Flow 解析和可选内联 source map,源码不会被执行。
JavaScript 格式化与压缩能做什么?
JavaScript 格式化与压缩支持格式化、诊断和压缩,所有模式都可以直接在当前页面使用。
JavaScript 格式化与压缩会上传我的数据吗?
JavaScript 格式化与压缩会在浏览器本地处理输入内容。DevSexy 不会增加上传、登录或服务器处理步骤。
DevSexy 在浏览器本地处理工具输入:不追踪粘贴内容,无需账号,也没有上传步骤。