de Ashish Nandan Singh

Introducere

Bine, așa că presupun că ați auzit de webpack – de aceea sunteți aici, nu? Adevărata întrebare este ce știi despre asta? S-ar putea să știți câteva lucruri despre asta, cum ar fi modul în care funcționează, sau s-ar putea să nu aveți absolut niciun indiciu. Oricum ar fi, vă pot asigura că, după ce ați citit acest articol, probabil că vă veți simți suficient de confortabil cu ansamblul situația webpack.

Dupa toate acestea – necesitate este mama lui invenţie…

Un mod perfect de a spune de ce există webpack este citatul de mai sus. Dar, pentru a o înțelege mai bine, trebuie să ne întoarcem, înapoi, până când JavaScript nu era noul lucru sexy, în acele vremuri vechi, când un site web era doar un mic pachet de bun vechi .html, CSS și probabil unul sau câteva fișiere JavaScript în unele cazuri. Dar foarte curând toate acestea aveau să se schimbe.

Care a fost problema?

Întreaga comunitate de dezvoltatori a fost implicată într-o căutare constantă de îmbunătățire a experienței generale a utilizatorilor și dezvoltatorilor în ceea ce privește utilizarea și construirea de aplicații web / javascript. Prin urmare, am văzut multe noutăți biblioteci și cadre introdus.

ad-banner

Câțiva modele de design De asemenea, a evoluat în timp pentru a oferi dezvoltatorilor un mod mai bun, mai puternic, dar foarte simplu de a scrie aplicații JavaScript complexe. Site-urile web nu mai erau doar un mic pachet cu un număr impar de fișiere. Au declarat că devin voluminoși, odată cu introducerea Module JavaScript, deoarece scrierea unor mici bucăți de cod a fost noua tendință. În cele din urmă, toate acestea au condus la o situație în care am avut de 4 ori 5 ori mai multe fișiere în pachetul general de aplicații.

Nu numai că dimensiunea generală a aplicației a fost o provocare, dar, de asemenea, a existat un decalaj uriaș în tipul de cod pe care îl scriau dezvoltatorii de coduri și tipul browserelor de cod pe care le-ar putea înțelege. Dezvoltatorii au trebuit să folosească o mulțime de coduri de ajutor numite polifenituri pentru a vă asigura că browserele au putut interpreta codul din pachetele lor.

Pentru a răspunde la aceste probleme, a fost creat webpack. Webpack este un pachet de module static.

Deci, cum a fost răspunsul Webpack?

Pe scurt, Webpack trece prin pachetul dvs. și creează ceea ce numește a grafic de dependență care constă din diverse module pe care aplicația dvs. web ar trebui să funcționeze conform așteptărilor. Apoi, în funcție de acest grafic, creează un nou pachet care constă în numărul minim de fișiere necesare, adesea doar un singur fișier bundle.js care poate fi conectat cu ușurință la fișierul html și utilizat pentru aplicație.

În următoarea parte a acestui articol, vă voi conduce prin configurarea pas cu pas a webpack-ului. Până la sfârșitul acestuia, sper să înțelegeți noțiunile de bază ale Webpack. Așadar, să facem acest lucru …

Ce construim?

Probabil ați auzit de ReactJS. Dacă știi reactJS, probabil știi ce creați-reacționați-aplicație este. Pentru cei dintre voi care habar nu au ce sunt aceste două lucruri, ReactJS este o bibliotecă UI ceea ce este foarte util în construirea unor UI complexe inteligente și create-react-app este un instrument CLI pentru configurarea sau bootstrapping-ul unui set de programe boilerplate pentru a face aplicații React.

Astăzi vom crea o aplicație simplă React, dar fără a utiliza CLI create-react-app. Sper că ți se pare suficient de distractiv. 🙂

Faza de instalare

npm int

Așa este, așa încep aproape toate lucrurile bune: inițial npm simplu. Voi folosi VS Code, dar nu ezitați să folosiți orice editor de coduri care vă place pentru a începe lucrurile.

Înainte de a putea face orice, gândiți-vă, asigurați-vă că aveți cele mai recente nodJS si npm versiune instalată local pe computer. Faceți clic pe fiecare dintre aceste linkuri pentru a afla mai multe despre proces.

$ npm init

Aceasta va crea un pachet de pornire și va adăuga un fișier package.json pentru noi. Aici vor fi menționate toate dependențele necesare pentru a construi această aplicație.

Acum, pentru a crea o aplicație simplă React, avem nevoie de două biblioteci principale: React și ReactDOM. Deci, haideți să le adăugăm ca dependențe în aplicația noastră folosind npm.

$ npm i react react-dom --save

În continuare, trebuie să adăugăm webpack, astfel încât să putem grupa împreună aplicația noastră. Nu numai pachet, dar vom solicita, de asemenea, reîncărcarea la cald, care este posibilă utilizând serverul webpack dev.

$ npm i webpack webpack-dev-server webpack-cli --save--dev

--save--dev este de a specifica că aceste module sunt doar dependențe de dev. Acum, din moment ce lucrăm cu React, trebuie să ținem cont de faptul că React folosește clasele ES6 și declarațiile de import, lucru pe care toate browserele nu îl pot înțelege. Pentru a ne asigura că codul este lizibil de toate browserele, avem nevoie de un instrument precum babel pentru a transpile codul nostru în codul normal lizibil pentru browsere.

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

Ei bine, ce să spun, acesta a fost numărul maxim de instalări pe care le promit. În cazul babel, am încărcat mai întâi biblioteca de bază babel, apoi încărcătorul și, în cele din urmă, 2 pluginuri sau presetări pentru a funcționa în mod specific cu React și cu toate noile coduri ES2015 și ES6.

Mai departe, să adăugăm un cod și să începem configurarea webpack.

Acesta este modul în care fișierul package.json ar trebui să aibă grijă de toate instalările de până acum. Este posibil să aveți un număr de versiune diferit în funcție de momentul în care urmăriți acest articol.

Codul

Să începem prin a adăuga un webpack.config.js fișier în rădăcina structurii aplicației noastre. Adăugați următorul cod în fișierul webpack.config.

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {  //This property defines where the application starts  entry:'./src/index.js',
  //This property defines the file path and the file name which will be used for deploying the bundled file  output:{    path: path.join(__dirname, '/dist'),    filename: 'bundle.js'  },
  //Setup loaders  module: {    rules: [      {        test: /.js$/,         exclude: /node_modules/,        use: {          loader: 'babel-loader'        }      }    ]  },
// Setup plugin to use a HTML file for serving bundled js files plugins: [    new HtmlWebpackPlugin({      template: './src/index.html'    })  ]}

Bine, deci hai să înțelegem liniile de mai sus.

Mai întâi începem prin a solicita modulului de cale implicit pentru a accesa locația fișierului și a face modificări la locația fișierului.

În continuare, avem nevoie de HTMLWebpackPlugin pentru a genera un fișier HTML care să fie utilizat pentru difuzarea fișierelor / fișierelor JavaScript incluse. Citiți mai multe despre HTMLWebpackPlugin făcând clic pe link.

Apoi avem obiectul export.module cu câteva proprietăți în ele. Primul este proprietate de intrare, care este folosit pentru a specifica cu ce fișier webpack ar trebui să înceapă pentru a crea graficul de dependență intern.

module.exports = {
  entry:'./src/index.js'
}

Următorul este proprietatea de ieșire care specifică unde ar trebui generat fișierul grupat și care ar fi numele fișierului grupat. Acest lucru este realizat de calea de ieșire și output.filename proprietăți.

module.exports = {
//This property defines the file path and the file name which will be used for deploying the bundled file  output:{    path: path.join(__dirname, '/dist'),    filename: 'bundle.js'  },
}

Urmează încărcătoarele. Aceasta este pentru a specifica ce ar trebui să facă webpack-ul pentru un anumit tip de fișier. Amintiți-vă că pachetul web out of box înțelege doar JavaScript și JSON, dar dacă proiectul dvs. are orice altă limbă utilizată, acesta ar fi locul pentru a specifica ce să faceți cu noua limbă.

module.exports = {
//Setup loaders  module: {    rules: [      {        test: /.js$/,         exclude: /node_modules/,        use: {          loader: 'babel-loader'        }      }    ]  }
}

Informațiile trebuie specificate într-un obiect pentru fiecare proprietate a modulului, care are în plus o serie de reguli. Va exista un obiect pentru fiecare caz. De asemenea, am specificat să exclud tot ce se află în folderul meu node_modules.

Urmează proprietatea pluginului. Aceasta este utilizată pentru a extinde capacitățile webpack. Înainte ca un plugin să poată fi utilizat în matricea de pluginuri din interiorul obiectului de export al modulului, trebuie să solicităm același lucru.

module.exports = {
// Setup plugin to use a HTML file for serving bundled js files plugins: [    new HtmlWebpackPlugin({      template: './src/index.html'    })  ]
}

Acest plugin special, așa cum s-a explicat anterior, va utiliza fișierul specificat în folderul nostru src. Apoi îl va folosi ca șablon pentru fișierul nostru HTML, unde toate fișierele incluse vor fi injectate automat. Există o mulțime de alte plugin-uri din cutie pe care le-am putea folosi – verificați Pagina Oficială pentru mai multe informatii.

Ultimul lucru pe care trebuie să-l facem este să creăm un fișier .babelrc pentru a utiliza presetarea babel pe care am instalat-o și să avem grijă de clasele ES6 și de declarațiile de import din codul nostru. Adăugați următoarele linii de cod în fișierul .babelrc.

{  "presets": ["env", "react"]}

Și exact așa, acum babel va putea folosi acele presetări. Bine, atât de mult din configurare – să adăugăm un cod React pentru a vedea cum funcționează acest lucru.

React Code

Deoarece punctul de plecare pentru aplicație este fișierul index.js din folderul src, să începem cu asta. Vom începe prin a le cere pe amândouă Reacţiona și ReactDOM pentru utilizarea noastră în acest caz. Adăugați codul de mai jos în fișierul index.js.

import React from 'react';import ReactDOM from 'react-dom';import App from './Components/App';
ReactDOM.render(<App />, document.getElementById('app'));

Deci, pur și simplu importăm un alt fișier din folderul nostru de componente, pe care îl veți crea, și adăugăm un alt fișier în folderul numit App.js. Deci, să vedem ce se află în fișierul App.js:

import React, { Component } from 'react'
class App extends Component {  render() {    return (      <div>        <h1>Webpack + React setup</h1>      </div>    )  }}
export default App;

Aproape am terminat. Singurul lucru rămas acum este să activezi reîncărcarea la cald. Aceasta înseamnă că, de fiecare dată când este detectată o modificare, browserul reîncarcă automat pagina și are capacitatea de a construi și a grupa întreaga aplicație când vine momentul.

Putem face acest lucru adăugând valori de script în fișierul package.json. Eliminați proprietatea de testare din obiectul de scripturi al fișierului package.json și adăugați aceste două scripturi:

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

Sunteți gata! Mergeți la terminalul dvs., navigați la folderul rădăcină și rulați npm start. Ar trebui să pornească un server dev pe computerul dvs. și să difuzeze fișierul HTML în browser. Dacă faceți modificări minore / majore și salvați codul, browserul dvs. va fi actualizat automat pentru a afișa ultimul set de modificări.

Odată ce credeți că sunteți gata să obțineți aplicația la pachet, trebuie doar să accesați comanda, npm build, iar webpack va crea un pachet optimizat în folderul proiectului dvs. care poate fi implementat pe orice server web.

Concluzie

Aceasta este doar o aplicație mică sau un caz de utilizare a webpack și babel, dar aplicațiile sunt nelimitate. Sper că sunteți suficient de încântați să explorați mai multe opțiuni și modalități de a face lucrurile cu webpack și babel. Vă rugăm să consultați site-urile lor oficiale pentru a afla mai multe și a citi în detaliu.

Am creat o repo Github cu tot codul în el, așa că vă rugăm să consultați acest subiect pentru orice întrebări.

ashishcodes4 / webpack-react-setup
Setarea unei aplicații de reacție de la zero fără a utiliza CLI – ashishcodes4 / webpack-react-setupgithub.com

Cei doi cenți ai mei despre webpack? Ei bine, uneori s-ar putea să credeți că nu este altceva decât un instrument și de ce ar trebui să vă deranjați prea mult pentru un instrument? Dar credeți-mă când spun asta: lupta inițială în timp ce vă învățați drumul prin webpack vă va economisi un număr enorm de ore pe care altfel le-ați investi în dezvoltarea fără webpack.

Asta este tot deocamdată, sper să ne întoarcem cu încă un articol interesant foarte curând. Sper că v-a plăcut să o citiți!

În cazul în care vă confruntați cu dificultăți sau probleme în timp ce urmați oricare dintre pașii / procesele menționate mai sus, vă rugăm să nu ezitați să contactați și să lăsați comentarii.

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

Stare de nervozitate: https://twitter.com/ashishnandansin