Ați încercat vreodată să scrieți aplicații front-end folosind sintaxa ES6, dar atunci când ați decis să învățați dezvoltarea back-end cu Node.js și Express, ați realizat că nu puteți folosi lucruri precum import from și export default? Dacă da, ai ajuns la locul potrivit! Acesta este un ghid pas cu pas despre cum să vă configurați mediile de dezvoltare și producție, scripturi de configurare și, ca bonus, vom învăța cum să adăugați teste!

Cuprins / Rezumat subiecte

  • Cum functioneazã?
  • Condiții prealabile
  • Se instalează expres
  • Configurarea scripturilor
  • Primă
  • TL; DR

Cum functioneazã? O viziune la nivel înalt a ceea ce avem nevoie

Pentru a permite o experiență de dezvoltare front-end în timp ce dezvoltați aplicații back-end, iată o imagine de nivel înalt a proceselor care se întâmplă cu proiectul dvs.

Cod Transpiler de la ES6 + la ES5

Avem nevoie de un pachet care să traducă sintaxa ES6 și mai sus în cod ES5. Codul ES5 este stilul de sintaxă JS care poate fi citit de node.js, cum ar fi module.exports sau var module = require('module') . Rețineți că în prezent, aproape 99% din sintaxa ES6 + poate fi utilizată în Node.js. Aici s-a numit pachetul babel strălucește.

Babel preia un fișier js, convertește codul din acesta și scoate într-un fișier nou.

Script care elimină fișierele

Ori de câte ori schimbăm ceva în codul nostru, îl hrănim către transpiler și scoate de fiecare dată o copie nouă. De aceea avem nevoie de un script care să elimine fișierele înainte de a intra noua copie transpilată. Și pentru asta, există un pachet existent numit rimraf. Rimraf șterge fișiere. Vom demonstra asta mai târziu.

Observator al modificărilor de fișiere

Când codificați în Node.js, repornirea automată a serverului nostru nu iese din cutie la fel ca atunci când faceți un proiect realizat pe partea de sus a create-react-app sau vue-cli. De aceea vom instala un pachet numit nodemon, care execută ceva ori de câte ori schimbăm un fișier din codul nostru. Putem folosi nodemon pentru a reporni serverul nostru de fiecare dată când este modificat un fișier.

Deci, aceasta este viziunea la nivel înalt a modului în care funcționează sub capotă. Cu aceasta, să începem cum ar trebui să configurăm sau să proiectăm.

Condiții prealabile

Înainte de a începe, avem nevoie mai întâi de câteva lucruri de configurare.

  1. Asigurați-vă că aveți instalat Node.js și npm. Vă recomandăm să instalați cea mai recentă versiune LTS sau curentă stabilă. Puteți să-l instalați prin Sursa Node.js sau NVM (Manager versiuni nod)
  2. Cunoașterea de bază a comenzilor terminalului. Majoritatea comenzilor sunt oricum în tutorial, deci nu trebuie să vă faceți griji cu privire la ele.
  3. Asigurați-vă că aveți terminalul deschis și editorul de text preferat instalat.

Gata, suntem bine să plecăm!

Instalarea Express

Folosind generatorul Express, vom crea un nou proiect cu codul generat, vom muta unele fișiere și vom converti unele coduri în sintaxa ES6. Trebuie să-l convertim în acest stadiu incipient, deoarece avem nevoie de o modalitate de a verifica dacă codul nostru ES6 funcționează.

Configurare proiect

Rulați această comandă în terminalul dvs. Puteți numi your-project-name cu numele care îți place. --no-view steag înseamnă că nu vom folosi niciun motor de șablonare, cum ar fi ghidon, ejs sau pug, pentru aplicația noastră schelet Express.

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

După crearea aplicației, trebuie să accesați directorul aplicației. Pentru terminalele Windows Powershell și Linux, utilizați:

cd your-project-name

Apoi, deschideți editorul de text care vă place. Pentru mine, folosesc doar VSCode, așa că am terminalul și editorul de text deschise în același timp. Dar puteți utiliza orice editor de text doriți.

Instalarea pachetelor și mutarea și ștergerea fișierelor

După ce avem proiectul generat gata, trebuie install dependențele și mutați câteva foldere. Rulați această comandă pentru a instala Express și alte pachete.

instalare npm

În timp ce așteptați instalarea dependențelor, urmați acești pași.

  • creeaza o server/ pliant
  • A pune bin/ , app.js , și routes/ în interiorul server/ pliant.
  • Redenumiți www, gasit in bin la www.js
  • Părăsi public/ folder la rădăcina proiectului.

Structura fișierului dvs. va arăta astfel:

Cum se activeaza sintaxa ES6 si nu numai cu Node
Așa arată structura noastră de fișiere. folderul `public /` se află la rădăcină și toate fișierele `.js` se află în folderul` server / `.

Acum, pentru că am modificat structura fișierului, scriptul nostru de pornire server nu va funcționa. Dar o vom remedia pe parcurs.

Conversia în cod ES6

Conversia codului generat în ES6 este puțin plictisitoare, așa că voi posta codul aici și nu ezitați să îl copiați și să-l inserați.

Cod pentru bin/www.js:

Acum, pentru că am modificat structura fișierului, scriptul nostru de pornire server nu va funcționa. Iată ce vom face pentru a remedia problema. În fișierul package.json, redenumiți scriptul de pornire în servergăsit într-un obiect JSON numit "scripts"

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

Veți vedea că am schimbat calea fișierului din ./bin/wwwla ./server/bin/www pentru că am mutat fișiere în server/. Vom folosi scriptul de pornire mai târziu.

Incearca-l! Încercați să rulați serverul tastând npm run server de pe terminal și accesați localhost:3000 pe browserul dvs.

Conversia codului de nivel superior pentru a utiliza importurile ES6

Conversia codului generat în ES6 este puțin plictisitoare, așa că voi posta codul aici și nu ezitați să îl copiați și să-l inserați.

Cod pentru 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.

Aproape toate modificările noastre sunt doar în partea de sus și de jos a fișierelor. Lăsăm alt cod generat ca atare.

Cod pentru routes/index.js și routes/users.js:

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

Cod pentru 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;

În app.js , pentru că am plecat public/ la rădăcina proiectului, trebuie să schimbăm calea statică Express cu un folder în sus. Observați că calea 'public' a devenit '../public' .

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

Bine, am terminat cu conversia codului! Să ne configurăm scripturile acum.

Configurarea scripturilor

La configurarea scripturilor, fiecare script îndeplinește un rol diferit. Și reutilizăm fiecare script npm. Și pentru mediile noastre de dezvoltare și producție, acestea au o configurație diferită. (Aproape identic, veți vedea mai târziu) De aceea trebuie să compunem scripturile noastre, astfel încât să le putem folosi fără a mai repeta aceleași lucruri.

Instalați `npm-run-all`

Deoarece unele comenzi de terminal nu vor funcționa pe Windows cmd, trebuie să instalăm un pachet numit npm-run-all deci acest script va funcționa pentru orice mediu. Rulați această comandă în rădăcina proiectului terminal.

npm install --save npm-run-all

Instalați babel, nodemon și rimraf

Babel este un transpilator JavaScript modern. Un transpilator înseamnă că codul dvs. JavaScript modern va fi transformat într-un format mai vechi pe care Node.js îl poate înțelege. Rulați această comandă în rădăcina proiectului terminal. Vom folosi cea mai recentă versiune de babel (Babel 7+).

Rețineți că Nodemon este monitorul nostru de fișiere, iar Rimraf este pachetele noastre de eliminare a fișierelor.

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

Adăugarea unui script transpile

Înainte ca babel să înceapă să convertească codul, trebuie să-i spunem ce părți ale codului să traducem. Rețineți că există o mulțime de configurații disponibile, deoarece babel poate converti o mulțime de sintaxe JS pentru fiecare tip de scop. Din fericire, nu trebuie să ne gândim la asta, deoarece există o valoare implicită disponibilă pentru asta. Folosim configurarea implicită numită preset-env (cea pe care am instalat-o mai devreme) în fișierul nostru package.json pentru a spune Babel în ce format transpilăm codul.

În interiorul tău package.json fișier, creați un fișier "babel" obiect și pune această setare.

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

După această configurare, suntem acum gata să testăm dacă babel convertește cu adevărat codul. Adăugați un script numit transpile în package.json:

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

Ce s-a întâmplat aici? Mai întâi trebuie să executăm comanda cli babel , specificați fișierele pentru a converti, în acest caz, fișierele din server/ și puneți conținutul transpilat într-un folder diferit numit dist-server în rădăcina proiectului nostru.

Puteți să-l testați executând această comandă

npm run transpile

Veți vedea un nou folder care apare.

1611783489 592 Cum se activeaza sintaxa ES6 si nu numai cu Node
A apărut un folder nou numit dist-server din cauza scriptului pe care l-am rulat.

Da, a funcționat! ✅ După cum puteți vedea, există un folder care are aceeași structură de folder ca folderul serverului nostru, dar cu cod convertit în interior. Destul de cool nu? Următorul pas este să rulați încercați dacă serverul nostru rulează!

Script curat

Pentru a avea o copie nouă de fiecare dată când transpilăm cod în fișiere noi, avem nevoie de un script care să elimine fișierele vechi. Adăugați acest script la package.json

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

Acest script npm pe care l-am creat înseamnă că elimină folderul dist-server/

Acum, pentru a combina transpile și curat, adăugați un script numit build , care combină cele două procese.

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

Se execută scriptul dev

Acum avem un script de construire, trebuie să rulăm serverul nostru de dezvoltare. Vom adăuga un script numit dev în pachetul nostru.json. Acest lucru se ocupă de setarea mediului nostru de noduri la „dezvoltare”, eliminarea vechiului cod transpilat și înlocuirea acestuia cu unul nou.

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

Rețineți că am schimbat din nou fișierul pe care îl rulăm pe scriptul serverului nostru. Rulăm calea fișierului cu codul transpilat, găsit în dist-server/.

Adăugarea de scripturi prod

Dacă avem un script dev care setează Node Environment la dezvoltare, avem un prod script care îl setează la „producție”. Folosim această configurație atunci când implementăm. (Heroku, AWS, DigitalOcean, etc.) Acum adăugăm din nou scriptul de pornire și scriptul prod în 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"
}

Noi am stabilit start script implicit pentru a produce, deoarece scriptul de pornire este folosit întotdeauna de platforme de implementare precum AWS sau Heroku pentru a porni un server.

Încercați fie rularea npm start sau 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"
}

Ce zici de repornirea automată a serverului ori de câte ori se schimbă un fișier?

Un ultim script, pentru a finaliza configurarea noastră de dezvoltare. Trebuie să adăugăm un script de monitorizare a fișierelor care execută o comandă ori de câte ori se face o modificare într-un fișier. Adăugați un obiect JSON numit „nodemonConfig” în package.json. Aici stocăm ceea ce îi spunem observatorului ce trebuie să facă atunci când se modifică un fișier.

De asemenea, adăugați un script numit watch:dev în pachetul dvs..json

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

Configurarea Nodemon conține setări legate de

  • Ce comandă să ruleze ori de câte ori se modifică un fișier, în cazul nostru npm run dev
  • Ce foldere și fișiere să urmăriți
  • Și ce fișiere să ignori

Mai multe despre configurarea nodemonului aici.

Acum că avem monitorul nostru de fișiere, acum puteți rula npm run watch:dev , codifică și salvează fișierul. și ori de câte ori mergi la localhost:3000 , veți vedea modificările. Încearcă!

Bonus: Adăugați teste!

Pentru a adăuga teste în proiectul nostru, pur și simplu instalați Glumă de la npm, adăugați câteva configurări și adăugați un script numit test în pachetul nostru.json

npm i -D jest

Adăugați un obiect numit „jest” și un script de testare în package.json

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

Încercați, creați un fișier sample.test.js, scrieți orice teste și rulați scriptul!

npm run test

1611783489 405 Cum se activeaza sintaxa ES6 si nu numai cu Node
Exemplu de captură de ecran a testului de rulare npm.

TL; DR

Iată pașii simplificați pentru a activa ES6 în Node.js. Voi include, de asemenea, repo, astfel încât să puteți copia și inspecta întregul cod.

  • Realizați un proiect nou folosind express your-project-name comanda terminalului.
  • Mută bin/, routes/ și app într-un folder nou numit src/ și convertiți codul în ES6. De asemenea, nu uitați să redenumiți bin/www la www.js
  • Instalați toate dependențele și devDependențele
npm i npm-run-all @babel/cli @babel/core @babel/preset-env nodemon rimraf --save
npm i -D jest
  • Adăugați aceste scripturi la 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" 
}
  • Puneți configurații pentru babel, nodemon și jest în package.json
"nodemonConfig": {
  "exec": "npm run dev",
  "watch": [ "server/*", "public/*" ],
  "ignore": [ "**/__tests__/**", "*.test.js", "*.spec.js" ] 
}, 
"babel": { 
  "presets": [ "@babel/preset-env" ]
},
"jest": {
  "testEnvironment": "node"
},

Note și declinări de responsabilitate

Rețineți că această configurare nu poate fi dovedită ideală pentru toate situațiile, în special pentru proiecte mari. (cum ar fi fișiere de cod 1k). Transpunerea pasului și ștergerea ar putea încetini mediul de dezvoltare. În plus, modulele ES aproape că vor ajunge la nod. Dar, totuși, acesta este un bun material educațional pentru a înțelege cum rulează transipilingul sub capotă ca atunci când dezvoltăm aplicații front-end 🙂

Concluzie

In regula! Sper că ai învățat multe. Vă mulțumesc că ați citit până aici.

Codificare fericită!

Verificați repo completul aici.

Acest articol este publicat în știrile freeCodecamp.

? Stare de nervozitate -? Routech – ? Portofoliu⚛️ Github