Kuidas sujuvamaks muuta React.js arendusprotsessi Webpack 4 abil

Originaalfoto: https://www.instagram.com/p/BiaH379hrAp/?taken-by=riittagirl

Reaalses arengumaailmas peame väga kiiresti uusi funktsioone lisama. Selles õpetuses näitan teile kõike, mida saate teha selle protsessi sujuvamaks muutmiseks ja 120% -ni oma arenduskiirusest.

Miks võiksite küsida?

Kuna käsitsitöö tegemine on programmeerimisel äärmiselt kahjulik. Tahame võimalikult palju automatiseerida. Näitan teile, milliseid Reacti arendusprotsessi osi saame Webpack v4.6.0 abil kohandada.

Ma ei käsitle Webpaki konfiguratsiooni seadistamise esimesi samme, kuna olen seda juba oma eelmises postituses teinud. Seal kirjeldasin üksikasjalikumalt, kuidas Webpacki konfigureerida. Eeldan, et olete juba tuttavad Webpacki konfigureerimise põhitõdedega, nii et saame alustada valmis seadistamisega.

Webpacki seadistamine

Sisestage oma veebipack.config.js järgmine kood:

// veebipakk v4
const path = nõuda ('tee');
const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
const WebpackMd5Hash = nõuda ('webpack-md5-hash');
const CleanWebpackPlugin = nõuda ('clean-webpack-plugin');
moodul.exports = {
  sisestus: {main: './src/index.js'},
  väljund: {
    tee: path.resolve (__ dirname, 'dist'),
    failinimi: '[nimi]. [chunkhash] .js'
  },
  moodul: {
    reeglid: [
      {
        test: /\.js$/,
        välista: / node_modules /,
        kasuta: {
          laadur: "babel-loader"
        }
      }
    ]
  },
  pistikprogrammid: [
    uus CleanWebpackPlugin ('dist', {}),
    uus HtmlWebpackPlugin ({
      süsti: vale,
      räsi: tõsi,
      mall: './src/index.html',
      failinimi: 'index.html'
    }),
    uus WebpackMd5Hash ()
  ]
};

ja teie paketis.json:

{
 "nimi": "postitus",
 "versioon": "1.0.0",
 "kirjeldus": "",
 "main": "index.js",
 "skriptid": {
  "build": "webpack - mode mode",
  "dev": "webpack - moodiarendus"
 },
  "autor": "",
 "litsents": "ISC",
 "devDependencies": {
    "babel-cli": "^ 6.26.0",
    "babel-core": "^ 6.26.0",
    "babel-loader": "^ 7.1.4",
    "babel-preset-env": "^ 1.6.1",
    "babel-preset-react": "^ 6.24.1",
    "babel-runtime": "^ 6.26.0",
    "clean-webpack-plugin": "^ 0.1.19",
    "html-webpack-plugin": "^ 3.2.0",
    "reageerima": "^ 16.3.2",
    "reageeri-dom": "^ 16.3.2",
    "veebipakk": "^ 4.6.0",
    "webpack-cli": "^ 2.0.13",
    "webpack-md5-hash": "0.0.6"
  }
}

Nüüd saate oma sõlme mooduleid alla laadida:

npm i

ning lisage src / folder oma projektile kataloogidega index.html ja index.js

Esimene src / index.html:


  
  
  
    
       

ja siis src / index.js:

console.log ("tere, maailm");

Käitatakse dev-skripti:

npm jooks dev

Seal see on: see kompileeriti! Nüüd konfigureerime ka Reakti selle jaoks.

Projekti React seadistamine

Kuna React kasutab spetsiaalset süntaksit nimega JSX, peame oma koodi ümber saatma. Kui me käime Babeli veebisaidil, on sellel Reacti eelseade.

npm install - salvestage-dev babel-cli babel-preset-reageerige

Meie .babelrc-fail peaks välja nägema järgmine:

{
  "eelseaded": ["env", "reageeri"]
}

Lisage oma index.js rakenduse lähtestamine:

importida reageerida 'reageerima';
import {render} saidist 'react-dom';
klassi rakendus laiendab rakendust React.Component {
renderdama () {
    tagasi (
      
        'Tere, Maailm!'       
    );   } }
renderdama (, document.getElementById ('app'));

ja käivitage skript dev:

npm jooks dev

Kui teil õnnestus luua index.html-iga kaust ./dist ja räsiga põhifail, siis olete teinud suurepäraseid tulemusi! Meil on oma rakendus koostamisel!

Veebi-dev-serveri seadistamine

Tehniliselt ei pea me seda tegema, kuna seal on palju sõlmepõhiseid servereid esiotsa rakenduste jaoks. Kuid ma soovitan webpack-dev-serverit, kuna see on loodud töötama koos Webpackiga ja see toetab hunnikut toredaid funktsioone, näiteks kuuma mooduli asendamine, allikakaardid jne.

Nagu nad ametliku dokumentatsiooni lehel mainivad:

Kasutage veebipaketti koos arendusserveriga, mis pakub reaalajas uuesti laadimist. Seda tuleks kasutada ainult arendamiseks.

Siin võib see pisut segadusse sattuda: kuidas panna webpack-dev-server töötama ainult dev-režiimis?

npm i webpack-dev-server - salvesta-dev

oma paketis.json, kohandage

"skriptid": {
  "dev": "webpack-dev-server --režiimi arendamine --open",
  "build": "webpack - mode mode"
}

Nüüd peaks see käivitama serveri ja avama oma rakendusega brauseri vahekaardi automaatselt.

Teie package.json näeb praegusel hetkel välja selline:

{
 “Nimi”: “postitus”,
 „Versioon”: „1.0.0”,
 “Kirjeldus”: “”,
 “Peamine”: “index.js”,
 Skriptid: {
   "dev": "webpack-dev-server --režiimi arendamine --open",
   "build": "webpack - mode mode"
 },
 “Autor”: “”,
 “Litsents”: “ISC”,
 “DevDependencies”: {
   „Babel-cli”: „6.26.0”,
   “Babel-core”: “6.26.0”,
   “Babel-loader”: “7.1.4”,
   „Babel-preset-env”: „1.6.1”,
   “Babel-preset-reageeri”: “6.24.1”,
   „Babel-runtime”: „6.26.0”,
   „Puhas veebipaketi pistikprogramm”: „0.1.19”,
   „Html-webpack-plugin”: „3.2.0”,
   “Reageerima”: “16.3.2”,
   „Reageeri-dom”: „16.3.2”,
   „Veebipakk”: „4.6.0”,
   „Webpack-cli”: „2.0.13”,
   „Webpack-dev-server”: „3.1.3”,
   „Webpack-md5-hash”: „0.0.6”
 }
}

Kui proovite oma rakenduses midagi muuta, peaks brauser lehte automaatselt värskendama.

Järgmisena peate alla laadima React devtools Chrome'i laiendina.

Nii saate oma rakendust Chrome'i konsoolilt palju lihtsamini siluda.

ESLinti konfiguratsioon

Miks me seda vajame? Noh, üldiselt ei pea me seda kasutama. Kuid ESLint on mugav tööriist. Meie puhul renderdab see meie koodi (redigeerijas ja terminalis ning brauseris) ja toob esile meie vead, kirjavigu ja vead, kui neid on. Seda nimetatakse lintimiseks.

ESLint on avatud lähtekoodiga JavaScripti vooderdamise utiliit, mille algselt lõi Nicholas C. Zakas 2013. aasta juunis. Sellel on ka alternatiive, kuid seni töötab see suurepäraselt koos ES6 ja Reactiga, leiab ühiseid probleeme ja integreerub ökosüsteemi teiste osadega.

Installige see nüüd meie uue projekti jaoks kohapeal. Muidugi on ESLintil sellel hetkel suur hulk seadeid. Nende kohta saate rohkem lugeda ametlikul veebisaidil.

npm install eslint --save-dev
./ node_modules/.bin/eslint --init

Viimane käsk loob konfiguratsioonifaili. Teil palutakse valida kolme valiku vahel:

Selles õpetuses valisin esimese: küsimustele vastamise. Siin on minu vastused:

See lisab .eslintrc.js faili teie projekti kataloogi. Minu loodud fail näeb välja selline:

moodul.exports = {
    "env": {
        "brauser": tõsi,
        "commonjs": tõsi,
        "es6": tõsi
    },
    "laieneb": "eslint: soovitatav",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": tõsi
        },
        "sourceType": "moodul"
    },
    "pluginad": [
        "reageerima"
    ],
    "reeglid": {
        "taane": [
            "viga",
            4
        ],
        "linebreak-style": [
            "viga",
            "unix"
        ],
        "tsitaat": [
            "viga",
            "vallaline"
        ],
        "pool": [
            "viga",
            "alati"
        ]
    }
};

Seni ei juhtu midagi. Kuigi see on täiesti kehtiv konfiguratsioon, ei piisa sellest - selleks, et see toimiks, peame selle integreerima Webpacki ja meie tekstiredaktoriga. Nagu ma mainisin, võib meil see olla koodiredaktoris, terminalis (linareklaamina) või eelseotud konksuna. Seadistame selle praegu oma redigeerija jaoks.

Visual Studio koodi seadistamine

Kui teil tekib huvi, on ESLintil peaaegu kõigi suuremate koodiredaktorite pistikprogramm, sealhulgas Visual Studio Code, Visual Studio, SublimeText, Atom, WebStorm ja isegi vim. Nii et jätkake ja laadige alla oma tekstiredaktori versioon. Ma kasutan selles demos VS-koodi.

Nüüd näeme, et mõned koodi vead ilmuvad. Selle põhjuseks on asjaolu, et projektil on konfiguratsioonifail, mis tõmbub koodi alla ja kurdab, kui mõnda reeglit ei järgita.

Saate seda käsitsi siluda, kontrollides veateadet. Võite seda kasutada ja vajutada lihtsalt nuppu Salvesta. See parandab asjad automaatselt.

Nüüd saate minna ja kohandada ESLinti sätteid:

moodul.exports = {
    "env": {
        "brauser": tõsi,
        "commonjs": tõsi,
        "es6": tõsi
    },
    "laieneb": ["eslint: soovitatav", "plugin: reageerida / soovitatav"],
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": tõsi
        },
        "sourceType": "moodul"
    },
    "pluginad": [
        "reageerima"
    ],
    "reeglid": {
        "taane": [
            "viga",
            2
        ],
        "linebreak-style": [
            "viga",
            "unix"
        ],
        "tsitaat": [
            "hoiata",
            "vallaline"
        ],
        "pool": [
            "viga",
            "alati"
        ]
    }
};

See ei riku ehitamist, kui lisate üksikute tsitaatide asemel kogemata topelt tsitaadid. See lisab ka mõned JSX-i kontrollid.

Lisage uhkem

Prettier on tänapäeval üks populaarsemaid vorminguid ja kodeeriv kogukond võtab selle hästi vastu. Selle saab lisada teie redigeerijasse ESLinti ja installida ka eelseotud konksuna.

Installin selle siia oma VS-koodi

Kui olete selle installinud, võite proovida oma koodi uuesti kontrollida. Kui kirjutame veidra taande ja vajutame Salvesta, peaks see koodi automaatselt automaatselt vormindama.

Sellest veel ei piisa. Selleks, et ESLint töötaks sünkroonituna ja ei tekitaks samu vigu kaks korda või isegi ei tekiks reeglite konflikte, peate selle oma ESLintiga integreerima.

npm i - salvesta-dev prettier eslint-plugin-prettier

Ametlikes dokumentides soovitavad nad teil lõnga kasutada, kuid npm teeb seda praegu. Lisage oma .eslintrc.json faili:

...
  sourceType: "moodul"
},
pluginad: ["reageeri", "uhkem"],
laieneb: ["eslint: soovitatav", "plugin: reageerida / soovitatav"],
reeglid: {
  taane: ["viga", 2],
  "linebreak-style": ["viga", "unix"],
  tsitaadid: ["hoiata", "üksik"],
  pool: ["viga", "alati"],
  "uhkem / uhkem": "viga"
}
...

Nüüd tahame laiendada oma ESLinti reegleid, et hõlmata ka ilusamaid reegleid:

npm i - salvesta-dev eslint-config-prettier

ja lisage oma eslinti konfiguratsiooni mõned laiendid:

...
laieneb: [
  "eslint: soovitatav",
  "plugin: reageeri / soovitatav",
  "uhkem",
  "plugin: ilusam / soovitatav"
]
...

Lisageme sellele veel mõned konfiguratsioonid. Peaksite seda tegema, et vältida Prettier vaikimisi reeglite ja ESLinti reeglite mittevastavusi, nagu mul praegu on:

Uhkem laenutab ESLinti ülimusvormingut. See võimaldab teil konfiguratsiooni rakendada konkreetsete failide jaoks.

Nüüd saate selle jaoks konfiguratsioonifaili luua .js-failina.

nano prettier.config.js

Nüüd kleepige sellesse faili:

moodul.exports = {
  prindilaius: 80,
  sakkLaius: 2,
  pool: tõsi,
  singleQuote: tõsi,
  bracketSpacing: tõsi
};

Kui vajutate nuppu Salvesta, näete, et teie kood vormindatakse automaatselt. Kas pole nii ilusam? Punn väga mõeldud.

Minu pakett.json näeb välja selline:

{
 "nimi": "postitus",
 "versioon": "1.0.0",
 "kirjeldus": "",
 "main": "index.js",
 "skriptid": {
  "build": "webpack - mode mode",
  "dev": "webpack-dev-server --režiimi arendamine --open"
 },
 "autor": "",
 "litsents": "ISC",
 "devDependencies": {
  "babel-cli": "^ 6.26.0",
  "babel-core": "^ 6.26.0",
  "babel-loader": "^ 7.1.4",
  "babel-preset-env": "^ 1.6.1",
  "babel-preset-react": "^ 6.24.1",
  "babel-runtime": "^ 6.26.0",
  "clean-webpack-plugin": "^ 0.1.19",
  "eslint": "^ 4.19.1",
  "eslint-config-prettier": "^ 2.9.0",
  "eslint-plugin-prettier": "^ 2.6.0",
  "eslint-plugin-react": "^ 7.7.0",
  "html-webpack-plugin": "^ 3.2.0",
  "uhkem": "^ 1.12.1",
  "reageerima": "^ 16.3.2",
  "reageeri-dom": "^ 16.3.2",
  "veebipakk": "^ 4.6.0",
  "webpack-cli": "^ 2.0.13",
  "webpack-dev-server": "^ 3.1.4",
  "webpack-md5-hash": "0.0.6"
 }
}

Nüüd, kui see kõik on valmis, pangem kiiresti meelde: ESLint jälgib, kas teie koodil pole vigu ja Prettier on stiili vormindamise tööriist. ESLintil on vigade tabamiseks palju rohkem võimalusi, samas kui Prettier vormindab teie koodi kenasti.

// veebipakk v4
const path = nõuda ('tee');
const HtmlWebpackPlugin = nõuda ('html-webpack-plugin');
const WebpackMd5Hash = nõuda ('webpack-md5-hash');
const CleanWebpackPlugin = nõuda ('clean-webpack-plugin');
moodul.exports = {
  sisestus: {main: './src/index.js'},
  väljund: {
    tee: path.resolve (__ dirname, 'dist'),
    failinimi: '[nimi]. [chunkhash] .js'
  },
  moodul: {
    reeglid: [
      {
        test: /\.js$/,
        välista: / node_modules /,
        kasuta: {
          laadur: "babel-loader"
        }
      }
    ]
  },
  pistikprogrammid: [
    uus CleanWebpackPlugin ('dist', {}),
    uus HtmlWebpackPlugin ({
      süsti: vale,
      räsi: tõsi,
      mall: './src/index.html',
      failinimi: 'index.html'
    }),
    uus WebpackMd5Hash ()
  ]
};

Väljaanne: Prettier ei vorminda koodi Visual Studio koodis automaatselt

Mõned inimesed on märkinud, et VS Code ei tööta Prettieriga.

Kui pistikprogramm Prettier ei vorminda salvestamisel koodi automaatselt, saate selle parandada, lisades VS-koodi sätetele selle koodi:

"[javascript]": {
    "editor.formatOnSave": tõene
  }

nagu siin kirjeldatud.

ESLinti laaduri lisamine torustikku

Kuna ESLint on projektis konfigureeritud, siis kaebab see teie terminalis ka pärast dev-serveri käivitamist.

Märkus. Ehkki seda on võimalik teha, ei soovita ma praegu ESLinti laadurina kasutada. See rikub lähtekaardi seadistamise, mida kirjeldasin üksikasjalikumalt oma eelmises artiklis Kuidas lahendada Webpacki probleeme. Praktiline juhtum. Ma näitan, kuidas seda siin üles seada, juhuks kui poisid on juba tehtud vea parandanud.

Webpackil on oma ESLinti laadur.

npm install eslint-loader --save-dev

ESLint tuleb reeglitesse lisada. Kui kasutate laadimislaadureid (nagu babel-laadur), veenduge, et need oleksid õiges järjekorras (alt üles). Muidu kontrollitakse faile pärast nende töötlemist babel-laaduriga

...
moodul: {
  reeglid: [
    {
      test: /\.js$/,
      välista: / node_modules /,
      kasutamine: [{laadur: "babel-loader"}, {laadur: "eslint-loader"}]
    }
  ]
},
...

Siin on mõned võimalikud probleemid, mis teil võivad olla:

  • lisage oma indeksifaili kasutamata muutuja

Kui komistate selle vea (kasutamata varude) peale, on see selles GitHubi numbris ja siin üsna hästi lahti seletatud.

Selle probleemi saab lahendada, lisades mõned reeglid, mida siin ja siin selgitatakse.

Nagu juba võisite tähele panna, saate siin vea mittekasutamata-vars. Peate selle tegema hoiatavaks ja mitte veaks, sest nii on kiiret arendustööd lihtsam teha. Peate lisama ESLintile uue reegli, et te ei saaks vaikevea.

Selle seadistuse kohta saate rohkem lugeda siit ja siit.

...
pool: ['viga', 'alati'],
'no-unused-vars': [
  'hoiata',
  {vars: 'kõik', args: 'puudub', ignoreRestSiblings: false}
],
'uhkem / uhkem': 'viga'
}
...

Nii saame päris tõrke- ja hoiatusteateid.

Mulle meeldib automaatse paranduse funktsiooni idee, kuid olgem selged: ma pole suurim fänn, et asjad võluväel muutuksid. Sellise olukorra vältimiseks võime praegu autofilmi teha.

Eeltööta konks

Giti tööriistade kasutamisel on inimesed tavaliselt väga ettevaatlikud. Kuid ma kinnitan teile, see on väga lihtne ja arusaadav. Prettieri konksud rakendusega Prettier kasutatakse nii, et meeskondadel on kõigi projektifailide jaoks ühtne koodialuse stiil ja keegi ei saa sisestamata koodi sisestada. Seadistage Git-i integreerimine teie projekti jaoks järgmiselt:

git init
lisan.
nano .gitignore (lisage sinna oma node_modules)
git activ -m "Esimene pühenduma"
git remote lisada päritolu oma päritolu
git push -u päritolu meister

Siin on mõned suurepärased artiklid git-konksude ja Prettieri kasutamise kohta.

Inimestele, kes ütlevad, et saate seda teha ainult kohalikul tasandil - ei, see pole tõsi!

Seda saate teha Andrey Okonetšnikovi selle hoidla ebemevaba tööriista abil.

PropTypes lisamine

Loome uue rakenduse meie rakendusse. Siiani näeb meie index.js välja selline:

importida reageerida 'reageerima';
import {render} saidist 'react-dom';
klassi rakendus laiendab rakendust React.Component {
  renderdama () {
    tagasi 
Tere
;   } } renderdama (, document.getElementById ('app'));

Loome uue komponendi, mille nimi on Hello.js.

importida reageerida 'reageerima';
klass Tere laiendab React.Component {
  renderdama () {
    tagasta 
{this.props.hello}
;   } } eksport vaikimisi Tere;

Nüüd importige see oma index.js faili:

importida reageerida 'reageerima';
import {render} saidist 'react-dom';
import Tere '' //Hello '';
klassi rakendus laiendab rakendust React.Component {
  renderdama () {
    tagasi (
      
            
   );   } } renderdama (, document.getElementById ('app'));

Me pidime seda elementi nägema, kuid ESLint kurdab:

Viga: rekvisiitide valideerimisel puudub [eslint] „tere” (reageerima / toetama)

React v16-s on tüüpide segiajamise vältimiseks kohustuslik lisada tüüpide tüüpe. Selle kohta saate rohkem lugeda siit.

importida reageerida 'reageerima';
impordi PropTypes 'prop-tüüpi';
klass Tere laiendab React.Component {
  renderdama () {
    tagasta 
{this.props.hello}
;   } } Hello.propTypes = {   tere: PropTypes.string }; eksport vaikimisi Tere;

Kuum mooduli vahetus

Nüüd, kui olete oma koodi kontrollinud, on aeg lisada rakendusele React rohkem komponente. Siiani on teil ainult kaks, kuid enamikul juhtudel on neid kümneid.

Muidugi ei ole kogu rakenduse värskendamisel uuesti komponeerimine iga kord, kui midagi projektis muudate, see pole valik. Selle tegemiseks on vaja kiiremat viisi.

Lisagem siis kuuma mooduli asendamine ehk HMR. Dokumentatsioonis kirjeldatakse seda järgmiselt:

Kuum moodulite asendamine (HMR) vahetab, lisab või eemaldab mooduleid rakenduse töötamise ajal ilma täieliku uuesti laadimiseta. See võib arengut kiirendada märkimisväärselt mõnel viisil:
Säilitage rakenduse olek, mis on kadunud täieliku uuesti laadimise ajal.
Säästke väärtuslikku arendusaega, värskendades ainult muutusi.
Nipista stiil kiiremini - peaaegu võrreldav brauseri siluri stiilide muutmisega.

Ma ei hakka uurima, kuidas see siin töötab: see oleks eraldi postituse teema. Kuid siin on, kuidas seda konfigureerida:

...
väljund: {
  tee: path.resolve (__ dirname, 'dist'),
  failinimi: '[nimi]. [chunkhash] .js'
},
devServer: {
  contentBase: './dist',
  kuum: tõsi
},
moodul: {
  reeglid: [
...

HMR-iga väikeste probleemide lahendamine

Pidime chunkhashi asendama räsiga, sest ilmselt on Webpack selle probleemi viimasest korrast alates parandanud. Nüüd töötab kuum moodulite asendamine!

...
moodul.exports = {
   sisestus: {main: './src/index.js'},
   väljund: {
     tee: path.resolve (__ dirname, 'dist'),
     failinimi: '[nimi]. [räsi] .js'
   },
   devServer: {
     contentBase: './dist',
...

Vigade lahendamine

Kui käitame siin dev-skripti:

siis kasutage selle parandamiseks selle numbri näpunäiteid.

Järgmisena lisage - kuum lipp dev-skripti jaoks paketis.json:

...
"skriptid": {
   "build": "webpack - mode mode",
   "dev": "webpack-dev-server - shot"
}
...

Allikaardid:

Nagu ma eespool mainisin, ei tööta allikakaardid koos ESLint laaduriga. Ma esitasin siia teema.

Tavaliselt ei tahaks nad neid nagunii oma projekti (kuna soovite oma projekti siluda ESLinti tõrketeadetest). Nad on tuntud ka selle poolest, et muudavad HMR-i aeglasemaks.

Sellest saab lähemalt lugeda siit ja siit.

Kuid kui soovite ikkagi lähtekaarte, on lihtsaim viis nende lisamiseks suvandi devtools abil.

...
moodul.exports = {
  sisestus: {main: './src/index.js'},
  väljund: {
    tee: path.resolve (__ dirname, 'dist'),
    failinimi: '[nimi]. [räsi] .js'
  },
  devtool: 'in-source-map',
  devServer: {
    contentBase: './dist',
    kuum: tõsi
  },
  ...

Märkus. Allikakaardid ei tööta enne, kui olete keskkonna õigesti määranud. Minu silumisprotsessi kohta saate lugeda siit. Allpool annan teile spoileri ja selgituse, kuidas ma selle probleemi lahendasin.

Kui me nüüd läheme ja loome oma koodis vea, kuvatakse see konsoolis ja see osutab meile õiges kohas:

Või nii me arvasime. Aga kiire:

See on paruka käitumine

Keskkonnamuutujat peate muutma järgmiselt:

...
"main": "index.js",
"skriptid": {
  "build": "webpack - mode = production",
  "start": "NODE_ENV = arendus webpack-dev-server - mode = arendus --hot"
},
"autor": ""
...

webpack.config.js

...
devtool: 'in-source-map',
devServer: {
  contentBase: './dist',
  avatud: tõsi
}
...

Nüüd see töötab!

Nagu näete, osutatakse meile täpsele failile, kus viga ilmnes!

Nüüd olete oma projekti arenduskeskkonna edukalt seadistanud!

Võimaldab meelde tuletada:

  • Seadsime üles veebipaketi
  • Lõime oma esimese Reacti komponendi
  • Kaasasime ESLinti, et kontrollida koodi vigade osas
  • Seadsime sisse mooduli kuuma asendamise
  • Lisasime (võib-olla) allikakaardid

Märkus: kuna paljud npm-i sõltuvused võivad selle lugemise ajaks muutuda, ei pruugi sama konfiguratsioon teie jaoks töötada. Palun teil jätta oma vead allolevatesse kommentaaridesse, et saaksin neid hiljem redigeerida.

Selle artikli jaoks palun tellige ja plaksutage! Aitäh!

Rohkem materjale: