Kuinka luoda React-sovellus tyhjästä Webpack 4: n avulla

Viimeisen kolmen viikon ajan olen yrittänyt luoda React-sovelluksen tyhjästä ymmärtääksesi Webpackin asennuksen. Tavoitteenani oli laatia yksinkertainen kokoonpano, jota voidaan sitten kehittää. Webpackin ymmärtäminen on ollut kamppailua. Mutta Valentino Gagliardin tämän opetusohjelman ansiosta olen paljon valaistunut.

Aion suunnitella tehdä hakutoiminnot vääriä JSON-tietoja (tai oikeita). Tässä blogiviestissä aion käydä läpi projektini perustamisen. Seuraavassa aion näyttää miten testaus asennetaan. Haluaisin myös lisätä palvelimen tähän Node.js: n avulla, mutta en ole varma, tarvitseeko projektini laajuus sitä.

(Huomaa: Olen toimittanut Webpack-asetukset tämän blogiviestin lopussa)

Jatkamme asentamista ilman enempää.

Tee uusi projekti ja sisällytä siihen CD:

mkdir react_search
cd react_search

Luo paketti.json-tiedosto:

npm init

Jos haluat ohittaa kaikki kysymykset, lisää -y-lippu:

npm init -y

Meidän on asennettava webpack dev-riippuvuutena ja webpack-cli, jotta voit käyttää webpackia komentorivillä:

npm i webpack webpack-cli -D
  • i: asenna
  • -D: - säästää-dev

Luo src-kansio hakemistolla index.js ja laita seuraava koodi esimerkki:

console.log ( "Hello");

Lisää nyt seuraavat komentosarjat pakettiin.json (lihavoituna):

{
  "name": "react_search",
  "versio": "1.0.0",
  "kuvaus": "Etsi sovellus Reaktin avulla",
  "main": "index.js",
  "skriptit": {
    "start": "webpack - mode kehitys",
    "rakentaa": "webpack - tilatuotanto"
  },
  "avainsanat": [],
  "kirjailija": "",
  "lisenssi": "ISC",
  "devDependencies": {
    "verkkopakkaus": "^ 4.0.1",
    "webpack-cli": "^ 2.0.10"
  }
}

Webpack 4: llä on nyt kaksi tilaa, kehitys ja tuotanto, joissa koodi minimoidaan jälkimmäisessä.

Katso se itse suorittamalla:

npm ajon aloitus

Tämä luo dist-kansion, jonka sisällä on main.js-tiedosto (joka sisältää src-koodisi).

Jos nyt juokset:

Npm run build

Seuraava lähtö on nyt tällainen:

Reaktion ja Babelin asettaminen

Jotta voisimme toimia Reaktin kanssa, meidän on asennettava se yhdessä Babelin kanssa. Tämä siirtää koodin ES6: sta ES5: ään, koska kaikki selaimet eivät vielä tue ES6: ta (esimerkiksi Internet Explorer).

Asenna reagoi ja reagoi dom riippuvuutena

npm reagoin react-dom -S
  • -S: - säästää

Asenna sitten babel-core, babel-loader, babel-preset-env ja babel-preset-react dev-riippuvuutena:

npm i babel-core babel-loader babel-preset-env babel-preset-react -D
  • babel-core: Muuntaa ES6-koodisi ES5: ksi
  • babel-loader: Webpack-auttaja muuntaa JavaScript-riippuvuutesi (esimerkiksi kun tuot komponentteja muihin komponentteihin) Babelilla
  • babel-preset-env: Määrittää käytettävät muunnelmat / lisäosat ja monitäytöt (tarjoavat nykyaikaisen toiminnallisuuden vanhemmilla selaimilla, jotka eivät tue sitä luonnollisesti) perustuen selamamatriisiin, jota haluat tukea
  • babel-preset-react: Babel-esiasetus kaikille React-laajennuksille, esimerkiksi muuttamalla JSX toimintoiksi

Meidän on luotava webpack.config.js-tiedosto babel-loader-sovelluksemme sääntöjen ilmoittamiseksi.

Sitten meidän on tehtävä erillinen tiedosto .babelrc, joka tarjoaa babel-loader-vaihtoehdon asetukset. Voit sisällyttää sen webpack.config.js-tiedostoon, mutta olen nähnyt, että useimmissa projekteissa tämä on erotettu toisistaan. Tämä johtaa selkeämpään luettavuuteen, ja sitä voivat käyttää muut työkalut, jotka eivät liity verkkopakkaukseen. Kun ilmoitat, että käytät babel-loader -sovellusta verkkopaketin kokoonpanossa, se etsii .babelrc-tiedostoa, jos sellainen on.

Vaihda seuraavaksi index.js-tiedosto renderöitäväksi komponentiksi:

Meidän on myös luotava index.html-tiedosto src-kansioon, johon voimme lisätä osioelementtimme id-hakemistolla. Tässä tarjoamme tärkeimmän reaktiokomponentimme:

Nyt meidän on asennettava html-webpack-plugin ja käytettävä tätä webpack-konfigurointitiedostossamme. Tämä laajennus luo HTML-tiedoston, johon