Ako povoliť syntax ES6 (a ďalej) pomocou Node a Express

Skúšali ste niekedy písať aplikácie front-end pomocou syntaxe ES6, ale potom, keď ste sa rozhodli naučiť sa vývoj back-endu pomocou Node.js a Express, uvedomili ste si, že nemôžete používať veci ako import froma   export default? Ak je to tak, ste na správnom mieste! Toto je krok za krokom sprievodca konfiguráciou vašich vývojových a vývojových prostredí, nastavenia skriptov a ako bonus sa naučíme pridávanie testov!

Obsah / zhrnutie tém

  • Ako to funguje?
  • Predpoklady
  • Inštaluje sa expres
  • Nastavenie skriptov
  • Bonus
  • TL; DR

Ako to funguje? Celkový pohľad na to, čo potrebujeme

Ak chcete pri vývoji aplikácií typu back-end umožniť front-endový vývojový zážitok, je tu prehľad vysokej úrovne procesov prebiehajúcich vo vašom projekte.

Prekladač kódov z ES6 + na ES5

Potrebujeme balíček, ktorý prekladá syntax ES6 a vyššej do kódu ES5. Kód ES5 je štýl syntaxe JS, ktorý je čitateľný pre node.js, ako napríklad module.exportsalebo var module = require('module'). Všimnite si, že v dnešnej dobe je možné v Node.js. použiť takmer 99% syntaxe ES6 +. Tu svieti balíček s názvom babel .

Babel vezme súbor js, prevedie v ňom kód a vydá ho do nového súboru.

Skript, ktorý odstraňuje súbory

Kedykoľvek niečo zmeníme v našom kóde, nahráme to transportéru a zakaždým vydá novú kópiu. Preto potrebujeme skript, ktorý odstráni súbory skôr, ako vstúpi nová transponovaná kópia. A k tomu existuje existujúci balík s názvom rimraf. Rimraf maže súbory. To si ukážeme neskôr.

Pozorovateľ zmien súborov

Pri kódovaní v Node.js nevyjde automatický reštart nášho servera z krabice, rovnako ako pri realizácii projektu vytvoreného navrchu create-react-app alebo vue-cli. Preto nainštalujeme balíček s názvom nodemon, ktorý niečo vykoná, kedykoľvek zmeníme súbor v našom kóde. Môžeme využiť nodemon na reštartovanie nášho servera pri každej zmene súboru.

To je teda pohľad na vysokej úrovni na to, ako to funguje pod kapotou. S tým začnime tým, ako by sme mali nastavenie alebo projektovanie.

Predpoklady

Než začneme, je potrebné najskôr nastaviť niektoré veci.

  1. Uistite sa, že máte nainštalované súbory Node.js a npm. Odporúčam nainštalovať ich najnovšiu LTS alebo súčasnú stabilnú verziu. Môžete ho nainštalovať prostredníctvom zdroja Node.js alebo NVM (Node Version Manager)
  2. Základné znalosti príkazov terminálu. Väčšina príkazov je v tutoriále aj tak, takže si s nimi nemusíte robiť starosti.
  3. Uistite sa, že máte otvorený terminál a nainštalovaný obľúbený textový editor.

To je všetko, môžeme vyraziť!

Inštaluje sa Express

Pomocou generátora Express vytvoríme nový projekt s vygenerovaným kódom, presunieme niektoré súbory a nejaký kód prevedieme na syntax ES6. Musíme ho previesť v tejto počiatočnej fáze, pretože potrebujeme spôsob, ako overiť, či náš kód ES6 funguje.

Nastavenie projektu

Spustite tento príkaz vo svojom termináli. Môžete pomenovať your-project-namemenom, ktoré sa vám páči. --no-viewpríznak znamená, že pre našu kostrovú aplikáciu Express nebudeme používať žiaden šablónový motor, ako sú riadidlá, ejs alebo mopslíci.

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

Po vytvorení aplikácie musíte prejsť do adresára aplikácie. Pre terminály Windows Powershell a Linux použite:

cd your-project-name

Ďalej otvorte textový editor, ktorý sa vám páči. Pre mňa iba používam VSCode, takže mám súčasne otvorený terminál aj textový editor. Môžete však použiť ľubovoľný požadovaný textový editor.

Inštalácia balíkov a presun a mazanie súborov

Keď máme vygenerovaný projekt pripravený, potrebujeme installzávislosti a presunieme niektoré priečinky. Spustením tohto príkazu nainštalujete Express a ďalšie balíky.

npm nainštalovať

Počas čakania na inštaláciu závislostí postupujte podľa týchto pokynov.

  • vytvorte server/priečinok
  • Dať bin/, app.jsa routes/vnútri server/zložky.
  • Premenovanie www, nájdený v binnawww.js
  • Nechajte public/priečinok v koreňovom adresári projektu.

Vaša štruktúra súborov bude vyzerať takto:

Teraz, pretože sme upravili štruktúru súborov, náš skript štartovacieho servera nebude fungovať. Postupom času to však napravíme.

Prevod na kód ES6

Konverzia vygenerovaného kódu na ES6 je trochu zdĺhavá, takže sem iba pošlem kód a kľudne ho skopírujem a prilepím.

Kód pre bin/www.js:

Teraz, pretože sme upravili štruktúru súborov, náš skript štartovacieho servera nebude fungovať. Tu je to, čo urobíme, aby sme to napravili. V súbore package.json premenujte štartovací skript na servernájdený v objekte JSON s názvom"scripts"

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

Uvidíte, že sme zmenili cestu k súboru z ./bin/wwwna, ./server/bin/wwwpretože sme súbory presunuli do server/. Štartovací skript použijeme neskôr.

Skús to! Skúste spustiť server zadaním výrazu npm run serverna termináli a localhost:3000vo svojom prehliadači prejdite na adresu.

Prevod kódu najvyššej úrovne na použitie importu ES6

Konverzia vygenerovaného kódu na ES6 je trochu zdĺhavá, takže sem iba pošlem kód a kľudne ho skopírujem a prilepím.

Kód pre 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.

Takmer všetky naše úpravy sú iba v hornej a dolnej časti súborov. Ostatný vygenerovaný kód nechávame taký, aký je.

Kód pre routes/index.js a routes/users.js:

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

Kód pre 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;

V roku app.js, pretože sme opustili public/v koreňovom adresári projektu, musíme zmeniť Express statická cesta jednu zložku hore. Všimnite si, že cesta sa 'public'stala '../public'.

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

Dobre, konvertujeme kód! Poďme si teraz nastaviť naše skripty.

Nastavenie skriptov

Pri nastavovaní skriptov má každý skript inú rolu. Každý skript NPM znova použijeme. A pre naše vývojové a produkčné prostredia majú inú konfiguráciu. (Takmer identické, uvidíte neskôr) Preto musíme skripty skomponovať, aby sme ich mohli používať bez toho, aby ste opakovane písali to isté.

Nainštalujte program `npm-run-all`

Pretože niektoré príkazy terminálu nebudú v systéme Windows cmd fungovať, musíme si nainštalovať balík s názvom, npm-run-allaby tento skript fungoval pre akékoľvek prostredie. Spustite tento príkaz v koreňovom adresári projektu terminálu.

npm install --save npm-run-all

Nainštalujte si babel, nodemon a rimraf

Babel je moderný prekladač JavaScriptu. Transpiler znamená, že váš moderný kód JavaScriptu bude transformovaný do staršieho formátu, ktorému Node.js rozumie. Spustite tento príkaz v koreňovom adresári projektu terminálu. Budeme používať najnovšiu verziu babel (Babel 7+).

Všimnite si, že Nodemon je náš pozorovateľ súborov a Rimraf sú naše balíčky na odstraňovanie súborov.

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

Pridáva sa skript transpile

Predtým, ako babel začne prevádzať kód, musíme mu povedať, ktoré časti kódu majú byť preložené. Upozorňujeme, že je k dispozícii veľa konfigurácií, pretože babel dokáže konvertovať veľa syntaxí JS na rôzne účely. Našťastie to nemusíme myslieť, pretože pre to existuje predvolená hodnota. V našom súbore package.json používame predvolenú konfiguráciu nazvanú ako preset-env (tú, ktorú sme nainštalovali skôr), aby sme informovali Babel, v akom formáte kód transponujeme.

Vo svojom package.jsonsúbore vytvorte "babel"objekt a vložte toto nastavenie.

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

Po tomto nastavení sme teraz pripravení vyskúšať, či program Babel skutočne prevádza kód. Pridajte skript s názvom transpile do package.json:

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

Čo sa tu stalo? Najskôr musíme spustiť príkaz cli babel, určiť súbory, ktoré sa majú previesť, v tomto prípade súbory server/a vložiť prenesený obsah do iného priečinka, ktorý sa volá dist-serverv koreňovom adresári projektu.

Môžete to vyskúšať spustením tohto príkazu

npm run transpile

Uvidíte nový priečinok.

Jaj, fungovalo to! ✅ Ako vidíte, existuje priečinok, ktorý má rovnakú štruktúru priečinkov ako náš serverový priečinok, ale vo vnútri ktorého je prevedený kód. Celkom v pohode, že? Ďalším krokom je spustenie, ak je náš server spustený!

Čistý scenár

Aby sme mali čerstvú kópiu vždy, keď kód prenesieme do nových súborov, potrebujeme skript, ktorý odstráni staré súbory. Pridajte tento skript do súboru package.json

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

Tento skript NPM, ktorý sme vytvorili, znamená, že odstráni priečinok dist-server/

Teraz, keď chcete skombinovať transpile a clean, pridajte skript s názvom build, ktorý kombinuje tieto dva procesy.

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

Running dev script

Now we have a build script, we need to run our dev server. We’ll add a script called dev in our package.json. This takes care of setting our Node Environment to “development”, removing old transpiled code, and replacing it with a new one.

"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" }

Note here that we’ve changed again the file we are running on our server script. We’re running the file-path with the transpiled code, found in dist-server/.

Adding prod scripts

If we have a dev script that sets the Node Environment to development, we have a prod script that sets it to “production.” We use this configuration when we are deploying. (Heroku, AWS, DigitalOcean, etc..) We’re now adding again our start script and prod script in our package.json again.

"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
  • Nainštalujte všetky závislosti a devDependencies
npm i npm-run-all @babel/cli @babel/core @babel/preset-env nodemon rimraf --save npm i -D jest
  • Pridajte tieto skripty do súboru 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" }
  • Vložte konfigurácie pre babel, nodemon a vtip do vášho package.json
"nodemonConfig": { "exec": "npm run dev", "watch": [ "server/*", "public/*" ], "ignore": [ "**/__tests__/**", "*.test.js", "*.spec.js" ] }, "babel": { "presets": [ "@babel/preset-env" ] }, "jest": { "testEnvironment": "node" },
  • Otestujte svoje skripty spustením npm run your-script-here
  • Kompletné repo uvidíte na mojom githube

Poznámky a zrieknutia sa zodpovednosti

Upozorňujeme, že toto nastavenie nemusí byť ideálne pre všetky situácie, zvlášť pre veľké projekty. (ako 1k súbory kódu). Transpilácia kroku a odstránenie môže spomaliť vaše vývojové prostredie. Plus, moduly ES, sa takmer blížia k uzlu. Je to však dobrý vzdelávací materiál na pochopenie toho, ako transipilácia beží pod kapotou, ako keď vyvíjame front-end aplikácie :)

Záver

V poriadku! Dúfam, že ste sa veľa naučili. Ďakujem, že ste sa dočítali až sem.

Šťastné kódovanie!

Tu si pozrite celé repo.

Tento článok je uverejnený v novinkách freeCodecamp.

? Twitter -? freeCodeCamp -? Portfólio - ⚛️ Github