JavaScript Formatter at Minifier

Paano mag-format o mag-minify ng JavaScript

1. I-paste ang iyong code, o i-click ang Buksan ang file para mag-load ng .js, .mjs o .jsx file (hanggang 10 MB).
2. Piliin ang Indentation at, kung mas gusto mo ang istilong Allman, lagyan ng check ang Mga brace sa sariling linya.
3. I-click ang I-format (beautify) para maging nababasa ang code.
4. Para paliitin ito, itakda ang Mga opsyon sa pag-minify at i-click ang I-minify. Para maghanap lang ng mga error, i-click ang Suriin ang syntax.
5. Kopyahin o i-download ang resulta. Ipinapakita ng status line ang laki bago at pagkatapos, at ang porsyentong natipid.

Binabasa at ina-transform lang ang code, hindi kailanman pinapatakbo: walang ipine-paste mo na ine-execute sa page na ito.

Mag-beautify gamit ang js-beautify

Gumagamit ang I-format (beautify) ng js-beautify. Naglalagay ito ng isang statement bawat linya, ini-indent ang mga bloke, nagdaragdag ng espasyo sa paligid ng mga operator at pagkatapos ng mga keyword, at pinananatili ang hanggang isang blangkong linya kung saan mayroon ka. Naiintindihan din nito ang modernong syntax (class, arrow function, template literal, async/await) at JSX. Ito ang pinakamabilis na paraan para basahin ang minified na library o isang-linyang snippet na kinopya mula sa web page.

Whitespace lang ang binabago ng beautifying. Hindi nito sinusuri kung valid ang code: ang nawawalang panaklong ay magbubunga lang ng kakaibang indentation. Gamitin ang Suriin ang syntax para roon.

Mag-minify gamit ang Terser

Gumagamit ang I-minify ng Terser, ang minifier na gamit ng karamihan ng JavaScript build tool. Dahil malaki ito, dina-download lang ito kapag unang na-click mo ang I-minify o Suriin ang syntax. Direktang tumutugma ang mga opsyon sa mga setting ng Terser:

• Ang ES module (import/export) ay nagpa-parse ng code bilang module (module: true): umiiral ang strict mode at pribado ang mga top-level na pangalan, kaya maaari silang palitan ng pangalan at tanggalin ang mga hindi ginagamit. Iwanang walang check para sa klasikong script na ang mga global function ay ginagamit ng ibang script.
• Ang I-compress (compress) ay isinusulat muli ang code bilang mas maikling katumbas na code: constant folding (ang 2*60 ay nagiging 120), pag-aalis ng dead code, pagsasama ng mga deklarasyong var, mas maiikling kondisyon.
• Ang Paikliin ang mga pangalan ng variable (mangle) ay pinapalitan ang mga lokal na variable at parameter ng isa o dalawang letra. Hindi kailanman pinapalitan ng pangalan ang mga global na pangalan at property ng object.
• Ang Panatilihin ang mga komento ng lisensya ay nagpapanatili ng mga komentong nagsisimula sa /*! o may @license o @preserve. Inaalis ang lahat ng ibang komento.

Hindi kayang baguhin ng minification kung ano ang ginagawa ng code, pero ang code na umaasa sa mga pangalan ng function (fn.name) o sa eval ay maaaring mag-iba ang gawi pagkatapos ng pagpapalit ng pangalan. Alisin ang check sa Paikliin ang mga pangalan ng variable sa ganoong kaso.

Mga syntax error na may linya at column

Kapag hindi ma-parse ng Terser ang code, ipinapakita ng I-minify at Suriin ang syntax ang mensahe ng error kasama ang linya at column nito, halimbawa “Linya 12, column 8 – Syntax error: Unexpected token punc «)»”. Binibilang ng column ang mga character mula 1. Karaniwang sanhi ang nawawalang bracket sa mas naunang bahagi ng file, kaya tingnan din ang mga linya bago ang iniulat na posisyon.