Уводзіны ў Webpack: што гэта такое і як ім карыстацца

Уводзіны

Добра, я мяркую, вы чулі пра Webpack - вось чаму вы тут, праўда? Сапраўднае пытанне: што вы ведаеце пра гэта? Вы можаце ведаць некалькі рэчаў пра тое, як гэта працуе, альбо вы зусім не ўяўляеце. У любым выпадку, я магу вас запэўніць, што пасля прачытання гэтага артыкула вы, верагодна, будзеце дастаткова камфортна падыходзіць да агульнай сітуацыі з вэб-пакетам.

У рэшце рэшт, неабходнасць заключаецца ў вынаходніцтве ...

Ідэальным спосабам сказаць, чаму ёсць вэб-пакет, з'яўляецца цытата вышэй. Але, каб лепш зразумець гэта, мы павінны вярнуцца да часу, калі JavaScript не быў новай сэксуальнай рэччу, калі вэб-сайт у старадаўнія часы быў толькі невялікім кучам добрага старога .html, CSS і, магчыма, аднаго ці аднаго у некаторых выпадках толькі некалькі файлаў JavaScript. Але вельмі хутка ўсё зменіцца.

У чым была праблема?

Уся супольнасць распрацоўнікаў пастаянна імкнецца палепшыць агульны досвед працы карыстальнікаў і распрацоўнікаў з выкарыстаннем і стварэннем Javascript / вэб-прыкладанняў. Таму мы ўвялі шмат новых бібліятэк і рамак.

Некаторыя шаблоны дызайну развіваліся з цягам часу, каб даць распрацоўшчыкам лепшы, больш магутны і ў той жа час просты спосаб напісання складаных прыкладанняў JavaScript. Раней вэб-сайты былі ўжо не проста невялікім пакетам з няцотнай колькасцю файлаў. Яны заявілі, што ўвядзенне модуляў JavaScript стане грувасткім, бо новым трэндам стала напісанне інкапсуляваных невялікіх фрагментаў кода. Усё гэта ў выніку прывяло да сітуацыі, калі ўвесь пакет прыкладанняў утрымліваў у чатыры-пяць разоў больш файлаў.

Задача выклікала не толькі агульны памер прыкладання, але і велізарны разрыў у тыпе напісанага распрацоўшчыкамі кода і тыпе браўзэраў кода. Распрацоўшчыкам прыйшлося выкарыстоўваць шмат дапаможнага кода пад назвай polyfills для таго, каб браўзары маглі інтэрпрэтаваць код у сваіх пакетах.

Для вырашэння гэтых праблем быў створаны вэб-пакет. Webpack з'яўляецца статычным модулем.

Якім быў адказ на Webpack?

Карацей кажучы, Webpack ажыццяўляе пошук вашага пакета і стварае тое, што вядома як схема залежнасці, якая складаецца з розных модуляў, для якіх ваша вэб-дадатак павінна функцыянаваць, як чакалася. У залежнасці ад гэтай дыяграмы ствараецца новы пакет, які складаецца з мінімальнай колькасці неабходных файлаў, часта проста аднаго файла bundle.js, які можна лёгка ўставіць у файл HTML і выкарыстоўваць для прыкладання.

У наступнай частцы гэтага артыкула я правяду вас крок за крокам па наладзе вэб-пакета. У рэшце рэшт, я спадзяюся, вы зразумелі асновы webpack. Такім чынам, давайце правесці гэты пракат ...

Што мы будуем?

Вы, напэўна, чулі пра ReactJS. Калі вы ведаеце, што reactJS, вы, напэўна, ведаеце, што такое "create-react". Для тых з вас, хто не ўяўляе, што гэта за дзве рэчы, ReactJS - гэта бібліятэка карыстацкага інтэрфейсу, якая вельмі дапамагае ў стварэнні інтэлектуальных складаных карыстацкіх інтэрфейсаў, а create-react-прыкладанне - гэта інструмент CLI для наладжвання альбо загрузкі катла. -Дзеў налады рэагуюць, каб зрабіць прыкладання.

Сёння мы збіраемся стварыць простае прыкладанне React, але без CLI create-react-app. Я спадзяюся, што гэта гучыць дастаткова смешна для вас. :)

Фаза ўстаноўкі

npm int

Менавіта так і пачынаюцца амаль усе добрыя рэчы: просты стары npm init. Я буду выкарыстоўваць код VS, але я магу выкарыстоўваць любы рэдактар ​​кода, каб пачаць працу.

Перш чым зрабіць гэта, пераканайцеся, што ў вас на вашым кампутары ўстаноўлена лакальна новая версія nodeJS і апошняя версія npm. Націсніце на кожную з гэтых спасылак, каб даведацца больш пра працэс.

$ npm init

Гэта стварае пачатковы пакет і дадае файл package.json для нас. Тут згадваюцца ўсе залежнасці, неабходныя для стварэння гэтага прыкладання.

Каб стварыць простае прыкладанне React, нам патрэбныя дзве асноўныя бібліятэкі: React і ReactDOM. Давайце дадамо іх у якасці залежнасці да нашага прыкладання з npm.

$ npm я адказваю-dom - эканоміць

Далей нам трэба дадаць вэб-пакет, каб мы змаглі сабраць прыкладанне. Нам спатрэбіцца не толькі камплект, але і гарачая перазагрузка, якая магчымая праз сервер распрацоўшчыкаў Webpack.

$ npm i webpack webpack-dev-сервер webpack-cli --save - dev

--Save - dev азначае, што гэтыя модулі залежаць толькі ад Dev. Цяпер, калі мы працуем з React, нам трэба ўлічваць, што React выкарыстоўвае класы ES6 і заявы аб імпарце, якія не могуць быць зразуметы ўсім браўзэрам. Каб пераканацца, што код можа счытвацца ва ўсіх браўзэрах, нам патрэбны такі інструмент, як Babel, каб пераўтварыць наш код у звычайны для чытання браўзэр.

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

Ну што я магу сказаць, гэта была максімальная колькасць установак, якія я абяцаю. У выпадку з Babel, мы спачатку загрузілі асноўную бібліятэку Babel, затым загрузчык і, нарэшце, 2 убудовы або перадустаноўкі, каб працаваць спецыяльна з React і ўсімі новымі кодамі ES2015 і ES6.

Цяпер дадайце код і пачніце наладжваць вэб-пакет.

Вось так павінен выглядаць файл package.json пасля ўсіх папярэдніх установак. У залежнасці ад таго, калі вы будзеце прытрымлівацца гэтага артыкула, у вас можа быць іншы нумар версіі.

Код

Давайце пачнем з дадання файла webpack.config.js да кораня нашай структуры прыкладанняў. Устаўце наступны код у файл webpack.config.

const path = патрабаваць ('шлях'); const HtmlWebpackPlugin = патрабаваць ('html-webpack-убудова');
module.exports = {// Гэта ўласцівасць вызначае, з чаго пачынаецца дадатак Entry: './ src / index.js',
// Гэта ўласцівасць вызначае шлях да файла і імя файла, якое выкарыстоўваецца для забеспячэння камплектаванага файла Вывад: {path: path.join (__ dirname, '/ dist'), імя файла: 'bundle.js'},
// Настройка праграм загрузкі модуля: {Правілы: [{Тэст: /\.js$/, выключыць: / node_modules /, выкарыстанне: {loader: 'babel-loader'}}]},
// Наладзьце убудова для выкарыстання HTML-файла для прадастаўлення файлаў JS. Убудовы: [новы HtmlWebpackPlugin ({шаблон: './src/index.html'})]}

Добра, давайце разбярэмся ў радках вышэй.

Спачатку нам патрэбен модуль шляху па змаўчанні для доступу да месцазнаходжання файла і ўнясення змяненняў у месцазнаходжанне файла.

Далей нам патрэбен HTMLWebpackPlugin для стварэння HTML-файла, які будзе выкарыстоўвацца для прадастаўлення камплектных файлаў JavaScript. Даведайцеся больш пра HTMLWebpackPlugin, перайшоўшы па спасылцы.

Тады ў нас ёсць аб'ект export.module з некаторымі ўласцівасцямі. Першая - гэта ўласцівасць запісу, у якой паказваецца, з якога файла трэба пачаць вэб-пакет для стварэння дыяграмы ўнутранай залежнасці.

module.exports = {
запіс: './ src / index.js'
}

Далей, уласцівасць вываду паказвае, дзе можна згенераваць файл у камплекце і якім павінен быць файл звязанага файла. Гэта робіцца праз уласцівасці output.path і output.filename.

module.exports = {
// Гэта ўласцівасць вызначае шлях да файла і імя файла, якое выкарыстоўваецца для забеспячэння камплектаванага файла Вывад: {path: path.join (__ dirname, '/ dist'), імя файла: 'bundle.js'},
}

Далей ідуць пагрузчыкі. Гэта вызначае, што webpack павінен зрабіць для пэўнага тыпу файла. Памятаеце, што вэб-пакет з скрынкі разумее толькі JavaScript і JSON. Аднак калі ў вашым праекце выкарыстоўваецца іншая мова, вы можаце пазначыць тут, што павінна адбывацца з гэтай новай мовай.

module.exports = {
// Настройка праграм для загрузкі модуля: {Правілы: [{Тэст: /\.js$/, выключыць: / node_modules /, выкарыстанне: {loader: 'babel-loader'}}]]}
}

Інфармацыя павінна быць прадастаўлена ў аб'екце для кожнага ўласцівасці модуля, які таксама змяшчае набор правілаў. Будзе аб'ект для кожнага выпадку. Я таксама ўказаў, што ўсё ў маёй тэчцы node_modules павінна быць выключана.

Далей ідзе ўласцівасць убудовы. Гэта выкарыстоўваецца для пашырэння функцыянальнасці Webpack. Перад тым, як убудова можна будзе выкарыстоўваць у масіве плагіна ў межах экспартнага аб'екта модуля, вам трэба тое ж самае.

module.exports = {
// Наладзьце убудова для выкарыстання HTML-файла для забеспячэння файлаў JS. Убудовы: [новы HtmlWebpackPlugin ({шаблон: './src/index.html'})]
}

Як ужо было растлумачана, гэты спецыяльны убудова выкарыстоўвае паказаны файл у нашай тэчцы src. Затым ён выкарыстоўваецца ў якасці шаблона для нашага HTML-файла, у які ўсе пакетныя файлы аўтаматычна ўстаўляюцца. Ёсць шмат іншых убудоў, якія мы маглі б выкарыстоўваць. Больш інфармацыі можна знайсці на афіцыйным сайце.

Нарэшце, нам трэба стварыць .babelrc файл, каб выкарыстаць устаноўлены ваебель, а таксама ўлічваць класы ES6 і інструкцыі па імпарце ў нашым кодзе. Дадайце наступныя радкі кода ў файл .babelrc.

{"Налады": ["env", "response"]}

І гэта менавіта тое, як вар'ятка зараз можа выкарыстоўваць гэтыя зададзеныя заданні. Добра, налад - дастаткова дадаць код React, каб убачыць, як ён працуе.

Код адкажа

Паколькі адпраўной кропкай прыкладання з'яўляецца файл index.js у тэчцы src, давайце пачнем з яго. У гэтым выпадку спачатку нам патрэбны React і ReactDOM. Устаўце наступны код у файл index.js.

імпарт рэагаваць з 'рэагаваць'; імпартаваць ReactDOM з 'react-dom'; Імпартаваць прыкладанне з "./Components/App";
ReactDOM.render ( , document.getElementById ('прыкладанне'));

Такім чынам, мы проста імпартуем іншы файл з нашай ствараемай тэчкі і дадаем іншы файл у тэчку пад назвай App.js. Такім чынам, давайце паглядзім, што ў файле App.js:

import React, {Component} з 'рэагаваць'
Прыкладанне класа пашырае кампанент {render () {return ( Налада webpack + рэакцыя )}}
Экспарт стандартнага прыкладання;

Мы амаль скончылі. Цяпер усё, што вам трэба зрабіць, гэта актываваць перазагрузку падчас працы. Гэта азначае, што браўзэр перазагружае старонку кожны раз, калі выяўляецца змена і мае магчымасць зборкі і камплектацыі ўсяго прыкладання, калі яно адбудзецца.

Для гэтага мы дадаем значэнні сцэнарыя ў файл package.json. Выдаліце ​​тэставае ўласцівасць у аб'екце сцэнарыяў вашага файла package.json і дадайце гэтыя два сцэнарыі:

"start": "webpack-dev-server - распрацоўка рэжыму --open --hot",
"build": "webpack --mode вытворчасці"

Гатова! Перайдзіце да свайго тэрмінала, перайдзіце ў каранёвую тэчку і запусціце npm start. Ён павінен запусціць сервер распрацоўніка на вашым кампутары і прадаставіць файл HTML у вашым браўзэры. Калі вы ўносіце нязначныя або значныя змены і захаваеце код, ваш браўзэр аўтаматычна абнавіцца, каб паказаць апошнія змены.

Пасля таго, як вы думаеце, што гатовы сабраць прыкладанне, усё, што вам трэба зрабіць, гэта націснуць каманду npm build, і Webpack створыць аптымізаваны пакет у папцы вашага праекта, які можна разгарнуць на любы вэб-сервер.

Выснова

Гэта ўсяго толькі невялікая справа прыкладання альбо выпадку выкарыстання Webpack і Babel, але прыкладанні бязмежныя. Спадзяюся, вы досыць узбуджаны, каб вывучыць больш спосабаў і сродкаў працы з Webpack і Babel. Калі ласка, наведайце афіцыйныя сайты, каб даведацца больш і прачытаць падрабязна.

Я стварыў сховішча github з усім кодам, які ён утрымлівае. Калі ў вас ёсць якія-небудзь пытанні, звяжыцеся са сховішчам.

Мае два цэнта праз webpack? Часам вы можаце падумаць, што гэта проста інструмент, і чаму вы павінны занадта турбавацца пра інструмент? Але паверце мне, калі я скажу, што: Першапачатковая барацьба за вывучэнне вэб-пакета дазваляе вам зэканоміць велізарную колькасць гадзін, якія вы інакш укладзеце ў развіццё без вэб-пакета.

Мы спадзяемся, што ў хуткім часе мы зноў зможам апублікаваць цікавую артыкул. Спадзяюся, вам спадабалася чытаць гэтую кнігу!

Калі ў вас узнікаюць складанасці альбо праблемы пры выкананні вышэйпералічаных этапаў / працэсаў, калі ласка, не саромейцеся звяртацца да нас і пакідаць каментарыі.

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

Twitter: https://twitter.com/ashishnandansin