Webpack 2 chiqqanda qanchalik hayajonlanganini eslaysizmi? Biz v2.2 versiyamizdan xuddi shu muqovali fotosuratni ishlatishga qaror qildik, chunki u bu hayajonni eslatadi !!!

PWebpack 4: bugun chiqarildi !!

Kod nomi: Legato

Bugun biz 4 (Legato) veb-paket mavjudligini e'lon qilishdan mamnunmiz! Siz uni ip yoki npm-da quyidagilar yordamida olishingiz mumkin.

$> ipni veb-paketga qo'shing-cli --dev

yoki

$> npm i veb-paket veb-paket-cli --save-dev

Nega Legato?

Biz har bir asosiy nashrimizga kod nomini berib, yangi an'anani boshlamoqchi edik! Shuning uchun biz ushbu imtiyozni eng yirik OpenCollective homiyimizga berishga qaror qildik: trivago!

Shunday qilib, biz xabar berdik va ularning javobi:

[Trivagoda] biz odatda loyihalarimizga musiqiy mavzuli nom beramiz. Masalan, bizning eski JS Framework "Uyg'unlik" deb nomlangan, bizning yangi ramka - "Musiqa". PHP tomonida biz "Orkestr" deb nomlangan qatlam bilan Symfony-dan foydalanamiz.
Legato har bir yozuvni bo'shliqlarsiz ketma-ket ijro etishni anglatadi.
Veb-sahifa bizning oldingi ilovamizni bo'shliqlarsiz birlashtiradi (JS, CSS va boshqalar). Shunday qilib, biz "legato" veb-sayt uchun juda mos ekanligiga ishonamiz - Patrik Gotxardt trivago Engineeringda

Biz juda xursand bo'ldik, chunki ushbu nashrda ishlagan barcha narsalar ushbu g'oyani veb-saytni legato yoki bo'shliqlarsiz o'z ichiga oladi. Ushbu aql bovar qilmaydigan homiylik yili va veb-4 nomini berganingiz uchun minnatdorman!

️‍Qanday yangi?

4-veb-paketda juda ko'p yangi narsalar bor, ularni hammasini aytib bera olmayman yoki bu post abadiy davom etadi. Shuning uchun men bir nechta narsalarni baham ko'raman va 3dan 4gacha bo'lgan barcha o'zgarishlarni ko'rish uchun iltimos, relizlar va changelog eslatmalarini ko'rib chiqing.

4 4-veb-paket - bu FAST (98% tezroq)!

Biz beta-versiyamizni sinovdan o'tkazgan jamoaning ishlashi haqida qiziqarli xabarlarni ko'rayotgan edik, natijada biz natijalarni tekshirish uchun so'rovnoma o'tkazdim.

Natija hayratlanarli edi. Qurilish vaqti 60 dan 98% gacha kamaydi !! Mana biz ko'rgan ba'zi javoblar.

Bu, shuningdek, hozirga qadar tuzatilgan yuklovchilar va plaginlardagi ba'zi blokirovka qilish xatolarini aniqlash imkoniyatini berdi. PS: biz hali Multicore yoki Doimiy Caching dasturini amalga oshirmadik (5-versiya uchun mo'ljallangan). Bu shuni anglatadiki, yaxshilash uchun hali ko'p joy bor !!!!

Qurilish tezligi biz uchun eng muhim ustuvor yo'nalishlardan biri edi. Dunyodagi barcha xususiyatlarni qo'shish mumkin, ammo agar ular mavjud bo'lolmasa va vaqtni behuda sarf qilsalar, bu nimani anglatadi? Bu biz hozirgacha ko'rgan ba'zi bir nechta misollar, ammo biz buni sinab ko'rishingizni va twitterda #webpack # webpack4 yordamida qurilgan vaqtingiz haqida xabar berishingizni intizorlik bilan kutamiz!

Tartibni, # 0CJS va mantiqiy ko'rsatmalar

Biz sizning konfiguratsiya deb nomlangan rejimingiz uchun yangi xususiyatni taqdim etdik. Rejim ikkita variantga ega: ishlab chiqish yoki ishlab chiqarish va qutidan tashqarida ishlab chiqarish uchun standart. Rejim - bu o'lchamlarni (ishlab chiqarishni) optimallashtirish yoki vaqtni (ishlab chiqishni) optimallashtirish uchun optimallashtirilgan, nozik sozlamalarni taqdim etishning usulidir.

Rejim orqasidagi barcha tafsilotlarni ko'rish uchun siz quydagi o'rta maqolamiz bilan tanishishingiz mumkin:

Bundan tashqari, kirish, chiqish ikkalasi ham standart emas. Bu shuni anglatadiki, ishga tushirish uchun konfiguratsiya kerak emas va rejimda siz konfiguratsiya faylingiz nihoyatda kichrayib ketganini ko'rasiz, chunki biz hozir siz uchun juda ko'p og'irliklarni ko'taryapmiz!

Legato har bir yozuvni bo'shliqlarsiz ketma-ket ijro etishni anglatadi.

Bularning barchasi bilan, bizda hozirda nol konfiguratsiya platformasi mavjud, biz uni kengaytirmoqchimiz. Veb-sahifaning eng muhim xususiyatlaridan biri, biz kengayish qobiliyatiga egamiz. Sizning # 0CJS (Zero-Config JS) ko'rinishingizni kim aniqlaydi? Biz veb-sahifamizni sozlash va chiqarishni tugatgandan so'ng, siz # 0CJS-ni noyob va sizning ish oqimi, kompaniyasi yoki hatto doiraviy hamjamiyati uchun mukammal bo'lishi uchun kengaytira olasiz.

✂ Xayrlashish uchun CommunkChunkPlugin

Biz CommonsChunkPlugin-ni eskirtirdik va olib tashladik va uni standart sozlamalar to'plami bilan almashtirdik va optimizatsiya.splitChunks deb nomlangan osongina haddan tashqari oshiriladigan API. Endi qutidan tashqari, siz turli xil stsenariylarda avtomatik ravishda siz uchun yaratilgan qismlarga ega bo'lasiz!

Biz nima uchun bunday qilganimiz va API qanday ko'rinishi haqida ko'proq ma'lumot olish uchun ushbu postga qarang !!

EbWebAssembly-ni qo'llab-quvvatlash

Endi veb-paket har qanday mahalliy WebAssembly modulini import va eksport qilishni qo'llab-quvvatlaydi. Bu shuni anglatadiki, siz to'g'ridan-to'g'ri Rust, C ++, C va boshqa WebAssembly xost fayllarini import qilishga imkon beradigan yuklovchilarni yozishingiz mumkin.

Modul turi Taqdim etilgan + .MJs qo'llab-quvvatlaydi

Tarixan JavaScript veb-paketdagi birinchi toifadagi yagona modul turi bo'lgan. Bu CSS / HTML to'plamlarini samarali ishlay olmaydigan foydalanuvchilar uchun juda ko'p noqulay og'riqlarni keltirib chiqardi va hokazo. Ushbu yangi API uchun ruxsat berish uchun biz kod bazamizdan JavaScript xususiyatlarini to'liq abstrakt qildik. Hozirda qurilgan, bizda 5 modul turlari mavjud:

  • Javascript / avto: (veb-paketdagi standart standart 3) barcha modul tizimlari yoqilgan JavaScript moduli: CommonJS, AMD, ESM
  • javascript / esm: EcmaScript modullari, boshqa barcha modul tizimlari mavjud emas (.mjs fayllari uchun standart).
  • javascript / dinamik: faqat CommonJS & AMD; EcmaScript modullari mavjud emas
  • json: JSON ma'lumotlari, talab va import orqali mavjud (.json fayllari uchun standart)
  • veb-yig'ish / eksperimental: WebAssembly modullari (hozirda eksperimental va .wasm fayllari uchun standartdir)
  • Bundan tashqari, veb-paket hal qilish uchun .wasm, .mjs, .js va .json kengaytmalarini qidirmoqda.

Ushbu xususiyatning eng diqqatga sazovor tomoni shundaki, endi biz CSS va HTML modul turlari ustida ishlashni davom ettirishimiz mumkin (4.x-dan 5-gacha veb-paketlar uchun mo'ljallangan). Bu sizning kirish nuqtangiz sifatida HTML kabi imkoniyatlarga imkon beradi!

H Agar siz HtmlWebpackPlugin-dan foydalansangiz

Ushbu nashr uchun biz ekotizimga yangi veb-paket 4 API-ni ishlatish uchun plaginlarni yoki yuklovchilarni yangilash uchun bir oy berdik. Ammo, Jan Niklas ish majburiyatlaridan mahrum bo'lgan va shuning uchun biz html-webpack-plaginining yamalgan vilkasini taqdim etdik. Hozir uni o'rnatishingiz mumkin:

$> ip html-webpack-plugin @ webpack-мусоидат / html-webpack-plagin qo'shing

Yan oy oxirida chet el ishlaridan qaytgach, biz yuqoridagi vilkalarimizni jantimon / html-webpack-plaginlariga birlashtirishni rejalashtirmoqdamiz! Ungacha, agar biron bir muammo bo'lsa, ularni bu erga yuborishingiz mumkin!

YANGILASH (3/1/2018): html-webpack-plugin @ 3 endi v4 ko'magi bilan ishlaydi !!!!

Agar sizda boshqa plaginlar va yuklovchilar mavjud bo'lsa, siz bu erda bizning migratsiya bo'yicha qo'llanmamizni ko'rishingiz mumkin:

Va yana ko'p narsalar!

Ko'p xususiyatlar mavjud, shuning uchun ularni rasmiy o'zgartirishlar jurnalida ko'rib chiqishingizni tavsiya qilamiz.

4 v4 hujjatlar qayerda?

Migratsiya bo'yicha qo'llanma va v4 Docs qo'shimchalarini to'liq ko'rib chiqishga juda tayyormiz! Jarayonni kuzatish yoki yordam berish uchun, iltimos bizning hujjatlar omborida to'xtab, keyingi filialni tekshiring va yordam bering!

< -cli haqida nima deyish mumkin?

So'nggi 30 kun ichida biz har bir ramka bilan yaqindan ishladik va ular o'zlarining veb-saytlarini 4-ni qo'llab-quvvatlashga tayyor ekanliklarini isbotladilar. Hatto mashhur kutubxona kabi lodash-es kabi RxJS ham sideEffects bayrog'ini qo'llab-quvvatlamoqda. versiyada siz darhol to'plam hajmining kamayishini ko'rasiz.

AngularCLI jamoasi aytdilarki, ular hattoki keyingi muhim versiyasini (atigi ~ hafta) veb-paket 4 orqali etkazib berishni rejalashtirishmoqda! Agar siz uning holatini bilmoqchi bo'lsangiz, ular bilan bog'laning va qanday yordam berishingiz mumkinligini so'rang (qachon amalga oshirilishini emas).

HyNega shuncha emojisadan foydalanasiz?

Chunki biz aql bovar qilmaydigan mahsulotni yaratishda quvnoq bo'lishimiz mumkin! Biroz urinib ko'rishingiz kerak .

Do'stim eshitish uchun uzr! Agar xohlasangiz, shaxsan men sizga har birining skrinshotini yuboraman

Next Keyin nima bo'ladi?

Biz 4.x va 5 veb-paketi uchun keyingi funktsiyalarni rejalashtirishni boshladik! Ular quyidagilarni o'z ichiga oladi (lekin ular bilan cheklanmaydi):

  • ESM modulining maqsadi
  • Doimiy keshlash
  • WebAssembly yordamini eksperimentaldan barqaror holatga o'tkazing. Daraxtlarni silkitadigan va o'liklarni yo'q qilish qo'shing!
  • O'rnatish - 0CJS-ni uzaytiring, har qanday narsa Zero Config bo'lishi mumkin. Qanday bo'lishi kerak.
  • CSS modulining turi - kirish sifatida CSS (xayrlashish uchun ekstraktTextWebpackPlugin)
  • HTML Module Type - kirish sifatida HTML
  • URL / Fayl moduli turi
  • Modul turi
  • Ko'p tishli
  • Tashkilotimiz Ustavi va Missiyasining bayonotini qayta belgilash
  • Google Yozgi Kod (Yaqin orada alohida xabar keladi !!!)

Rahmat. Yana.

Ishtirokchilar jamoasiga jalb qilinganlarning barchasiga, asosiy guruhga, yuklovchilar va plagin mualliflariga, birinchi marta topshirgan yoki muammolarni bartaraf etishda yordam berganlarga: biz sizga minnatdormiz. Ushbu mahsulot siz uchun va sizga yordam bergan.

2018 bizning doimiy ongimizni yo'q qilish bilan bog'liq va bu go'zal Uyg'onish davri uchun JavaScript-ni ko'rishni boshlang! ❤

Biz bu haqda ko'p marotaba aytib o'tganmiz, ammo bugungi kunda biz yashayotgan ushbu JavaScript uyg'onish davrida veb-sayt kuchli, barqaror va jonli bo'lishiga sabab bo'lgan narsa. Sizsiz ham veb-sahifa yana bir boshqa vosita bo'lishi mumkin (YABT).

O'z hissangizni qo'shishga vaqtingiz yo'qmi? Boshqa yo'llar bilan qaytarib berishni xohlaysizmi? Bizning ochiq jamoamizga xayr-ehson qilib, veb-sahifaga homiy yoki homiy bo'ling. Open kollektiv nafaqat Core Team-ni qo'llab-quvvatlashga yordam beradi, balki bo'sh vaqtlarida tashkilotimizni yaxshilashga ko'p vaqt sarflagan o'z hissasini qo'shganlarni ham qo'llab-quvvatlaydi! ❤