Webpack-a giriş: nədir və onu necə istifadə etmək olar

Giriş

Tamam, Webpack haqqında eşitdiyinizi güman edirəm - buna görə buradasınız, elə deyilmi? Əsl sual budur ki, bu barədə nə bilirsiniz? Bunun necə işlədiyinə dair bir neçə şey bilə bilərsiniz və ya tamamilə heç bir fikriniz yoxdur. Hər halda, sizi əmin edə bilərəm ki, bu yazını oxuduqdan sonra yəqin ki, ümumi veb səhifədəki vəziyyətlə kifayət qədər rahat olacaqsınız.

Axı, zərurət ixtiranın anasıdır ...

Veb səhifənin niyə olduğunu söyləmək üçün mükəmməl bir yol yuxarıdakı sitatdır. Ancaq daha yaxşı başa düşmək üçün, JavaScript-nin yeni seksual bir şey olmadığı bir vaxta qayıtmalıyıq, köhnə bir veb sayt yaxşı köhnə kiçik bir dəstə idi .html, CSS və bəlkə də bir və ya bir bəzi hallarda yalnız bir neçə JavaScript sənədləri. Ancaq çox keçmədən hər şey dəyişəcək.

Problem nə idi?

Bütün geliştirici icması daim Javascript / veb tətbiqetmələrini istifadə və quraraq ümumi istifadəçi və geliştirici təcrübəsini yaxşılaşdırmağa çalışır. Buna görə bir çox yeni kitabxana və çərçivə sənədlərini təqdim etdik.

Bəzi dizayn nümunələri zamanla inkişaf etdiriciləri mürəkkəb JavaScript tətbiqlərini yazmaq üçün daha yaxşı, daha güclü, lakin çox asan bir şəkildə təmin etmək üçün inkişaf etmişdir. Əvvəllər veb saytlar təkcə çox sayda sənəd olan kiçik bir paket deyildi. Javascript modullarının tətbiqi həcmli olacağını bildirdilər, çünki encapsulated kiçik ədəd hissələrinin yazılması yeni tendensiya oldu. Bütün bunlar nəticədə bütün tətbiq paketinin dörd və ya beş qat çox fayl olduğu bir vəziyyətə gətirdi.

Tətbiqin ümumi ölçüsü yalnız bir problem deyildi, həm də inkişaf etdiricilərin yazdıqları kod tipində və brauzerlərin başa düşə biləcəyi kod tipində də böyük bir boşluq var idi. Geliştiricilər, paketlərin içindəki kodu şərh edə bilməsi üçün polyfills adlı çox sayda köməkçi kodu istifadə etməli oldular.

Bu problemləri həll etmək üçün veb-sayt yaradıldı. Veb paket statik modul paketidir.

Webpack cavab necə oldu?

Bir sözlə, Webpack paketinizi axtarır və veb tətbiqinizin gözlənildiyi kimi işləməsi lazım olan müxtəlif modullardan ibarət bir asılılıq diaqramı kimi bir şey yaradır. Bu diaqramdan asılı olaraq, tələb olunan minimum sayda, tez-tez sadəcə HTML sənədinə asanlıqla daxil edilə bilən və tətbiq üçün istifadə edilə bilən bir bundle.js faylından ibarət yeni bir paket yaradılır.

Bu yazının növbəti hissəsində veb-paketin qurulması ilə addım-addım sizə yol göstərəcəyəm. Sonda ümid edirəm veb səhifənin əsaslarını başa düşəcəksiniz. Beləliklə, bu yayma əldə edək ...

Biz nə tikirik?

Yəqin ki, ReactJS haqqında eşitmisiniz. Reaktivləri bilirsinizsə, güman ki, yaradın-reaksiya tətbiqetməsinin nə olduğunu bilirsiniz. Bu iki şeyin nə olduğuna dair heç bir fikri olmayanlar üçün ReactJS, ağıllı kompleks UI yaratmaqda çox köməkçi olan bir UI kitabxanasıdır və yaratmaq-reaksiya-tətbiq bir qazan şablonu qurmaq və ya açmaq üçün bir CLI vasitəsidir. -Dev quraşdırma tətbiqetmələrə cavab verir.

Bu gün biz sadə bir reaksiya tətbiqetməsini hazırlayacağıq, ancaq CF-yaratmadan reaksiya verin. Ümid edirəm ki, sizin üçün kifayət qədər gülməli səslənir. :)

Quraşdırma mərhələsi

npm int

Doğrudur, demək olar ki, bütün yaxşı şeylər başlayır: sadə köhnə npm tashabb. VS Code istifadə edəcəyəm, amma işə başlamaq üçün hər hansı bir kod redaktorundan istifadə edə bilərəm.

Bunu etməzdən əvvəl, ən son nodeJS və ən son npm versiyasını kompüterinizdə quraşdırdığınızdan əmin olun. Proses haqqında daha çox məlumat əldə etmək üçün bu əlaqələrin hər birini vurun.

$ npm başlanğıc

Bu, bir başlanğıc paketi yaradır və bizim üçün pack.json faylını əlavə edir. Bu tətbiqin qurulması üçün tələb olunan bütün asılılıqlar burada qeyd edilmişdir.

Sadə React tətbiqini qurmaq üçün iki əsas kitabxanaya ehtiyacımız var: React və ReactDOM. Onları npm ilə tətbiqimizə asılılıq şəklində əlavə edək.

$ npm - cavab verdim - saxla

Bundan sonra veb paketimizi əlavə etməliyik ki, tətbiqimizi bir yerə yığaq. Bizə yalnız bir dəstə lazım deyil, həm də Webpack dev serveri vasitəsilə mümkün olan isti bir yeniləmə lazımdır.

$ npm və veb-paket veb-paket-dev-server veb-paket-cli --save - dev

- Saxla - dev bu modulların yalnız dev asılılığını göstərir. İndi React ilə işlədiyimiz üçün, React-ın ES6 siniflərindən və bütün brauzerlər tərəfindən başa düşülə bilməyəcəyi idxal ifadələrindən istifadə etdiyini nəzərə almalıyıq. Kodun bütün brauzerlər tərəfindən oxunmasının təmin edilməsi üçün kodumuzu brauzerlər üçün normal oxunan koda çevirmək üçün babel kimi bir vasitəyə ehtiyacımız var.

$ npm i babel-core babel-loader @ babel / default-reaksiya @ babel / default-env html-webpack-plugin --save-dev

Nə deyə bilərəm, söz verdiyim qurğuların ən çoxu idi. Babel vəziyyətində əvvəlcə Babel əsas kitabxanasını, sonra yükləyicini və nəhayət 2 plagin və ya əvvəlcədən React və bütün yeni ES2015 və ES6 kodu ilə işləmək üçün yüklədik.

İndi kod əlavə edin və veb paketi konfiqurasiya etməyə başlayın.

Pack.json faylı bütün əvvəlki quraşdırmalardan sonra necə görünməlidir. Bu yazını izlədiyiniz vaxtdan asılı olaraq fərqli bir versiya nömrəsi ola bilər.

Kod

Tətbiq quruluşumuzun kökünə bir webpack.config.js faylı əlavə etməklə başlayaq. Aşağıdakı kodu webpack.config faylınıza yapışdırın.

const yolu = tələb ('yol'); const HtmlWebpackPlugin = tələb ('html-webpack-plugin');
module.exports = {// Bu xüsusiyyət tətbiqetmənin Girişə başladığını müəyyənləşdirir: './ src / index.js',
// Bu mülk, paketlənmiş faylı təmin etmək üçün istifadə olunan fayl yolunu və fayl adını müəyyənləşdirir. Çıxış: {yol: path.join (__ dirname, '/ dist'), fayl adı: 'bundle.js'},
// Yükləmə proqramlarını qurmaq Modulu: {Qaydalar: [{Test: /\.js$/, xaric: / node_modules /, istifadə: {{loader: 'babel-loader'}}]},
// JS fayllarını təmin etmək üçün HTML faylı istifadə etmək üçün plagin qurun. Pluginlər: [yeni HtmlWebpackPlugin ({şablon: './src/index.html'})]}

Tamam yuxarıdakı cərgələri başa düşək.

Birincisi, fayl yerinə daxil olmaq və fayl yerində dəyişiklik etmək üçün standart yol moduluna ehtiyacımız var.

Sonrakı, dəstli JavaScript sənədlərini təmin etmək üçün istifadə ediləcək bir HTML faylı yaratmaq üçün HTMLWebpackPlugin lazımdır. Linki tıklayarak HTMLWebpackPlugin haqqında daha çox oxuyun.

Sonra bəzi xüsusiyyətlərə sahib olan ixrac.module obyekti var. Birincisi, daxili asılılıq diaqramını qurmaq üçün veb-paketin hansı fayldan başlamağı lazım olduğunu göstərən giriş əmlakıdır.

modul.exports = {
giriş: './ src / index.js'
}

Bundan sonra çıxış mülkiyyəti, yığılmış faylın harada yaradılacağını və yığılmış faylın adının necə olacağını göstərir. Bu output.path və output.filename xüsusiyyətləri vasitəsilə edilir.

modul.exports = {
// Bu mülk, paketlənmiş faylı təmin etmək üçün istifadə olunan fayl yolunu və fayl adını müəyyənləşdirir. Çıxış: {yol: path.join (__ dirname, '/ dist'), fayl adı: 'bundle.js'},
}

Sonrakı yükləyicilərdir. Bu veb-paketin müəyyən bir fayl növü üçün nə etməli olduğunu göstərir. Unutmayın ki, qutudan kənar veb-paket yalnız JavaScript və JSON-u başa düşür. Ancaq layihənizdə fərqli bir dil istifadə olunarsa, burada bu yeni dil ilə nəyin baş verəcəyini göstərə bilərsiniz.

modul.exports = {
// Yükləmə proqramlarını qurmaq Modulu: {Qaydalar: [{Test: /\.js$/, xaric: / node_modules /, istifadə: {{loader: 'babel-loader'}}]}
}

Məlumat hər bir modul mülkü üçün bir obyektdə verilməlidir, bu da qaydalar toplusunu ehtiva edir. Hər bir iş üçün bir obyekt olacaq. Mən də bildirdim ki, node_modules qovluğunda olan hər şey xaric edilməlidir.

Sonrakı plagin mülkiyyətidir. Bu Webpack-in funksionallığını genişləndirmək üçün istifadə olunur. Bir modul modulun ixrac obyekti daxilində plugin massivində istifadə olunmazdan əvvəl eyni şeyə ehtiyacınız var.

modul.exports = {
// JS fayllarını təmin etmək üçün HTML faylı istifadə etmək üçün plagin qurun. Pluginlər: [yeni HtmlWebpackPlugin ({şablon: './src/index.html'})]
}

Artıq izah edildiyi kimi, bu xüsusi plugin src qovluğunda göstərilən faylı istifadə edir. Bundan sonra bütün paketli fayllar avtomatik daxil edildiyi HTML sənədimiz üçün şablon kimi istifadə olunur. İstifadə edə biləcəyimiz bir çox əlavə plagin var. Daha çox məlumat rəsmi veb saytında tapa bilərsiniz.

Nəhayət, quraşdırdığımız babel əvvəlcədən istifadə etmək üçün .babelrc faylı yaratmalı və kodumuzda ES6 siniflərini və idxal təlimatlarını nəzərə almalıyıq. .Babelrc faylına aşağıdakı kod xətlərini əlavə edin.

{"Üstünlüklər": ["env", "cavab ver"]}

İndi babelin bu hafızaları necə istifadə edə biləcəyi dəqiqdir. Tamam, quraşdırma kifayətdir - necə işlədiyini görmək üçün biraz Reaksiya kodu əlavə edək.

Kod cavabı

Tətbiqin başlanğıc nöqtəsi src qovluğundakı index.js faylı olduğundan, bundan başlayaq. Bu vəziyyətdə ilk növbədə həm React, həm də ReactDOM ehtiyacımız var. Aşağıdakı kodu index.js faylınıza yapışdırın.

idxal 'reaksiya' dan reaksiya; 'reaksiya-dom' -dan ReactDOM-u idxal edin; './Komponentlər/App' dan tətbiq idxal edin;
ReactDOM.render ( , sənəd.getElementById ('tətbiq'));

Beləliklə, yaratdığınız komponent qovluğundan başqa bir fayl idxal edirik və App.js. adlı qovluğa başqa bir fayl əlavə edirik. Beləliklə, App.js faylında olanlara nəzər salaq:

'reaksiya' dan Reaction, {Komponent} idxal edin
Sinif tətbiqi komponenti genişləndirir {render () {return ( Veb-paket + reaksiya tənzimlənməsi )}}
İxrac standart tətbiq;

Demək olar ki, bitmişik. İndi nə etməlisinizsə, əməliyyat zamanı yenidən yükləməni aktivləşdirin. Bu, brauzerin hər dəfə dəyişiklik aşkar edildikdə səhifəni yenidən yüklədiyi və bütün tətbiqləri qurmaq və bağlamaq qabiliyyətinə sahib olması deməkdir.

Bunu etmək üçün pack.json faylına skript dəyərlərini əlavə edirik. Paket.json faylınızın skript obyektindəki test xüsusiyyətini çıxarın və bu iki skript əlavə edin:

"başlanğıc": "veb-paket-dev-server - rejimi inkişaf etdirmək - açmaq - hot",
"qurmaq": "veb-paket - rejim istehsalı"

Hazırsınız! Terminalınıza gedin, kök qovluğuna gedin və npm başlanğıcını işləyin. Kompüterinizdə bir geliştirici serverinə başlamalı və brauzerinizdə HTML faylı təmin etməlidir. Kiçik və ya böyük dəyişikliklər etsəniz və kodu saxlasanız, brauzeriniz ən son dəyişiklikləri göstərmək üçün avtomatik olaraq yenilənəcəkdir.

Tətbiqi bağlamağa hazır olduğunuzu düşündükdən sonra npm qurma əmrinə vurun və Webpack hər hansı bir veb serverə yerləşdirilə bilən layihə qovluğunuzda optimallaşdırılmış bir dəstə yaradacaq.

Nəticə

Bu yalnız kiçik bir tətbiq və ya Webpack və Babel-in istifadə vəziyyətidir, lakin tətbiqlər hədsizdir. Ümid edirəm Webpack və Babel ilə işləmək üçün daha çox yol və vasitə tapmaq üçün kifayət qədər həyəcanlandınız. Xahiş edirəm daha çox məlumat almaq və ətraflı oxumaq üçün rəsmi saytlara daxil olun.

Tərkibindəki bütün kodlarla bir github depo yaratdım. Hər hansı bir sualınız varsa, depo ilə əlaqə saxlayın.

Veb qəpik vasitəsilə iki qəpiyim? Bəzən bunun sadəcə bir vasitə olduğunu düşünürsən və niyə bir vasitə haqqında çox narahat olmalısan? Ancaq mən deyəndə mənə inanın: Veb səhifəni öyrənmək üçün ilkin mübarizə veb paket olmadan inkişaf etdirməyə sərf etdiyiniz çoxlu sayda saata qənaət edir.

Ümid edirik ki, tezliklə yenidən maraqlı bir məqalə dərc edə biləcəyik. İnşallah bu kitabı oxumağı xoşladınız!

Yuxarıda göstərilən addımlar / prosesləri yerinə yetirərkən hər hansı bir çətinlik və ya problemlə qarşılaşarsanız, bizə müraciət etməkdən və şərhlərinizdən çəkinməyinizi xahiş edirik.

LinkedIn: https://www.linkedin.com/in/ashish-nandan-singh-490987130/

Twitter: https://twitter.com/ashishnandansin