Come abilitare la sintassi ES6 (e oltre) con Node ed Express

Articolo originale: https://www.freecodecamp.org/news/how-to-enable-es6-and-beyond-syntax-with-node-and-express-68d3e11fe1ab/

Hai provato a scrivere app front-end usando la sintassi ES6, ma poi quando hai deciso di imparare lo sviluppo di back-end con Node.js ed Express, ti sei reso conto che non puoi usare cose come import from e export default? Se è così, sei nel posto giusto! Questa è una guida passo passo su come configurare i tuoi ambienti di sviluppo e produzione, gli script di configurazione e, come bonus, impareremo come aggiungere test!

Nota del traduttore: dalla versione NodeJS v6 molte funzionalità di ES6 sono supportate direttamente in Node, ma non tutto. Comunque questo è un articolo molto interessante se sei alle prime armi con i progetti back-end.

Come funziona? Una panoramica di ciò di cui abbiamo bisogno

Per ottenere nello sviluppo di app back-end un'esperienza simile a quella che si ha nello sviluppo front-end, ecco una panoramica dei processi che si verificano nel tuo progetto.

Trasformazione del Codice da ES6+ a ES5

Abbiamo bisogno di un pacchetto che traduca la sintassi ES6 e versioni successive in codice ES5. Il codice ES5 è lo stile della sintassi JS leggibile in node.js, come module.exports o var module = require('module'). Nota che al giorno d'oggi, quasi il 99% della sintassi ES6+ può essere utilizzato in Node.js. È qui che quindi torna utile il pacchetto chiamato babel.

Babel prende un file js, converte il codice in esso contenuto e lo restituisce in un nuovo file.

Script che rimuove i file

Ogni volta che cambiamo qualcosa nel nostro codice, lo inviamo al transpiler che ne emette una nuova copia ogni volta. Ecco perché abbiamo bisogno di uno script che rimuova i file prima che venga generata la nuova copia tradotta. E per questo, esiste un pacchetto chiamato rimraf . Rimraf elimina i file. Lo mostreremo più avanti.

Osservatore delle modifiche ai file

Durante la codifica in Node.js, il riavvio automatico del nostro server non viene eseguito immediatamente come quando si esegue un progetto creato su create-react-app o vue-cli. Ecco perché installeremo un pacchetto chiamato nodemon, che esegue qualcosa ogni volta che mettiamo mani al codice in un nostro file. Ad esempio possiamo sfruttare nodemon per riavviare il nostro server ogni volta che viene modificato un file.

Quindi questa è la panoramica di come funziona il meccanismo. Con questo, iniziamo su come dovremmo configurare o progettare.

Prerequisiti

Prima di iniziare, abbiamo bisogno verificare alcune cose:

Assicurati di aver installato Node.js e npm. Raccomando di installare l'ultimo LTS o la versione stabile corrente. Puoi installarlo tramite Node.js Source o NVM (Node Version Manager)
Conoscenza di base dei comandi da terminale. La maggior parte dei comandi sono comunque nel tutorial, quindi non devi preoccuparti di loro.
Assicurati di avere il tuo terminale aperto e avere installato il tuo editor di testo preferito .

Questo è tutto, siamo a posto!

Installazione di Express

Usando il generatore Express, creeremo un nuovo progetto con il codice generato, sposteremo alcuni file e convertiremo del codice nella sintassi ES6. Dobbiamo convertirlo in questa fase iniziale perché abbiamo bisogno di un modo per verificare se il nostro codice ES6 funziona.

Configurazione del progetto

Esegui questo comando nel tuo terminale. Puoi modificare your-project-name con un nome a tuo piacere. Il flag --no-view significa che non utilizzeremo alcun motore di creazione di modelli come anche handlebars, ejs o pug, per lo scheletro della nostra app Express.

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

Dopo aver creato l'app, devi accedere alla sua directory. Sia nel Powershell di Windows che nel terminale di Linux, scrivi:

cd your-project-name

Quindi, apri l'editor di testo che ti piace. Personalmente, uso solo VSCode, quindi ho solo il mio terminale e l'editor di testo aperti contemporaneamente. Ma puoi usare qualsiasi editor di testo che desideri.

Installazione di pacchetti e spostamento ed eliminazione di file

Quando è pronto il progetto generato, abbiamo bisogno di install (installare) le dipendenze e spostare alcune cartelle. Esegui questo comando per installare Express e altri pacchetti.

npm install

Mentre aspetti l'installazione delle dipendenze, esegui questi passaggi.

creare una cartella server/
Metti bin/, app.js e routes/ all'interno della cartella server/
Nella cartella bin, rinomina www in www.js
Lascia la cartella public/ nella radice del tuo progetto.

La struttura del tuo file sarà simile a questa:

Immagine — Ecco come appare la nostra struttura di file. La cartella `public/` si trova nella radice e tutti i file `.js` si trovano all'interno della cartella `server/`.

Ora, poiché abbiamo modificato la struttura del file, il nostro script per l'avvio del server non funzionerà. Ma lo sistemeremo strada facendo.

Conversione in codice ES6

La conversione del codice appena generato, in standard ES6 è un po' noiosa, quindi in questo caso posterò semplicemente il codice e sentiti libero di copiarlo e incollarlo.

Codice per bin/www.js:

Ora, poiché abbiamo modificato la struttura del file, il nostro script per l'avvio del server non funzionerà. Ecco cosa faremo per risolvere il problema. Nel file package.json, modifica lo script di avvio server che trovi in un oggetto JSON chiamato "scripts"

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

Come vedi abbiamo cambiato il percorso del file da ./bin/www a ./server/bin/www perché abbiamo spostato i file in server/. Useremo lo script di avvio in seguito.

Provalo! Prova ad avviare il server digitando npm run server sul tuo terminale, e quindi scrivi localhost:3000 nella barra degli indirizzi del tuo browser.

Conversione del codice di primo livello per utilizzare le importazioni ES6

La conversione del codice generato in ES6 è un po' noiosa, quindi anche qui posterò semplicemente il codice e sentiti libero di copiarlo e incollarlo.

Codice per 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.

Quasi tutte le nostre modifiche sono solo nella parte superiore e inferiore dei file. Stiamo lasciando l'altra parte di codice generato così com'è.

Codice per routes/index.js e routes/users.js:

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

Codice per 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;

In app.js, poiché abbiamo lasciato la radice del progetto in public/, è necessario modificare il percorso statico di Express di una cartella in su. Notare che il percorso 'public' è diventato '../public'.

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

Ok, abbiamo finito con la conversione del codice! Impostiamo ora i nostri script.

Impostazione degli script

Nella configurazione degli script, ogni script svolge un ruolo diverso. Sono script npm riutilizzabili. Hanno differenti configurazioni (quasi identiche, vedrai più avanti) a seconda dell'ambiente (di sviluppo o produzione). Ecco perché abbiamo bisogno di comporre i nostri script in modo da poterli utilizzare senza digitare ripetutamente le stesse cose da capo.

Installa `npm-run-all`

Poiché alcuni comandi del terminale non funzioneranno su cmd (terminale) di Windows , è necessario installare un pacchetto chiamato npm-run-all in modo che questo script funzioni per qualsiasi ambiente. Esegui questo comando nel terminale aperto sulla directory principale del tuo progetto.

npm install --save npm-run-all

Installa babel, nodemon e rimraf

Babel è un moderno transpiler JavaScript. Transpiler significa che il tuo codice in moderno JavaScript verrà trasformato in un formato precedente che Node.js può comprendere. Esegui questo comando nel terminale aperto sulla directory principale del tuo progetto. Utilizzeremo l'ultima versione di babel (Babel 7+).

Nota che Nodemon è il nostro osservatore di file e Rimraf è il nostro pacchetto di rimozione dei file.

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

Aggiunta dello script transpile

Prima che babel inizi a convertire il codice, dobbiamo dirgli quali parti del codice tradurre. Nota che ci sono molte configurazioni disponibili, perché babel può convertire molte sintassi JS per ogni tipo di scopo. Fortunatamente non abbiamo bisogno di pensarci perché c'è disponibile un'impostazione predefinita per questo. Stiamo usando la configurazione predefinita chiamata preset-env (quella che abbiamo installato in precedenza) nel nostro file package.json per dire a Babel in quale formato stiamo traspilando il codice.

All'interno del tuo file package.json, crea un oggetto "babel" e inserisci questa impostazione.

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

Ora, con questo settaggio, siamo pronti per testare se babel converte davvero il codice. Aggiungi uno script chiamato transpile nel tuo package.json:

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

Ora cosa è successo qui? Per prima cosa dobbiamo eseguire il comando cli babel, specificare i file da convertire, in questo caso, i file in server/ e mettere il contenuto transpilato in una cartella diversa chiamata dist-server nella nostra radice del progetto.

Puoi testarlo eseguendo questo comando

npm run transpile

Vedrai apparire una nuova cartella.

immagine-1 — È apparsa una nuova cartella chiamata dist-server a causa dello script che abbiamo eseguito.

Sì, ha funzionato! ✅ Come puoi vedere, c'è una cartella che ha la stessa struttura di cartelle della nostra cartella server ma con codice convertito all'interno. Abbastanza bello vero? Il prossimo passo è verificare se il nostro server è in esecuzione!

Script clean

Per avere una nuova copia ogni volta che traspiliamo il codice in nuovi file, abbiamo bisogno di uno script che rimuova i vecchi file. Aggiungi questo script al tuo package.json

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

Questo script npm che abbiamo creato rimuove la cartella dist-server/

Ora per combinare transpile e clean, aggiungi uno script chiamato build, che combina i due processi.

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

Esecuzione dello script di sviluppo

Ora che abbiamo uno script build, dobbiamo eseguire il nostro server di sviluppo. Aggiungeremo uno script chiamato dev nel nostro package.json. Questo si occupa di settare il nostro Node Environment su "development", rimuovendo il vecchio codice transpilato e sostituendolo con uno nuovo.

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

Come puoi notare abbiamo cambiato di nuovo il file che stiamo eseguendo sullo script del nostro server. Stiamo eseguendo il percorso del file con il codice transpilato, che si trova in dist-server/.

Aggiunta di script di produzione

Se abbiamo uno script di sviluppo che imposta l'ambiente di node allo sviluppo, abbiamo uno script prod che lo imposta su "production". Usiamo questa configurazione durante la distribuzione. (Heroku, AWS, DigitalOcean, ecc.) Ora stiamo aggiungendo lo script start e lo script prod nel nostro 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"
}

Impostiamo lo script start predefinito su prod perché lo script di avvio viene utilizzato sempre dalle piattaforme di distribuzione come AWS o Heroku per avviare un server.

Prova uno dei due eseguendo npm start o 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"
}

Che ne dici di riavviare automaticamente il server ogni volta che un file cambia?

Uno script finale, per completare la nostra configurazione di sviluppo. È necessario aggiungere uno script di controllo file che esegua un comando ogni volta che viene apportata una modifica a un file. Aggiungi un oggetto JSON denominato "nodemonConfig" nel tuo package.json. Qui è dove memorizziamo ciò che diciamo di fare al watcher quando un file cambia.

Inoltre, aggiungi uno script chiamato watch:dev nel tuo package.json

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

La configurazione di Nodemon contiene le impostazioni relative a

Quale comando eseguire ogni volta che un file cambia, nel nostro caso npm run dev
Quali cartelle e file guardare
E quali file ignorare

Maggiori informazioni sulla configurazione di nodemon qui .

Ora che abbiamo il nostro controllore di file, puoi semplicemente eseguire npm run watch:dev, codificare e salvare il tuo file e ogni volta che vai su localhost:3000, vedrai le modifiche. Provalo!

Bonus: aggiungi test!

Per aggiungere i test al nostro progetto, installa semplicemente Jest da npm, aggiungi alcune configurazioni e aggiungi uno script chiamato test nel nostro package.json

npm i -D jest

Aggiungi un oggetto chiamato "jest" e uno script di test nel tuo package.json

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

Provalo, crea un file sample.test.js, scrivi eventuali test ed esegui lo script!

npm run test

immagine-2 — Schermata di esempio dell'esecuzione del test di esecuzione di npm.

Riassunto

Di seguito sono riportati i passaggi semplificati su come abilitare ES6 in Node.js. Includerò anche il repository in modo da poter copiare e controllare l'intero codice.

Crea un nuovo progetto usando il comando express your-project-name nel terminale.
Sposta bin/, routes/ e app in una nuova cartella denominata src/ e converti il codice in ES6. Inoltre, non dimenticare di rinominare bin/www in www.js
Installa tutte le dipendenze e devDependencies

npm i npm-run-all @babel/cli @babel/core @babel/preset-env nodemon rimraf --save
npm i -D jest

Aggiungi questi script al tuo 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" 
}

Inserisci le configurazioni per babel, nodemon e jest nel tuo package.json

"nodemonConfig": {
  "exec": "npm run dev",
  "watch": [ "server/*", "public/*" ],
  "ignore": [ "**/__tests__/**", "*.test.js", "*.spec.js" ] 
}, 
"babel": { 
  "presets": [ "@babel/preset-env" ]
},
"jest": {
  "testEnvironment": "node"
},

Testa i tuoi script eseguendonpm run your-script-here
Vedrai il repository completo sul mio github

Note e disclaimer

Nota che questa configurazione potrebbe non essere l'ideale per tutte le situazioni, specialmente per i grandi progetti (come 1k file di codice). Il transpiling e la fase di eliminazione potrebbero rallentare l'ambiente di sviluppo. Inoltre, i moduli ES stanno quasi arrivando a Node. Tuttavia, questo è un buon materiale didattico per capire come il transipiling funziona dietro le quinte come quando stiamo sviluppando app front-end :)

Conclusione

Tutto ok! Spero che tu abbia imparato molto. Grazie per aver letto fino a questo punto.

Buona codifica!

Controlla il repository completo qui.

Questo articolo è pubblicato nelle notizie di freeCodecamp.

? Twitter - ? freeCodeCamp - ? Portfolio - ⚛️ Github