14 Rīki Javascript rediģēšanai

Javascript minifikācija ir tehnika, kas kondensē skriptu daudz mazākā nospiedumā. Jūs zaudējat cilvēka lasāmību, bet jūs saglabājat ievērojamu joslas platumu - galu galā, Javascript ir domāta jūsu pārlūkprogrammai, nevis jūsu lietotājiem.

Lielākā daļa ražošanas vietņu izmanto Javascript rediģēšanu, bet tas ir ļoti atšķirīgs. No vienkāršiem tiešsaistes pārveidotājiem līdz visaptverošākiem GUI rīkiem ar komandrindas saskarnēm mūsu iespējas ir diezgan dažādas. Šajā rakstā mēs apskatīsim kā darbojas Javascript minifikācija, kā mēs to varam veidot mūsu darbplūsmā un kādi ir miniginācijas plusi un mīnusi.

Kā darbojas Minifikācija

Labākais veids, kā uzzināt, kas notiek, kodējot kodu, ir apskatīt UglifyJS Github repozitoriju. Šis skripts tiek izmantots daudzos tiešsaistes pārveidotājos, kā arī GUI rīkos un komandrindas rīkos, piemēram, Grunt. Tālāk ir minēti daži pārveidojumi, lai jūsu kods būtu īsāks:

Noņem nevajadzīgo telpu
Saīsina mainīgos nosaukumus, parasti uz atsevišķām rakstzīmēm
Pievienojas secīgām var deklarācijām
Pārvērš masīvus uz objektiem, ja iespējams
Optimizē, ja paziņojumi ir
Aprēķina vienkāršas pastāvīgas izteiksmes
utt.

Kā ātrs piemērs šeit ir funkcija, kas būtībā raksta kādu noteiktu tekstu.

 funkcija hello (text) document.write (teksts);

sveiki (“Laipni lūdzam rakstā”);

Paskatīsimies, kas notiks, kad mēs to samazināsim. Ņemiet vērā atstarpes un ievilkumu un teksta mainīgā saīsināšanu.

funkcija hello (e) document.write (e) sveiki ("Laipni lūdzam rakstā")

Javascript minimizācijas rīki

Rīki, kas tiek izmantoti Javascript rediģēšanai, var būt iedalīti 3 grupās: tiešsaistes rīki, GUI rīki un komandrindas rīki.

Izmantojot tiešsaistes rīkus, tas parasti ir koda ielīmēšana un rezultāta tūlītēja kopēšana.
GUI rīki bieži satur daudz vairāk funkcionalitātes; JS minifikācija ir tikai neliela daļa no tā, ko viņi dara.
Komandrindas rīki arī parasti ir visaptverošāki, piedāvājot modifikāciju kā moduli.

Tiešsaistes rīki

javascript-minifier.com ir jauka izskata rīks ar API
Online YUI kompresors ir jaudīgāks rīks, kas izmanto YUI kompresoru, ar daudzām iespējām un CSS minigācijas iespējām.
jscompress.com ir ne-frills minifier, bet tas saņem darbu
jsmini.com ir vēl viena vienkārša, bet pilnībā izmantojama iespēja

Lieliska lieta par tiešsaistes rīkiem ir ātrums, ar kādu jūs varat strādāt ar viņiem. Sarežģīti GUI un komandrindas rīki ātrāk rediģē, bet jums ir nepieciešams izveidot projektu, lai tas darbotos pareizi. Šo līdzekļu trūkums ir tas, ka tie galvenokārt ir sniedziet maz pielāgošanu vai bez tās, vismaz salīdzinot ar komandrindas rīkiem.

GUI rīki

Koala ir bezmaksas rīks LESS, SASS apkopošanai, JS minigācijai un daudz vairāk
Prepros ir maksas platforma, kas maksā par platformu, kas dod jums vēl vairāk iespēju
Codekit ir mana izvēle. Tā ir tikai Mac lietojumprogramma, kas piedāvā kodu kompilāciju, rediģēšanu, priekšskatījuma serveri, bower paketes pārvaldību un daudz ko citu
AjaxminGui ir bezmaksas, viena mērķa Windows rīks jūsu JS sasmalcināšanai
UltraMinifier ir bezmaksas lietotne OS X, kas samazina CSS un JS ar velciet un nometiet
Mazāks ir OS X rīks, kas samazina un sajauc failus

Šeit es minēju divu veidu GUI lietotnes. Vienkāršās vienas pakāpes minigācijas programmas ir līdzīgas viņu tiešsaistes kolēģiem. Tie ir ļoti ātri izmantojami, jo jūs varat vienkārši vilkt un nomest failus uz tiem, nav nepieciešama iestatīšana. Tas nozīmē, ka viņi nodrošināt praktiski nekādu pielāgošanu.

Lielāki GUI rīki (Prepros, Koala, Codekit) ir lieliski, lai pārvaldītu projektus un sniegtu jums mazliet vairāk kompresijas iespēju, bet viņi to dara nepieciešams mazliet iestatīšanas. Ātra JS ieguve aizņemtu aptuveni 20 sekundes, kas ir daudz, salīdzinot ar 2 sekundēm tiešsaistē vai vienkārši GUI rīkos..

No otras puses, viņi piedāvā vairāk funkciju un nodrošina automatizāciju. Jūsu JS faili tiks samazināti katru reizi, kad tos saglabājat, nav nepieciešams manuāli minēt tos. Ja jūs kaut ko izstrādājat Javascript, tas noteikti ir ceļš.

Komandrindas rīki

Minify ir paredzēts tiem, kuri vēlas saīsināt JS no komandrindas, bet nevēlas izveidot nekādu iedomu Grunt vai Gulp
Uglify.js, ko iepriekš minējām, ir pieejams arī kā atsevišķs komandrindas rīks
Grunt ir paplašinājis Javascript minifikāciju, kas nosaukta par grunt-hozzájár-uglify
Gulp ir arī JS minifikācija, izmantojot Uglify.js, izmantojot gulp-uglify

Komandrindas rīki nav tikai Linux geeks! Es neesmu liels terminālī, bet, piemēram, Grunt un Gulp, ir viegli izveidot savu lielisko dokumentāciju. Komandrindas rīku otrā puse ir lielisks elastības daudzums, kas jums ir no iespējām līdz izejai.

No otras puses, ir mazliet mācīšanās līknes. Pieredze komandrindā ņem dažas (ne daudz) prakses, kuras jūs atradīsiet ierobežojošas pirms sākat baudīt priekšrocības.

Pārskats

Ja esat jauns, lai izstrādātu Web, es ieteiktu vienu no pirmajiem trim GUI rīkiem. Tie palīdzēs jums pārvaldīt savus projektus kopumā un piedāvāt daudz vairāk nekā tikai JS.

Ja jūs esat pieredzējuši profesionāļi, jums, iespējams, vajadzētu apskatīt Grunt vai Gulp jo tie piedāvā vislielāko kontroli pār automatizācijas uzdevumiem. Ja nepieciešams ātri rediģēt skriptu izveidojot projektu, komandrindas rīki var ietaupīt daudz laika.

Katrai instrumentu grupai ir savi plusi un mīnusi, un patiesībā jūs, iespējams, galu galā izmantosiet vienu vai otru. Paturiet prātā, ka tad, kad ražošanas vidē jums vienmēr jākalibrē jūsu Javascript un CSS!