Sådan aktiveres ES6 (og derover) syntaks med Node og Express

Har du nogensinde prøvet at skrive frontend-apps ved hjælp af ES6-syntaks, men da du besluttede at lære backend-udvikling med Node.js og Express, indså du, at du ikke kan bruge ting som import fromog   export default? I så fald kom du til det rigtige sted! Dette er trin for trin guide til, hvordan du konfigurerer dine dev- og prod-miljøer, opsætningsskripter, og som en bonus lærer vi, hvordan du tilføjer tests!

Indholdsfortegnelse / Oversigt over emner

  • Hvordan virker det?
  • Forudsætninger
  • Installation af ekspres
  • Opsætning af scripts
  • Bonus
  • TL; DR

Hvordan virker det? Et højt niveau billede af, hvad vi har brug for

For at muliggøre en front-end-udviklingslignende oplevelse, mens du udvikler back-end-apps, er her et højt niveau af de processer, der sker med dit projekt.

Kode Transpiller fra ES6 + til ES5

Vi har brug for en pakke, der oversætter ES6 og derover syntaks til ES5-kode. ES5-kode er JS-syntaksstil, der kan læses for node.js, såsom module.exportseller var module = require('module'). Bemærk, at i dag kan næsten 99% af ES6 + -syntaks bruges i Node.js. Det er her, pakken kaldet babel skinner.

Babel tager en js-fil, konverterer koden i den og outputter til en ny fil.

Script, der fjerner filer

Hver gang vi ændrer noget i vores kode, føder vi det til transpilleren, og det udsender en frisk kopi hver gang. Derfor har vi brug for et script, der fjerner filer, inden den nye transpilerede kopi kommer ind. Og til det er der en eksisterende pakke kaldet rimraf. Rimraf sletter filer. Vi demonstrerer det senere.

Overvågning af filændringer

Når vi koder i Node.js, kommer automatisk genstart af vores server ikke ud af kassen, ligesom når man laver et projekt lavet oven på create-react-app eller vue-cli. Derfor installerer vi en pakke kaldet nodemon, der udfører noget, når vi ændrer en fil i vores kode. Vi kan udnytte nodemon til at genstarte vores server hver gang en fil ændres.

Så det er udsigten på højt niveau af, hvordan det fungerer under emhætten. Med det, lad os starte med, hvordan vi skal konfigurere eller projicere.

Forudsætninger

Før vi begynder, skal vi først konfigurere nogle ting.

  1. Sørg for, at du har Node.js og npm installeret. Jeg anbefaler at installere deres nyeste LTS eller nuværende stabile version. Du kan installere det via Node.js Source eller NVM (Node Version Manager)
  2. Grundlæggende viden om terminalkommandoer. De fleste af kommandoerne er alligevel i vejledningen, så du behøver ikke bekymre dig om dem.
  3. Sørg for at have din terminal åben og din yndlings teksteditor installeret.

Det er det, vi er gode til at gå!

Installation af Express

Ved hjælp af Express-generatoren opretter vi et nyt projekt med genereret kode, flytter nogle filer og konverterer nogle kode til ES6-syntaks. Vi er nødt til at konvertere det på dette tidlige tidspunkt, fordi vi har brug for en måde at kontrollere, om vores ES6-kode fungerer.

Projektopsætning

Kør denne kommando i din terminal. Du kan navngive your-project-namemed det navn, du kan lide. --no-viewflag betyder, at vi ikke bruger nogen skabelonmotor som styr, ejs eller mops til vores skelet Express-app.

npx express-generator your-project-name --no-view

Når du har oprettet din app, skal du gå til din appkatalog. Til Windows Powershell- og Linux-terminaler skal du bruge:

cd your-project-name

Åbn derefter den teksteditor, du kan lide. For mig bruger jeg bare VSCode, så jeg har bare min terminal og teksteditor åben på samme tid. Men du kan bruge hvilken som helst teksteditor, du ønsker.

Installation af pakker og flytning og sletning af filer

Når vi har det genererede projekt klar, er vi nødt til installafhængighederne og flytte nogle mapper. Kør denne kommando for at installere Express og andre pakker.

npm installation

Mens du venter på, at afhængighederne skal installeres, skal du følge disse trin.

  • Opret en server/mappe
  • Put bin/, app.jsog routes/inde i server/mappen.
  • Omdøb www, fundet i bintilwww.js
  • Efterlad public/mappen ved din projektrod.

Din filstruktur ser sådan ud:

Nu, fordi vi har ændret filstrukturen, fungerer vores startserver-script ikke. Men vi ordner det undervejs.

Konvertering til ES6-kode

At konvertere den genererede kode til ES6 er lidt kedelig, så jeg sender bare koden her og er velkommen til at kopiere og indsætte den.

Kode for bin/www.js:

Nu, fordi vi har ændret filstrukturen, fungerer vores startserver-script ikke. Her er hvad vi skal gøre for at ordne det. På din package.json-fil skal du omdøbe start-scriptet, så det serverfindes i et JSON-objekt kaldet"scripts"

// package.json { "name": "your-project-name", // ....other details "scripts": { "server": "node ./server/bin/www" } }

Du kan se, at vi ændrede filstien fra ./bin/wwwtil, ./server/bin/wwwfordi vi flyttede filer til server/. Vi bruger start script senere.

Prøv det! Prøv at køre serveren ved at skrive npm run serverpå din terminal, og gå til localhost:3000i din browser.

Konvertering af topniveau-koden til brug af ES6-import

At konvertere den genererede kode til ES6 er lidt kedelig, så jeg sender bare koden her og er velkommen til at kopiere og indsætte den.

Kode for bin/www.js:

// bin/www.js /** * Module dependencies. */ import app from '../app'; import debugLib from 'debug'; import http from 'http'; const debug = debugLib('your-project-name:server'); // ..generated code below.

Næsten alle vores ændringer er kun øverst og nederst i filerne. Vi efterlader anden genereret kode, som den er.

Kode for routes/index.js og routes/users.js:

// routes/index.js and users.js import express from 'express'; var router = express.Router(); // ..stuff below export default router;

Kode for app.js:

// app.js import express from 'express'; import path from 'path'; import cookieParser from 'cookie-parser'; import logger from 'morgan'; import indexRouter from './routes/index'; import usersRouter from './routes/users'; var app = express(); app.use(logger('dev')); app.use(express.json()); app.use(express.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, '../public'))); app.use('/', indexRouter); app.use('/users', usersRouter); export default app;

I app.js, fordi vi forlod public/ved projektets rod, skal vi ændre den statiske Express-sti en mappe op. Bemærk, at stien 'public'blev '../public'.

app.use(express.static(path.join(__dirname, '../public')));

Okay, vi er færdige med at konvertere koden! Lad os konfigurere vores scripts nu.

Opsætning af scripts

Ved opsætning af scripts udfører hvert script en anden rolle. Og vi genbruger hvert npm-script. Og for vores udviklings- og produktionsmiljøer har de en anden konfiguration. (Næsten identisk, vil du se senere) Derfor er vi nødt til at komponere vores scripts, så vi kan bruge dem uden gentagne gange at skrive de samme ting igen.

Installer 'npm-run-all'

Da nogle terminalkommandoer ikke fungerer på windows cmd, skal vi installere en pakke kaldet, npm-run-allså dette script fungerer i ethvert miljø. Kør denne kommando i din terminalprojektrod.

npm install --save npm-run-all

Installer babel, nodemon og rimraf

Babel er moderne JavaScript-spiller. En transpiller betyder, at din moderne JavaScript-kode vil blive omdannet til et ældre format, som Node.js kan forstå. Kør denne kommando i din terminalprojektrod. Vi bruger den nyeste version af babel (Babel 7+).

Bemærk, at Nodemon er vores filovervågning, og Rimraf er vores filfjernerpakker.

npm install --save @babel/core @babel/cli @babel/preset-env nodemon rimraf

Tilføjelse af transpiltscript

Før babel begynder at konvertere kode, skal vi fortælle det, hvilke dele af koden der skal oversættes. Bemærk, at der er en masse konfigurationer til rådighed, fordi babel kan konvertere mange JS-syntakser til alle forskellige formål. Heldigvis behøver vi ikke tænke på det, fordi der er en tilgængelig standard for det. Vi bruger standardkonfiguration kaldet preset-env (den vi installerede tidligere) i vores package.json-fil for at fortælle Babel i hvilket format vi sender koden.

Inde i din package.jsonfil skal du oprette et "babel"objekt og placere denne indstilling.

// package.json { // .. contents above "babel": { "presets": ["@babel/preset-env"] }, }

Efter denne opsætning er vi nu klar til at teste, om babel virkelig konverterer kode. Tilføj et script med navnet transpile i din package.json:

// package.json "scripts": { "start": "node ./server/bin/www", "transpile": "babel ./server --out-dir dist-server", }

Hvad skete der nu her? Først skal vi køre cli-kommandoen babel, angive de filer, der skal konverteres, i dette tilfælde filerne i server/og placere det transpilerede indhold i en anden mappe, der kaldes dist-serveri vores projektrod.

Du kan teste det ved at køre denne kommando

npm run transpile

Du ser en ny mappe dukke op.

Ja, det fungerede! ✅ Som du kan se, er der en mappe, der har den samme mappestruktur som vores servermappe, men med konverteret kode inde. Temmelig sej, ikke? Næste trin er at køre prøve, hvis vores server kører!

Rent script

For at have en ny kopi hver gang vi transpilerer kode til nye filer, har vi brug for et script, der fjerner gamle filer. Føj dette script til din package.json

"scripts": { "server": "node ./dist-server/bin/www", "transpile": "babel ./server --out-dir dist-server", "clean": "rimraf dist-server" }

Dette npm-script, som vi lavede, betyder, at det fjerner mappen dist-server/

Nu for at kombinere transpile og rense, tilføj et script kaldet build, som kombinerer de to processer.

// scripts "build": "npm-run-all clean transpile"

Kører dev-script

Nu har vi et build-script, vi skal køre vores dev-server. Vi tilføjer et script kaldet devi vores package.json. Dette sørger for at indstille vores Node-miljø til "udvikling", fjerne gammel transpileret kode og erstatte den med en ny.

"scripts": { "build": "npm-run-all clean transpile" "server": "node ./dist-server/bin/www", "dev": "NODE_ENV=development npm-run-all build server", "transpile": "babel ./server --out-dir dist-server", "clean": "rimraf dist-server" }

Bemærk her, at vi igen har ændret den fil, vi kører på vores serverscript. Vi kører filstien med den transpilerede kode, der findes i dist-server/.

Tilføjelse af prod-scripts

Hvis vi har et dev-script, der sætter Node-miljøet til udvikling, har vi et prodscript, der sætter det til "produktion". Vi bruger denne konfiguration, når vi implementerer. (Heroku, AWS, DigitalOcean osv.) Vi tilføjer nu vores start-script og prod-script igen i vores package.json igen.

"scripts": { "start": "npm run prod" "build": "npm-run-all clean transpile" "server": "node ./dist-server/bin/www", "dev": "NODE_ENV=development npm-run-all build server", "prod": "NODE_ENV=production npm-run-all build server", "transpile": "babel ./server --out-dir dist-server", "clean": "rimraf dist-server" }

We set start script default to prod because start script is being used always by deployment platforms like AWS or Heroku to start a server.

Try either by running npm start or npm run prod .

// package.json ... "nodemonConfig": { "exec": "npm run dev", "watch": ["server/*", "public/*"], "ignore": ["**/__tests__/**", "*.test.js", "*.spec.js"] }, "scripts": { // ... other scripts "watch:dev": "nodemon" }

How about auto-restarting the server whenever a file change?

One final script, in order to complete our development setup. We need to add a file watcher script that runs a command whenever a change is made in a file. Add a JSON Object named “nodemonConfig” in your package.json. This is where we store what we tell the watcher what to do when a file changes.

Also, add a script called watch:dev in your package.json

// package.json ... "nodemonConfig": { "exec": "npm run dev", "watch": ["server/*", "public/*"], "ignore": ["**/__tests__/**", "*.test.js", "*.spec.js"] }, "scripts": { // ... other scripts "watch:dev": "nodemon" }

Nodemon config contains settings related to

  • Which command to run whenever a file changes, in our case npm run dev
  • What folders and files to watch
  • And which files to ignore

More about configuration of nodemon here.

Now that we have our file watcher, you can now just run npm run watch:dev , code, and save your file. and whenever you go to localhost:3000 , you’ll see the changes. Try it out!

Bonus: Add tests!

To add tests in our project, simply install Jest from npm, add a few config, and add a script called test in our package.json

npm i -D jest

Add an object called “jest”, and a test script in your package.json

// package.json ... "jest": { "testEnvironment": "node" }, "scripts": { // ..other scripts "test": "jest" }

Try it out, make a file sample.test.js, write any tests, and run the script!

npm run test

TL;DR

Here are the simplified steps for how to enable ES6 in Node.js. I’ll also include the repo so you can copy and inspect the whole code.

  • Make a new project using express your-project-name terminal command.
  • Move the bin/, routes/ and app into a new folder called src/ , and convert the code into ES6. Also don’t forget to rename bin/www to www.js
  • Installer alle afhængigheder og devDependencies
npm i npm-run-all @babel/cli @babel/core @babel/preset-env nodemon rimraf --save npm i -D jest
  • Føj disse scripts til din package.json
"scripts": { "start": "npm run prod", "build": "npm-run-all clean transpile", "server": "node ./dist-server/bin/www", "dev": "NODE_ENV=development npm-run-all build server", "prod": "NODE_ENV=production npm-run-all build server", "transpile": "babel ./server --out-dir dist-server", "clean": "rimraf dist-server", "watch:dev": "nodemon", "test": "jest" }
  • Sæt konfigurationer til babel, nodemon og spøg i din pakke. Json
"nodemonConfig": { "exec": "npm run dev", "watch": [ "server/*", "public/*" ], "ignore": [ "**/__tests__/**", "*.test.js", "*.spec.js" ] }, "babel": { "presets": [ "@babel/preset-env" ] }, "jest": { "testEnvironment": "node" },
  • Test dine scripts ved at køre npm run your-script-here
  • Du kan se den komplette repo på min github

Noter og ansvarsfraskrivelse

Bemærk, at denne opsætning muligvis ikke er ideel til alle situationer, specielt til store projekter. (som 1k filfiler). Transpilering af trin og sletning kan bremse dit udviklingsmiljø. Plus, ES-moduler, kommer næsten til node. Men ikke desto mindre er dette et godt undervisningsmateriale til at forstå, hvordan transipiling løber under emhætten som når vi udvikler front-end apps :)

Konklusion

Okay! Jeg håber, du har lært meget. Tak fordi du læste så langt.

Glad kodning!

Tjek den fulde repo her.

Denne artikel er offentliggjort i freeCodecamp nyheder.

? Twitter -? freeCodeCamp -? Portefølje - ⚛️ Github