Dinozavrlar uchun tushuntirilgan zamonaviy JavaScript

Rayan Shimol tomonidan Dinozavr komiksidan olingan rasmlar

Agar siz boshidan beri u erda bo'lmagan bo'lsangiz, zamonaviy JavaScript-ni o'rganish juda qiyin. Ekotizim shunchalik tez o'sib bormoqda va o'zgaradiki, turli xil vositalar echishga urinayotgan muammolarni tushunish qiyin. Men 1998 yilda dasturlashni boshladim, lekin faqatgina 2014 yilda JavaScript-ni jiddiy ravishda o'rganishni boshladim. O'shanda men Browserify-ni ko'rib va ​​uning etiketkasiga tikilganimni eslayman.

"Browserify sizning barcha bog'liqliklaringizni birlashtirish orqali brauzerda (" modullar ") talab qilinishiga imkon beradi."

Men ushbu jumladagi biron bir so'zni tushunmadim va bu men uchun dasturchi sifatida qanday yordam berishi mumkinligini tushunishga intildim.

Ushbu maqolaning maqsadi JavaScript vositalarining bugungi kunda qanday bo'lganligi haqida tarixiy kontekstni taqdim etishdir. Biz boshidan boshlaymiz va dinozavrlar singari misol veb-saytini yaratamiz - hech qanday vositalar yo'q, oddiy HTML va JavaScript. . Keyin biz turli xil vositalarni asta-sekin ko'rib chiqamiz, ular birdaniga echimini topadilar. Ushbu tarixiy kontekstda siz doimo o'zgarib turadigan JavaScript manzarasini o'rganishingiz va moslashishingiz mumkin bo'ladi. Qani boshladik!

JavaScript-dan "eski maktab" usuli

HTML va JavaScript-dan foydalanib, "qo'lda yuklab olish" va fayllarni bog'lashni o'z ichiga olgan "eski maktab" veb-saytidan boshlaylik. JavaScript fayliga bog'langan oddiy index.html fayli:





  
   JavaScript misol 
  


  

HTML dan salom!

satri index.js nomli katalogdagi alohida JavaScript fayliga ishora qiladi:

// index.js
console.log ("JavaScript-dan salom!");

Bu veb-sayt yaratish uchun kerak bo'lgan narsadir! Endi aytaylik, siz moment.js kabi birovga (boshqa sanalarni sanab o'tishga yordam beradigan kutubxona) yozgan boshqa bir kutubxonani qo'shmoqchisiz. Masalan, siz JavaScript-dagi moment funktsiyasidan quyidagicha foydalanishingiz mumkin:

moment (). startOf ('kun'). fromNow (); // 20 soat oldin

Ammo bu sizning veb-saytingizga moment.js kiritganligingizdan dalolat beradi! Moment.js uchun asosiy sahifada quyidagi ko'rsatmalarni ko'rasiz:

Hmm, o‘ngdagi o‘rnatish bo‘limida juda ko‘p narsa bor. Ammo shuni e'tiborga olmaslik kerak - moment.js-ni veb-saytimizga o'sha katalogdan moment.min.js faylini yuklab olish va uni index.html fayliga qo'shish orqali qo'shishimiz mumkin.





  
   Misol 
  
  
  


  

HTML dan salom!

E'tibor bering, moment.min.js indeks.js oldidan yuklanadi, ya'ni indeks funktsiyasidan quyidagi tarzda foydalanishingiz mumkin:

// index.js
console.log ("JavaScript-dan salom!");
console.log (moment (). startOf ('day'). from now ());

Va JavaScript kutubxonalari yordamida veb-saytlar yaratishda shu tarzda ishladik! Yaxshi tomoni shundaki, buni tushunish oson edi. Yomon narsa shundaki, kutubxonalarning har safar yangilanadigan versiyasini topish va yuklab olish juda zerikarli edi.

JavaScript paketlar menejeridan foydalanish (npm)

Taxminan 2010 yildan boshlab, markaziy ombordan kutubxonalarni yuklab olish va yangilash jarayonini avtomatlashtirishga yordam beradigan bir nechta raqobatdosh JavaScript paket menejerlari paydo bo'ldi. Bower, shubhasiz, 2013 yilda eng ommabop bo'lgan, ammo oxir-oqibat 2015 yil npm atrofida bosib o'tdi. (Shuni ta'kidlash kerakki, 2016 yil oxiridan boshlab iplar npm interfeysiga alternativa sifatida juda ko'p tortishlarni to'plagan, ammo u hali ham npm paketlaridan foydalanadi. kaput.)

Esda tutingki, npm dastlab node.js uchun maxsus yaratilgan paket boshqaruvchisi, JavaScript-ni ishga tushirish uchun emas, balki serverda ishlash uchun mo'ljallangan. Shunday qilib, bu brauzerda ishlashga mo'ljallangan kutubxonalar uchun oldingi JavaScript paketlar menejeri uchun juda g'alati tanlov bo'ladi.

Eslatma: Paket menejerlaridan foydalanish odatda buyruq satridan foydalanishni o'z ichiga oladi, bundan oldin old devon sifatida hech qachon talab qilinmagan edi. Agar siz hech qachon ishlatmagan bo'lsangiz, boshlash uchun batafsil ma'lumot olish uchun ushbu qo'llanmani o'qishingiz mumkin. Yaxshisi yoki yomonrog'i, buyruq satridan qanday foydalanishni bilish zamonaviy JavaScript-ning muhim qismidir (va boshqa rivojlanish sohalarida ham eshiklarni ochadi).

Moment.js paketini qo'lda yuklab olish o'rniga uni avtomatik o'rnatish uchun npm-dan qanday foydalanish kerakligini ko'rib chiqaylik. Agar siz node.js-ni o'rnatgan bo'lsangiz, siz npm-ni o'rnatgansiz, ya'ni buyruq satrini index.html fayli bilan papkaga o'tishingiz va quyidagilarni kiritishingiz mumkin:

$ npm tashabbusi

Bu sizga bir nechta savollarni taklif qiladi (asl holati yaxshi, siz har bir savol uchun "Enter" ni bosishingiz mumkin) va pack.json nomli yangi faylni yaratasiz. Bu npm barcha loyiha ma'lumotlarini saqlash uchun foydalanadigan konfiguratsiya fayli. Standart holatlarda pack.json tarkibi quyidagicha ko'rinishi kerak.

{
  "name": "your-project-name",
  "versiya": "1.0.0",
  "tavsif": "",
  "main": "index.js",
  "skriptlar": {
    "test": "echo \" Xato: hech qanday sinov aniqlanmagan \ "&& chiqish 1"
  },
  "muallif": "",
  "litsenziya": "ISC"
}

Moment.js JavaScript paketini o'rnatish uchun endi buyruq satriga quyidagi buyruqni kiritish orqali o'zlarining uy sahifalaridagi npm ko'rsatmalariga amal qilishimiz mumkin:

$ n / soat o'rnatish vaqti - saqlash

Ushbu buyruq ikkita narsani amalga oshiradi - birinchidan, moment.js to'plamidan barcha kodni node_modules deb nomlangan papkaga yuklaydi. Ikkinchidan, avtomatik ravishda package.json faylini moment.js-ni loyihaga bog'liqlik sifatida kuzatib borish uchun o'zgartiradi.

{
  "name": "modern-javascript-example",
  "versiya": "1.0.0",
  "tavsif": "",
  "main": "index.js",
  "skriptlar": {
    "test": "echo \" Xato: hech qanday sinov aniqlanmagan \ "&& chiqish 1"
  },
  "muallif": "",
  "litsenziya": "ISC",
  "qaramliklar": {
    "lahza": "^ 2.22.2"
  }
}

Keyinchalik bu loyihani boshqalar bilan almashishda foydalidir - node_modules papkasini almashish o'rniga (bu juda katta bo'lishi mumkin) siz faqat pack.json faylini almashishingiz kerak va boshqa ishlab chiquvchilar npm install buyrug'i bilan avtomatik ravishda kerakli paketlarni o'rnatishi mumkin.

Shunday qilib, endi biz veb-saytdan moment.js-ni qo'lda yuklab olishimiz shart emas, uni npm-dan foydalanib avtomatik ravishda yuklab olishimiz va yangilashimiz mumkin. Node_modules jildiga nazar tashlasak, node_modules / moment / min katalogida moment.min.js faylini ko'rishimiz mumkin. Bu index.html faylidagi moment.min.js-ning npm yuklab olingan versiyasiga quyidagicha bog'lanishimiz mumkin degan ma'noni anglatadi:





  
   JavaScript misol 
  
  


  

HTML dan salom!

Shunday qilib yaxshi tomoni shundaki, biz npm-dan buyruqlar satri orqali paketlarimizni yuklab olish va yangilash uchun foydalanishimiz mumkin. Yomon narsa shundaki, biz node_modules papkasini qidirib, har bir paketning manzilini topishimiz va uni HTML ichiga qo'shishimiz kerak. Bu juda noqulay, shuning uchun keyingi safar ushbu jarayonni qanday avtomatlashtirishni ko'rib chiqamiz.

JavaScript moduli to'plamidan foydalanish (veb-paket)

Aksariyat dasturlash tillari bir fayldan boshqasiga kodni import qilish usulini ta'minlaydi. Dastlab JavaScript ushbu xususiyat bilan ishlab chiqilmagan, chunki JavaScript faqat brauzerda ishlash uchun yaratilgan, mijozning kompyuteridagi fayl tizimiga kirish huquqi bo'lmagan (xavfsizlik sababli). Shunday qilib, uzoq vaqt davomida bir nechta fayllarda JavaScript kodini tashkil qilish har bir faylni global miqyosda almashiladigan o'zgaruvchilar bilan to'ldirishingizni talab qildi.

Bu aslida yuqoridagi moment.js misolida bajarayotgan ishlarimiz - butun moment.min.js fayli HTML ga yuklangan, u global o'zgaruvchan momentni belgilaydi va shu daqiqadan so'ng yuklangan har qanday faylga mavjud bo'ladi. js (unga kirish kerak yoki kerak emasligidan qat'iy nazar).

2009 yilda brauzerdan tashqarida JavaScript uchun ekotizimni belgilash maqsadida CommonJS deb nomlangan loyiha boshlandi. CommonJS-ning katta qismi modullarning spetsifikatsiyasi bo'lib, natijada JavaScript dasturlash tillari singari fayllar bo'ylab global o'zgaruvchiga murojaat qilmasdan kodni import va eksport qilishga imkon beradi. CommonJS modullarini amalga oshirishda eng mashhuri bu node.js.

Yuqorida aytib o'tilganidek, node.js - bu serverda ishlashga mo'ljallangan JavaScript ish vaqti. Oldingi misol node.js modullaridan foydalanishga o'xshaydi. HTML-skript yorlig'i bilan moment.min.js-ni yuklash o'rniga uni to'g'ridan-to'g'ri JavaScript-ga yuklashingiz mumkin:

// index.js
var moment = zarur ('lahza');
console.log ("JavaScript-dan salom!");
console.log (moment (). startOf ('day'). from now ());

Shunga qaramay, node.js-da modulni yuklash jarayoni juda yaxshi ishlaydi, chunki node.js bu kompyuterning fayl tizimiga kirish imkoniyati bo'lgan server tilidir. Node.js shuningdek, har bir npm modul yo'lining joylashuvini biladi, shuning uchun talab ("./ node_modules / moment / min / moment.min.js") o'rniga siz shunchaki talab ("moment") yozishingiz mumkin - juda yoqimli .

Bu node.js uchun juda yaxshi, lekin agar siz yuqoridagi kodni brauzerda ishlatishga harakat qilsangiz, talab aniqlanmagan degan xato olasiz. Brauzer fayl tizimiga kirish huquqiga ega emas, ya'ni modullarni yuklash juda qiyin - fayllarni yuklash dinamik, sinxron (bajarishni sekinlashtiradigan) yoki asinxron ravishda (vaqt bilan bog'liq muammolarga olib kelishi mumkin) amalga oshirilishi kerak.

Bu erda modul to'plami keladi. JavaScript moduli to'plami - bu brauzerga mos keladigan (kirish huquqiga muhtoj bo'lmagan) yakuniy natijani yaratish uchun (fayl tizimiga kirish huquqiga ega) o'rnatish bosqichida muammoni hal qiladigan vositadir. fayl tizimiga). Bunday holda, biz barcha talab qilinadigan bayonotlarni (bu brauzerning JavaScript sintaksisi yaroqsiz) topib, ularni har bir kerakli faylning haqiqiy tarkibiga almashtirish uchun modul to'plamchiga muhtojmiz. Yakuniy natija bitta to'plamlangan JavaScript faylidir (bayonot talab qilinmaydi)!

Eng mashhur modul to'plami 2011 yilda chiqarilgan va node.js uslubini ishlatishda kashshof bo'lgan Browserify edi (bu npm-ni tanlab olish uchun to'plam menejeriga aylanishiga imkon berdi). Taxminan 2015 yilda veb-paket oxir-oqibat ko'proq keng tarqalgan modul to'plamiga aylandi (veb-paketning turli xil funktsiyalaridan to'liq foydalangan React frontend ramkasining mashhurligi tufayli).

Brauzerda ishlash uchun yuqoridagi talab qilingan ('moment') misolni olish uchun veb-paketdan qanday foydalanishni ko'rib chiqaylik. Avval loyihaga veb-paketni o'rnatishimiz kerak. Webpack o'zi npm to'plami, shuning uchun uni buyruq satridan o'rnatamiz:

$ npm veb-to'plamni o'rnatish - cli -sa - dev

E'tibor bering, biz ikkita paketni - webpack va webpack-cli (buyruq satridan veb-paketni ishlatishga imkon beradigan) o'rnatmoqdamiz. Shuningdek, --sa-dev argumentiga e'tibor bering - bu uni rivojlanish qaramligi sifatida saqlaydi, bu sizning ishlab chiqarish serveringizda emas, balki sizning atrof-muhitingizda zarur bo'lgan paketni anglatadi. Siz buni avtomatik ravishda yangilangan pack.json faylida ko'rishingiz mumkin:

{
  "name": "modern-javascript-example",
  "versiya": "1.0.0",
  "tavsif": "",
  "main": "index.js",
  "skriptlar": {
    "test": "echo \" Xato: hech qanday sinov aniqlanmagan \ "&& chiqish 1"
  },
  "muallif": "",
  "litsenziya": "ISC",
  "qaramliklar": {
    "lahza": "^ 2.19.1"
  },
  "devDependents": {
    "veb-paket": "^ 4.17.1",
    "veb-paket": "^ 3.1.0"
  }
}

Endi biz node_modules papkasida paketlar sifatida veb-to'plam va veb-to'plamni o'rnatdik. Webpack-cli buyruq satridan quyidagicha foydalanishingiz mumkin:

$ ./node_modules/.bin/webpack index.js --mode = ishlab chiqish

Ushbu buyruq node_modules papkasida o'rnatilgan veb-to'plamni ishga tushiradi, index.js faylidan boshlang, har qanday talablarni toping va bitta chiqish faylini yaratish uchun (standart ravishda dist / main bo'lgan) yaratish uchun tegishli kod bilan almashtiring. js). --Mode = ishlab chiqish argumenti --mode = production argumenti bilan minitlangan natijadan farqli o'laroq, JavaScript-ni ishlab chiquvchilar uchun o'qilishi kerak.

Endi bizda dist / main.js veb-paketi chiqqandan so'ng, uni brauzerda index.js o'rniga ishlatamiz, chunki unda noto'g'ri talablar ko'rsatmalari mavjud. Bu index.html faylida quyidagicha aks etadi:





  
   JavaScript misol 
  


  

HTML dan salom!

Agar siz brauzerni yangilasangiz, hamma narsa avvalgidek ishlayotganini ko'rishingiz kerak!

E'tibor bering, biz har safar index.jsni o'zgartirganda veb-qo'mondon buyrug'ini ishlatishimiz kerak bo'ladi. Bu veb-sahifaning yanada takomillashtirilgan xususiyatlaridan (masalan, translyatsiyalangan koddan dastlabki kodni disk raskadrovka qilish uchun manba xaritalarini yaratish) foydalanganda juda zerikarli bo'ladi. Webpack, bizning holatlarimizga o'xshab ko'rinadigan webpack.config.js nomli loyihaning ildiz katalogidagi konfiguratsiya faylidan parametrlarni o'qishi mumkin.

// webpack.config.js
modul.exports = {
  rejimi: "rivojlantirish",
  kirish: './index.js',
  chiqish: {
    fayl nomi: 'main.js',
    publicPath: "dist"
  }
};

Endi har safar biz index.js o'zgartirilganda quyidagi buyruq bilan veb-sahifani ishga tushirishimiz mumkin:

$ ./node_modules/.bin/webpack

Indeks.js va --mode = ishlab chiqish parametrlarini endi ko'rsatib o'tirishning hojati yo'q, chunki veb-paket bu imkoniyatlarni webpack.config.js faylidan yuklamoqda. Bu yaxshiroq, lekin har bir kod o'zgarishi uchun ushbu buyruqni kiritish juda zerikarli - biz bu jarayonni biroz yumshoqroq qilamiz.

Umuman olganda, bu unchalik ko'p ko'rinmasligi mumkin, ammo bu ish jarayonining ba'zi bir katta afzalliklari bor. Endi tashqi skriptlarni global o'zgaruvchilar orqali yuklamaymiz. HTML-ga yangi