Webpack-ке кіріспе: бұл не және оны қалай пайдалану керек

Кіріспе

Жарайды, мен сіз Webpack туралы естідім деп ойлаймын - сондықтан сіз осындасыз, солай ма? Нақты сұрақ, сіз бұл туралы не білесіз? Сіз бұл қалай жұмыс істейтіні туралы бірнеше нәрсені білетін шығарсыз немесе сізде ешқандай түсінік жоқ. Қалай болғанда да, мен сізді осы мақаланы оқығаннан кейін веб-буманың жалпы жағдайына байланысты ыңғайлы болатынына сендіре аламын.

Өйткені, қажеттілік - бұл өнертабыстың анасы ...

Неліктен веб-беттің бар екенін айтудың тамаша тәсілі - жоғарыдағы баға. Бірақ мұны жақсы түсіну үшін, біз JavaScript жаңа сексуалды нәрсе болмаған кезге оралуымыз керек, ежелгі уақытта веб-сайт жақсы ескі .html, CSS-тің кішкентай ғана бөлігі болған шығар, бәлкім бір немесе біреу. кейбір жағдайларда тек бірнеше JavaScript файлдары. Бірақ көп ұзамай бәрі өзгереді.

Мәселе қандай болды?

Барлық әзірлеушілер қауымдастығы Javascript / веб-қосымшаларын пайдалану және құру бойынша жалпы қолданушылар мен әзірлеушілердің тәжірибесін жақсартуға үнемі ұмтылады. Сондықтан біз көптеген жаңа кітапханалар мен рамкаларды енгіздік.

Кейбір дизайн үлгілері уақыт өте келе дамып келеді, олар әзірлеушілерге күрделі JavaScript қосымшаларын жазудың жақсы, күшті, бірақ өте қарапайым әдісін ұсынады. Бұрын веб-сайттар тақ санды файлдардың шағын пакетіне айналды. Олар JavaScript модульдерін енгізу үлкен көлемде болады деп мәлімдеді, өйткені капсулаланған шағын кодтарды жазу жаңа бағыт болды. Мұның бәрі, сайып келгенде, барлық қосымшаларда төрт-бес есе көп файл болған жағдайға әкелді.

Қосымшаның жалпы өлшемі қиын болып қана қоймай, сонымен қатар жасаушылар жазған код түрі мен браузерлер түсінетін кодтың түріне қатысты үлкен алшақтық болды. Әзірлеушілерге пакеттердегі кодты түсіну үшін браузерлердің полиметрлер деп аталатын көптеген қосалқы кодтарын қолдануға тура келді.

Осы мәселелерді шешу үшін веб-бет құрылды. Веб-пакет - бұл тұрақты модульді байлаушы.

Вебпак қалай жауап берді?

Қысқасы, Webpack сіздің пакетіңізді іздейді және тәуелділік диаграммасы ретінде белгілі нәрсені жасайды, ол сіздің веб-қосымшаңыз күткендей жұмыс істеуі керек түрлі модульдерден тұрады. Осы диаграммаға байланысты жаңа файл жасалады, ол қажетті файлдардың ең аз санынан тұрады, көбінесе тек HTML-файлға оңай енгізіліп, қолданбада қолдануға болатын жалғыз bundle.js файлынан тұрады.

Осы мақаланың келесі бөлігінде мен сізге веб-буманы орнатуға кезең-кезеңмен бағыт беремін. Қорытындылай келе, сіз веб-беттің негіздерін түсінесіз деп үміттенемін. Сонымен, осы роликті алайық ...

Біз не тұрғызып жатырмыз?

Сіз ReactJS туралы естіген шығарсыз. Егер сіз реактивтіJS білетін болсаңыз, онда сіз құру-реакция-қосымшаның не екенін білетін шығарсыз. Осы екі нәрсенің не екенін білмейтіндер үшін, ReactJS - UI кітапханасы, ол интеллектуалды кешенді UI құруда өте пайдалы, ал құру-реакция-қосымшасы CLI-ді қазанды орнатуға немесе жүктеуге арналған құрал болып табылады. -Dev қондырғысы өтінімдерді жасауға жауап береді.

Бүгін біз қарапайым React қосымшасын жасайтын боламыз, бірақ CLI-реакциясы-қосымшасыз. Бұл сізге күлкілі болып көрінеді деп үміттенемін. :)

Орнату кезеңі

npm инт

Дұрыс, барлық жақсы нәрселер осылай басталады: қарапайым ескі npm бастамасы. Мен VS кодын қолданамын, бірақ мен кез-келген код өңдегішін қолдана аламын.

Мұны жасамас бұрын, компьютерде соңғы nodeJS және npm соңғы нұсқасы орнатылғанына көз жеткізіңіз. Процесс туралы көбірек білу үшін осы сілтемелердің әрқайсысын нұқыңыз.

$ npm бастамасы

Бұл стартер пакетін жасайды және бізге pack.json файлын қосады. Осы қосымшаны құруға қажетті барлық тәуелділіктер осы жерде көрсетілген.

Қарапайым React қосымшасын құру үшін бізге екі негізгі кітапхана қажет: React және ReactDOM. Оларды тәуелділік ретінде npm қосымшасына қосайық.

$ npm мен жауап беру домені - сақтау

Әрі қарай бағдарламаны біріктіру үшін веб-пакетті қосу керек. Бізге пакет қана емес, сонымен қатар Webpack dev сервері арқылы мүмкін болатын жүктеу қажет болады.

$ npm мен веб-пакет веб-бума-dev-сервер веб-пакет-cli --save - dev

- Сақтау - бұл модульдер тек тәуелділіктер екенін білдіреді. Енді біз React-пен жұмыс жасай отырып, React ES6 кластарын және барлық шолушылар түсінбейтін импорт мәлімдемелерін қолданатынын ескеруіміз керек. Кодты барлық шолғыштар оқи алатындығына көз жеткізу үшін біздің кодты браузерлер үшін қалыпты оқылатын кодқа айналдыратын babel сияқты құрал қажет.

$ npm мен babel-core babel-loader @ babel / default-реакция @ babel / default-env html-webpack-плагин --save-dev

Не айтайын, мен уәде еткен қондырғылардың ең көп саны болды. Babel жағдайында біз алдымен React және барлық жаңа ES2015 және ES6 кодтарымен арнайы жұмыс істеу үшін Babel негізгі кітапханасын, содан кейін жүктеушіні және соңында 2 плагинді немесе алдын-ала орнатуды жүктедік.

Енді код қосыңыз және веб-буманы теңшей бастаңыз.

Pack.json файлы барлық алдыңғы қондырғыларға осылай қарау керек. Осы мақаланы қашан орындағаныңызға байланысты, сізде басқа нұсқа нөмірі болуы мүмкін.

Код

Webpack.config.js файлын қолданбалы құрылымның түбіріне қосудан бастайық. Келесі кодты webpack.config файлына салыңыз.

const path = required ('жол'); const HtmlWebpackPlugin = талап ('html-webpack-plugin');
module.exports = {// Бұл сипат бағдарлама енуін қай жерде анықтайды: './ src / index.js',
// Бұл сипат файлдың жолын және жинақталған файлды қамтамасыз ету үшін қолданылатын файлдың атын анықтайды. Шығу: {path: path.join (__ dirname, '/ dist'), файл атауы: 'bundle.js'},
// Жүктеу бағдарламаларын орнату Модуль: {Ережелер: [{Сынақ: /\.js$/, қоспау: / node_modules /, пайдалану: {жүктеуші: 'babel-loader'}}]},
// JS файлдарын қамтамасыз ету үшін HTML файлын пайдалану үшін плагинді орнатыңыз. Плагиндер: [жаңа HtmlWebpackPlugin ({шаблон: './src/index.html'})]}

Жарайды, жоғарыдағы жолдарды түсінейік.

Біріншіден, файлдың орналасқан жеріне кіру және файлдың орнын өзгерту үшін әдепкі жол модулі қажет.

Әрі қарай бізге HTML файлдарын құру үшін HTMLWebpackPlugin қажет, ол JavaScript файлдарын қамтамасыз ету үшін пайдаланылады. HTMLWebpackPlugin туралы сілтемені басу арқылы оқыңыз.

Содан кейін бізде кейбір қасиеттері бар export.module нысаны болады. Біріншісі - ішкі тәуелділік диаграммасын құру үшін веб-буманың қай файлдан басталатынын көрсететін енгізу сипаттамасы.

модуль.экспорт = {
енгізу: './ src / index.js'
}

Әрі қарай, шығыс сипаты жинақталған файлды қайда жасауға болатындығын және жинақталған файлдың атауын көрсетуді ұсынады. Бұл output.path және output.filename қасиеттері арқылы жасалады.

модуль.экспорт = {
// Бұл сипат файлдың жолын және жинақталған файлды қамтамасыз ету үшін қолданылатын файлдың атын анықтайды. Шығу: {path: path.join (__ dirname, '/ dist'), файл атауы: 'bundle.js'},
}

Келесі жүк тиегіштер. Бұл веб-буманың белгілі бір файл түрі үшін не істеу керектігін көрсетеді. Есіңізде болсын, веб-бума тек JavaScript және JSON түсінеді. Алайда, егер сіздің жобаңызда басқа тіл қолданылса, сіз осы жаңа тілмен не болатынын көрсете аласыз.

модуль.экспорт = {
// Жүктеу бағдарламаларын орнату Модуль: {Ережелер: [{Сынақ: /\.js$/, қоспау: / node_modules /, пайдалану: {жүктеуші: 'babel-loader'}}]}
}

Ақпараттар ережелер жиынтығын қамтитын әр модуль қасиеті үшін объектіде берілуі керек. Әрбір жағдайға арналған объект болады. Сондай-ақ, мен «node_modules» қалтасындағы барлық нәрсені алып тастау керектігін айттым.

Келесі - плагиннің қасиеті. Бұл Webpack функционалдығын кеңейту үшін қолданылады. Плагинді модульдің экспорттау объектісі ішіндегі плагиндер массивінде қолданбас бұрын сізге керек.

модуль.экспорт = {
// JS файлдарын қамтамасыз ету үшін HTML файлын пайдалану үшін плагинді орнатыңыз. Плагиндер: [жаңа HtmlWebpackPlugin ({шаблон: './src/index.html'})]
}

Жоғарыда айтылғандай, бұл арнайы плагин src қалтасында көрсетілген файлды қолданады. Содан кейін бұл барлық HTML файлдары автоматты түрде кірістірілетін HTML файлымыз үшін шаблон ретінде пайдаланылады. Біз қолдана алатын басқа плагиндер көп. Қосымша ақпаратты ресми сайттан табуға болады.

Соңында, біз орнатқан babel алдын-ала пайдалану үшін .babelrc файлын жасауымыз керек және ES6 кластарын ескеріп, біздің кодтағы импорттық нұсқаулықтарды ескеру қажет. .Babelrc файлына кодтың келесі жолдарын қосыңыз.

{«Қалаулар»: [«env», «жауап беру»]}

Міне, дәл қазір бабелья осы пресстерді қолдана алады. Жарайды, баптау жеткілікті - оның қалай жұмыс істейтінін көру үшін React кодын қосайық.

Код жауап

Қолданбаның бастапқы нүктесі src папкасындағы index.js файлы болғандықтан, біз оны бастаймыз. Бұл жағдайда бізге алдымен React және ReactDOM қажет. Келесі кодты index.js файлына салыңыз.

'реакциядан' импорттау; ReactDOM-ны 'реактив-домен' импорттау; './Component/App' бағдарламасынан импорттау;
ReactDOM.render ( , document.getElementById ('қолданба'));

Сонымен, біз құрған құрамдас қалтамыздан басқа файлды импорттап, App.js. атты қалтаға басқа файл қосамыз. Сонымен, App.js файлында не бар екенін қарастырайық:

«реакциядан» React, {Component} импорттау
Класс қолданбасы {render () {return (компонент) құрамын кеңейтеді Веб-пакет + реакцияны реттеу )}}
Экспорттық стандартты қосымша;

Біз іс жүзінде аяқталды. Енді сіз тек жұмыс кезінде қайта жүктеуді белсендіруіңіз керек. Бұл өзгеріс анықталған сайын шолғыш парақты қайта жүктейді және егер ол болса, бүкіл қосымшаны құру және жинақтау мүмкіндігі болады дегенді білдіреді.

Ол үшін сценарий мәндерін pack.json файлына қосамыз. Пакет.json файлының сценарийлеріндегі сынақ сипатын жойып, осы екі сценарийді қосыңыз:

«start»: «webpack-dev-server - режимді әзірлеу --open - hot»,
«құрастыру»: «веб-бума - режим өндірісі»

Аяқталды! Терминалға өтіп, түбірлік қалтаға өтіп, npm start іске қосыңыз. Ол сіздің компьютеріңізде әзірлеуші ​​серверін қосып, шолғышта HTML файлын қамтамасыз етуі керек. Егер сіз кішігірім немесе үлкен өзгерістер енгізіп, кодты сақтасаңыз, шолғыш автоматты түрде соңғы өзгертулерді көрсету үшін жаңартылады.

Сіз бағдарламаны байланыстыруға дайын деп ойласаңыз, npm build пәрменін орындаңыз және Webpack кез келген веб-серверде қолдануға болатын сіздің жобалық қалтаңызда оңтайландырылған жиынтық жасайды.

Қорытынды

Бұл жай ғана шағын бағдарлама немесе Webpack және Babel қолдану жағдайлары, бірақ қосымшалар шексіз. Веб-пакетпен және Бабельмен жұмыс істеудің көптеген тәсілдері мен тәсілдерін білуге ​​қуаныштысыз деп үміттенемін. Толығырақ оқып, толығырақ оқу үшін ресми сайттарға кіріңіз.

Мен github репозиторийін оның барлық кодтарымен жасадым. Егер сізде сұрақтар болса, қоймамен хабарласыңыз.

Менің екі цент веб-пакет арқылы? Кейде сіз бұл жай құрал деп ойлайтын шығарсыз және неге сіз бұл құрал туралы тым көп уайымдауыңыз керек? Бірақ мен мынаны айтқан кезде маған сеніңіз: Веб-бетті үйренудегі алғашқы күрес сізге көп сағатты үнемдейді, әйтпесе веб-бетті дамытпай жұмсайсыз.

Жақында тағы бір қызықты мақаланы жариялаймыз деп үміттенеміз. Сізге бұл кітапты ұнады деп сенемін!

Егер сіз жоғарыда аталған қадамдар / процестерді орындау кезінде қандай да бір қиындықтар мен проблемаларға тап болсаңыз, бізбен хабарласыңыз және пікірлер қалдыра аласыз.

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

Twitter: https://twitter.com/ashishnandansin