Sådan opsættes en Express JS-server med Nodemon og Babel

(Hej der, opdateret version af denne tutorial findes her)

For nylig begyndte jeg tilbage på aktivt at skrive Web-apps ved hjælp af React JS, og en af ​​de ting, som jeg fandt virkelig interessant efter et to år hejst fra Javascript var, hvordan ES6 forenklede tingene.

Efter et par uger var jeg vant til ES6-syntaks i React - jeg var nødt til at spinde op en lille server ved hjælp af Express JS og MongoDB, men de fleste tutorials, jeg læste, anvendte stadig ES5-syntaks, og jeg havde ikke det. Jeg gjorde min egen undersøgelse, og jeg fandt en lettere måde at opsætte et Express JS-serverprojekt til at bruge Babel til ES6-syntaks og Nodemon til autoloading - som jeg vil dele med dig.

Hvis du nu er ny med Javascript ES6, vil jeg opfordre dig til at tjekke artiklen nedenfor for at se forskellen mellem den og ES5.

Alle fanget? god, lad os gøre dette.

Opsætning af ekspresserver

Den første ting er, at vi opretter en mappe kaldet express_server og initialiserer npm ved hjælp af kommandoen følgende koder.

mkdir express_server
cd express_server
npm init

Kørsel af npm init vil udløse en cli-wizard, der stiller dig flere spørgsmål. Efter alle disse spørgsmål skal du oprette en pakke.json-fil, der ser sådan ud.

{
"name": "express_server",
"version": "1.0.0",
"beskrivelse": "",
{
  "main": "index.js",
  "scripts": {
    "test": "echo \" Fejl: ingen test specificeret \ "&& exit 1"
  },
  "forfatter": "",
  "licens": "ISC"
}

Nu hvor vi har pakken.json-filen, lad os begynde at installere de nødvendige pakker for at få vores Express js-server op. Den første pakke, vi installerer, er selve Express JS.

npm installere ekspress

Efter installation af Express JS skal du oprette en js-fil kaldet index.js ved hjælp af kommandoen touch index.js og tilføje følgende linjer:

var express = kræver ('express')
var app = express ()
app.listen (3400, funktion ()
{console.log (`Server lytter på port 3400 ')})
module.exports = app;

Med disse få linjer kan du køre serveren ved hjælp af denne kommando i din terminal.

node index.js

Du vil se, at serveren lytter på port 3400 i terminalen.

Lad os refraktor koden til brug af ES6-syntaks

Fra nu af bruger vi stadig ES5-syntaks, så lad os konfigurere vores projekt til at bruge de søde ting, der tilbydes af ES6. Til dette vil vi installere et par Babel-relaterede pakker.

npm installere babel-cli babel-preset-env babel-loader babel-core --save-dev

Ordre for at sikre, at når vi nogensinde foretager ændringer i nogen af ​​filerne i vores projekt, og serveren genstartes for at afspejle disse ændringer automatisk - vi installerer nodemon ved hjælp af følgende kommando.

npm installere nodemon - save-dev

Flag-save-dev-flag bruges, fordi disse pakker kun er nødvendige i udviklingsmiljø og ikke er nødvendige i produktionsmiljøet.

Efter installation skal du åbne package.json og redigere scripts ved at tilføje starttasten som vist nedenfor. Dette fortæller noden om at behandle ES6-syntaks ved hjælp af Babel og nodemon for at se efter eventuelle ændringer i server.js-filen og al dens import. Din pakke.json skal se sådan ud.

{
  "name": "server",
  "version": "1.0.0",
  "beskrivelse": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js - exec babel-node - præsenterer babel-preset-env",
    "test": "echo \" Fejl: ingen test specificeret \ "&& exit 1"
  },
  "forfatter": "",
  "licens": "ISC",
  "afhængigheder": {
    "udtrykke": "^ 4.16.3"
  },
  "afhængighed": {
    "babel-cli": "^ 6.26.0",
    "babel-core": "^ 6.26.3",
    "babel-loader": "^ 8.0.2",
    "babel-preset-env": "^ 1.7.0",
    "nodemon": "^ 1.18.4"
  }
}

Efter disse ændringer kan du nu åbne index.js og bryd koden for at bruge ES6-syntaks som import- og pilefunktioner.

import ekspress fra 'ekspres'
const app = express ()
app.listen (3600, () =>
console.log (`Server lytter på port 3400 '))
module.exports = app;

Når det er gjort, skal du lukke serveren, hvis den kører ved hjælp af ctrl + z i windows eller linux, og genstart den ved hjælp af kommandoen npm start i stedet for den tidligere kommando node index.js. Du skal se meddelelsen:

Hvis du foretager ændringer i filen, genstarter nodemon automatisk serveren for dig.

Nå, det er det. På dette tidspunkt kan du installere alle pakker, du vil fuldføre din Express JS-server, og du kan stadig bruge alle de nye ting, der tilbydes af ES6 - til en kort beskrivelse af dem, du kan læse Olivier J.M's artikel nedenfor.

Det er alt sammen fra mig, du kan tjekke projektet her:

Tak for læsning og glad kodning!

(Jeg har opdateret de fleste konfigurationer, så følg denne vejledning i stedet)