JavaScript formázó és tömörítő
Szépítsd a tömörített JavaScriptet, tömörítsd Terserrel, vagy ellenőrizd a szintaxisát a hibák pontos sorával és oszlopával. Csak a böngésződben fut.
Hogyan formázd vagy tömörítsd a JavaScriptet
- Illeszd be a kódot, vagy kattints a Fájl megnyitása gombra egy
.js,.mjsvagy.jsxfájl betöltéséhez (legfeljebb 10 MB). - Válaszd ki a Behúzás módját, és ha az Allman-stílust kedveled, jelöld be a Kapcsos zárójelek külön sorban opciót.
- Kattints a Formázás (szépítés) gombra, hogy olvashatóvá tedd a kódot.
- Zsugorításhoz állítsd be a Tömörítési beállítások értékeit, és kattints a Tömörítés gombra. Ha csak hibákat keresnél, kattints a Szintaxis ellenőrzése gombra.
- Másold ki vagy töltsd le az eredményt. Az állapotsor megmutatja a méretet előtte és utána, valamint a megtakarítás százalékát.
A kódot az eszköz csak beolvassa és átalakítja, soha nem futtatja: semmi, amit beillesztesz, nem hajtódik végre ezen az oldalon.
Szépítés a js-beautifyjal
A Formázás (szépítés) a js-beautify könyvtárat használja. Soronként egy utasítást tesz, behúzza a blokkokat, szóközt tesz az operátorok köré és a kulcsszavak után, és megtart legfeljebb egy üres sort ott, ahol te hagytál. Érti a modern szintaxist (osztályok, nyílfüggvények, sablonliterálok, async/await) és a JSX-et is. Ez a leggyorsabb módja egy tömörített könyvtár vagy egy weboldalról másolt egysoros kódrészlet elolvasásának.
A szépítés csak a szóközöket változtatja. Nem ellenőrzi, hogy a kód érvényes-e: egy hiányzó zárójel egyszerűen furcsa behúzást eredményez. Ehhez használd a Szintaxis ellenőrzése gombot.
Tömörítés a Terserrel
A Tömörítés a Tersert használja, amelyet a legtöbb JavaScript-buildeszköz alkalmaz. Mivel nagy méretű, csak akkor töltődik le, amikor először kattintasz a Tömörítés vagy a Szintaxis ellenőrzése gombra. A beállítások közvetlenül a Terser beállításaira képződnek le:
- Az ES-modul (import/export) a kódot modulként elemzi (
module: true): szigorú mód érvényes, a legfelső szintű nevek privátak, így átnevezhetők, a nem használtak pedig eltávolíthatók. Hagyd bejelöletlenül egy klasszikus szkriptnél, amelynek globális függvényeit más szkriptek használják. - A Tömörítés (compress) (
compress) rövidebb, egyenértékű kóddá írja át a kódot: állandók összevonása (a2*60120lesz), halott kód eltávolítása,vardeklarációk összevonása, rövidebb feltételek. - A Változónevek rövidítése (
mangle) a helyi változókat és paramétereket egy-két betűsre nevezi át. A globális neveket és az objektumtulajdonságokat soha nem nevezi át. - A Licencmegjegyzések megtartása megtartja a
/*!kezdetű vagy a@licensevagy@preserveszöveget tartalmazó megjegyzéseket. Az összes többi megjegyzés törlődik.
A tömörítés nem változtathatja meg, mit csinál a kód, de az a kód, amely a függvénynevekre (fn.name) vagy az eval használatára épít, az átnevezés után másként viselkedhet. Ilyenkor vedd ki a Változónevek rövidítése jelölését.
Szintaxishibák sorral és oszloppal
Ha a Terser nem tudja elemezni a kódot, a Tömörítés és a Szintaxis ellenőrzése megjeleníti a hibaüzenetet a sorral és az oszloppal, például „12. sor, 8. oszlop – Szintaxishiba: Unexpected token punc «)»”. Az oszlop a karaktereket 1-től számolja. Tipikus ok egy hiányzó zárójel a fájl korábbi részében, ezért a jelzett pozíció előtti sorokat is nézd meg. A hibaüzenet szövege (a Terser üzenete) angolul jelenik meg.
Gyakori kérdések
Feltöltődik valahová a kódom?
Nem. A js-beautify és a Terser is a böngésződben fut, a kódod a számítógépeden marad.
Tömöríthetek TypeScriptet?
Nem. A Terser csak JavaScriptet fogad el. Előbb fordítsd le a TypeScriptet JavaScriptre, majd tömörítsd a kimenetet. Egyszerű TypeScript formázása a Formázás (szépítés) gombbal gyakran működik, de a típusmegjegyzések körül furcsa lehet a szóközhasználat.
Miért néz ki másképp a tömörített kód, mint amit írtam?
A Tömörítés (compress) kiértékeli az állandó kifejezéseket, beilleszti az egyszer használt értékeket, és eltávolítja az elérhetetlen kódot. Az eredmény ugyanúgy viselkedik. Vedd ki a Tömörítés (compress) jelölését, ha csak a szóközöket és a megjegyzéseket szeretnéd eltávolítani.
Egyeznie kell az „ES-modul” opciónak a kódommal?
Igen. Az import vagy export utasítást tartalmazó kódot modulként kell tömöríteni. Egy klasszikus szkript modulként való tömörítése elveszíthet olyan globális függvényeket, amelyeket más szkriptek hívnak, mert a legfelső szintű neveket ilyenkor privátnak tekinti.
Mi a helyzet a JSON-nal?
A JSON érvényes JavaScript, ezért mindkét gomb elfogadja, de a külön JSON-formázó jobb hibaüzeneteket ad, és rendezi a kulcsokat.
Kapcsolódó eszközök
- JSON formázó és validátor Ingyenes JSON formázó és validátor, amely a böngésződben szépít, tömörít és ellenőriz JSON-t, a szintaxishibákat sor és oszlop szerint jelezve.
- CSS formázó és tömörítő Szépítsd a kusza CSS-t tiszta behúzással, vagy tömörítsd csso-val, és nézd meg a méretet előtte és utána. A böngésződben fut, semmit nem töltünk fel.
- HTML formázó Szépítsd a kusza HTML-t tiszta behúzással, vagy tömörítsd biztonságosan a böngésződben. A beágyazott CSS és JS is formázódik. Semmi nem töltődik fel.
- Regex-teszter Tesztelj JavaScript reguláris kifejezéseket élőben: kiemelt találatok, rögzítő csoportok, csere és minden elem magyarázata közérthető nyelven.