Introduzione

In Node.js, un modulo è una raccolta di funzioni e oggetti JavaScript che possono essere utilizzati da applicazioni esterne. Qualsiasi file Node.js o raccolta di file può essere considerato un modulo se le sue funzioni e i suoi dati sono resi utilizzabili da programmi esterni.

Essere in grado di scrivere moduli che esportano utili funzioni e dati ti consentirà di contribuire alla comunità di Node.js, infatti tutti i pacchetti che usi su npm sono stati raggruppati e condivisi come moduli. Ciò rende la creazione di moduli un'abilità essenziale per uno sviluppatore Node.js.

In questo tutorial, creerai un modulo Node.js che suggerisce quale colore gli sviluppatori web dovrebbero usare nei loro progetti. Svilupperai il modulo memorizzando i colori come un array e fornendo una funzione per recuperarne uno in modo casuale. Successivamente, verranno eseguiti vari modi per importare un modulo in un'applicazione Node.js.

Prerequisiti

Avrai bisogno di Node.js e NPM installati nel tuo ambiente di sviluppo, segui uno dei seguenti tutorial in base al sistema operativo in uso:

Passaggio 1: Creare un modulo

Questo passaggio ti guiderà attraverso la creazione del tuo primo modulo Node.js. Il modulo conterrà una raccolta di colori in un array e fornirà una funzione per ottenerne uno a caso. Utilizzerai la proprietà exports integrata in Node.js per rendere la funzione e l'array disponibili per i programmi esterni.

Innanzitutto, inizierai decidendo quali dati sui colori verranno memorizzati nel modulo. Ogni colore sarà un oggetto che contiene una proprietà name che si può facilmente identificare e una proprietà code che è una stringa contenente un codice colore HTML. I codici colore HTML sono numeri esadecimali a sei cifre che consentono di modificare il colore degli elementi in una pagina Web. Puoi saperne di più sui codici colore HTML leggendo questo articolo Codici colore e nomi HTML.

Deciderai quindi quali colori vuoi supportare nel tuo modulo. Il tuo modulo conterrà un array chiamato allColors che conterrà sei colori. Il modulo includerà anche una funzione chiamata getRandomColor() che selezionerà casualmente un colore dall'array e lo restituirà.

Nel tuo terminale, crea una nuova cartella chiamata colors e spostati in essa:

mkdir colors
cd colors

Inizializza npm in modo che altri programmi possano importare questo modulo più avanti nel tutorial:

npm init -y 

Hai usato il flag -y per saltare le solite istruzioni per personalizzare il tuo package.json. Se si tratta di un modulo che si desidera pubblicare su npm, si deve rispondere a tutte queste istruzioni con i dati pertinenti.

In questo caso, l'output sarà:

{
  "name": "colors",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Ora, apri un editor di testo da riga di comando come nano e crea un nuovo file da utilizzare come punto di ingresso per il tuo modulo:

nano index.js

Innanzitutto, definisci una classe Color. La tua classe Color verrà istanziata con il suo nome e codice HTML. Aggiungi le seguenti righe per creare la classe:

class Color {
  constructor(name, code) {
    this.name = name;
    this.code = code;
  }
}

Ora che hai la tua struttura dati per Color, aggiungi alcune istanze nel tuo modulo. Scrivi il seguente array evidenziato nel tuo file:


class Color {
  constructor(name, code) {
    this.name = name;
    this.code = code;
  }
}

const allColors = [
  new Color('brightred', '#E74C3C'),
  new Color('soothingpurple', '#9B59B6'),
  new Color('skyblue', '#5DADE2'),
  new Color('leafygreen', '#48C9B0'),
  new Color('sunkissedyellow', '#F4D03F'),
  new Color('groovygray', '#D7DBDD'),
];

Infine, inserisci una funzione che seleziona casualmente un elemento dall'array allColors appena creato:


class Color {
  constructor(name, code) {
    this.name = name;
    this.code = code;
  }
}

const allColors = [
  new Color('brightred', '#E74C3C'),
  new Color('soothingpurple', '#9B59B6'),
  new Color('skyblue', '#5DADE2'),
  new Color('leafygreen', '#48C9B0'),
  new Color('sunkissedyellow', '#F4D03F'),
  new Color('groovygray', '#D7DBDD'),
];

exports.getRandomColor = () => {
  return allColors[Math.floor(Math.random() * allColors.length)];
}

exports.allColors = allColors;

La parola chiave exports fa riferimento a un oggetto globale disponibile in ogni modulo Node.js. Tutte le funzioni e gli oggetti memorizzati nell'oggetto exports di un modulo sono esposti quando altri moduli Node.js lo importano. La funzione getRandomColor() è stata creata direttamente sull'oggetto exports. È stata quindi aggiunta una proprietà allColors all'oggetto exports che fa riferimento all'array allColors di costante locale creato in precedenza nello script.

Quando altri moduli importano questo modulo, allColors e getRandomColor() saranno esposti e disponibili per l'uso.

Salva ed esci dal file.

Finora, hai creato un modulo che contiene un array di colori e una funzione che restituisce uno a caso. Hai anche esportato l'array e la funzione, in modo che i programmi esterni possano utilizzarli. Nel passaggio successivo, utilizzerai il tuo modulo in altre applicazioni per dimostrare gli effetti di export.

Passaggio 2: Testare il modulo con REPL

Prima di creare un'applicazione completa, prenditi un momento per confermare che il tuo modulo funziona. In questo passaggio, verrà utilizzato REPL per caricare il modulo colors. Mentre ci si trova in REPL, si chiamerà la funzione getRandomColor() per vedere se si comporta come previsto.

Avviare il REPL Node.js nella stessa cartella del file index.js:

node

Quando la REPL è stata avviata, verrà visualizzato il messaggio >. Ciò significa che puoi inserire il codice JavaScript che verrà immediatamente valutato.

Innanzitutto, immettere quanto segue:

colors = require('./index');

In questo comando, require() carica il modulo colors nel suo punto di ingresso. Quando premi ENTER, otterrai il seguente output:

{
  getRandomColor: [Function],
  allColors: [
    Color { name: 'brightred', code: '#E74C3C' },
    Color { name: 'soothingpurple', code: '#9B59B6' },
    Color { name: 'skyblue', code: '#5DADE2' },
    Color { name: 'leafygreen', code: '#48C9B0' },
    Color { name: 'sunkissedyellow', code: '#F4D03F' },
    Color { name: 'groovygray', code: '#D7DBDD' }
  ]
}

Il REPL ci mostra il valore di colors, che sono tutte le funzioni e gli oggetti importati dal file index.js. Quando si utilizza la parola chiave require, Node.js restituisce tutto il contenuto all'interno dell'oggetto exports di un modulo.

Ricorda che hai aggiunto getRandomColor() e allColors a exports nel modulo colors. Per tale motivo, vengono visualizzati entrambi nel REPL quando vengono importati.

Testare la funzione getRandomColor():

colors.getRandomColor();

Ti verrà mostrato un colore casuale:

Color { name: 'groovygray', code: '#D7DBDD' }

Poiché l'indice è casuale, l'output può variare. Ora che hai confermato che il modulo colors funziona, esci dal REPL di Node.js:

.exit

Questo ti riporterà alla riga di comando del tuo terminale.

Hai appena confermato che il tuo modulo funziona come previsto utilizzando REPL. Successivamente, applicherai questi stessi concetti e caricherai il tuo modulo in un'applicazione, come faresti in un progetto reale.

Passaggio 3: Salvare il modulo locale come dipendenza

Durante il test del modulo in REPL, è stato importato con un percorso relativo. Questo significa che hai usato la posizione del file index.js in relazione alla directory di lavoro per ottenere il suo contenuto. Di solito conviene importare i moduli con i loro nomi in modo che l'importazione non venga interrotta quando si cambia il contesto. In questo passaggio, installerai il modulo colors con la funzione del modulo locale di npm install.

Configurare un nuovo modulo Node.js all'esterno della cartella colors. Innanzitutto, vai alla directory precedente e crea una nuova cartella:

cd ..
mkdir really-large-application

Adesso passa al tuo nuovo progetto:

cd really-large-application

Come con il modulo colors, inizializza la tua cartella con npm:

npm init -y 

Di seguito verrà generato package.json:

{
  "name": "really-large-application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Ora installa il tuo modulo colors e usa il flag --save in modo che sia registrato nel tuo file package.json:

npm install --save ../colors

Hai appena installato il tuo modulo colors nel nuovo progetto. Apri il file package.json per vedere la nuova dipendenza locale:

nano package.json

Scoprirai che sono state aggiunte le seguenti linee evidenziate:


{
  "name": "really-large-application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "colors": "file:../colors"
  }
}


Esci dal file.

Il modulo colors è stato copiato nella tua directory node_modules. Verifica che sia lì con il seguente comando:

ls node_modules

Questo darà il seguente output:

colors

Utilizzare il modulo locale installato in questo nuovo programma. Riapri il tuo editor di testo e crea un altro file JavaScript:

nano index.js

Il tuo programma importerà prima il modulo colors. Sceglierà quindi un colore a caso usando la funzione getRandomColor() fornita dal modulo. Infine, stamperà un messaggio sulla console che indica all'utente quale colore usare.

Inserisci il seguente codice in index.js:

const colors = require('colors');

const chosenColor = colors.getRandomColor();
console.log(`You should use ${chosenColor.name} on your website. It's HTML code is ${chosenColor.code}`);

Salva ed esci dal file.

La tua applicazione ora dirà all'utente un'opzione di colore casuale per un componente del sito web.

Esegui questo script con:

node index.js

Il tuo output sarà simile a:

You should use leafygreen on your website. It's HTML code is #48C9B0

Ora hai installato con successo il modulo colors e puoi gestirlo come qualsiasi altro pacchetto npm utilizzato nel tuo progetto. Tuttavia, se hai aggiunto più colori e funzioni al tuo modulo colors locale, dovresti eseguire npm update nelle tue applicazioni per poter utilizzare le nuove opzioni. Nel passaggio successivo, utilizzerai il modulo locale colors in un altro modo e otterrai aggiornamenti automatici quando il codice del modulo cambia.

Passaggio 4: Collegare un modulo locale

Se il tuo modulo locale è in forte sviluppo, l'aggiornamento continuo dei pacchetti può essere noioso. Un'alternativa sarebbe quella di collegare i moduli. Il collegamento di un modulo garantisce che eventuali aggiornamenti al modulo si riflettano immediatamente nelle applicazioni che lo utilizzano.

In questo passaggio, collegherai il modulo colors alla tua applicazione. Modificherai anche il modulo colors e confermerai che le sue modifiche più recenti funzionano nell'applicazione senza dover reinstallare o aggiornare.

Innanzitutto, disinstalla il modulo locale:

npm un colors

npm collega i moduli utilizzando collegamenti simbolici (o symlink), che sono riferimenti che puntano a file o directory nel computer. Il collegamento di un modulo avviene in due passaggi:

  1. Creazione di un collegamento globale al modulo. npm crea un collegamento simbolico tra la tua directory globale node_modules e la directory del tuo modulo. La directory globale node_modules è la posizione in cui sono installati tutti i pacchetti npm a livello di sistema (qualsiasi pacchetto installato con il flag -g).
  2. Crea un collegamento locale. npm crea un collegamento simbolico tra il progetto locale che utilizza il modulo e il collegamento globale del modulo.

Innanzitutto, crea il collegamento globale tornando alla cartella colors e usando il comando link:

cd ../colors
sudo npm link

Una volta completato, la tua shell produrrà:

/usr/local/lib/node_modules/colors -> /home/sammy/colors

Hai appena creato un collegamento simbolico nella tua cartella node_modules nella tua directory colors.

Ritorna alla cartella really-large-application e collega il pacchetto:

cd ../really-large-application
sudo npm link colors

Riceverai un output simile al seguente:

/home/sammy/really-large-application/node_modules/colors -> /usr/local/lib/node_modules/colors -> /home/sammy/colors
Nota : è possibile utilizzare ln invece di link. Ad esempio, npm ln colors avrebbe funzionato esattamente allo stesso modo.

Come mostra l'output, hai appena creato un collegamento simbolico da really-large-application nella directory locale node_modules al collegamento simbolico colors nel tuo globale node_modules, che punta alla directory effettiva con il modulo colors.

Il processo di collegamento è completo. Esegui il tuo file per assicurarti che funzioni ancora:

node index.js

Il tuo output sarà simile a:

You should use sunkissedyellow on your website. It's HTML code is #F4D03F

La funzionalità del programma è intatta. Successivamente, verifica che gli aggiornamenti vengano applicati immediatamente. Nel tuo editor di testo, riapri il file index.js nel modulo colors:

cd ../colors
nano index.js

Ora aggiungi una funzione che seleziona la migliore tonalità di blu esistente. Non accetta argomenti e restituisce sempre il terzo elemento dell'array allColors. Aggiungi queste righe alla fine del file:


class Color {
  constructor(name, code) {
    this.name = name;
    this.code = code;
  }
}

const allColors = [
  new Color('brightred', '#E74C3C'),
  new Color('soothingpurple', '#9B59B6'),
  new Color('skyblue', '#5DADE2'),
  new Color('leafygreen', '#48C9B0'),
  new Color('sunkissedyellow', '#F4D03F'),
  new Color('groovygray', '#D7DBDD'),
];

exports.getRandomColor = () => {
        return allColors[Math.floor(Math.random() * allColors.length)];
        }

exports.allColors = allColors;

exports.getBlue = () => {
  return allColors[2];
}


Salva ed usci dal file, quindi riapri il file index.js nella cartella really-large-application:

cd ../really-large-application
nano index.js

Effettua una chiamata alla funzione getBlue() appena creata e stampa una frase con le proprietà del colore. Aggiungi queste istruzioni alla fine del file:


const colors = require('colors');

const chosenColor = colors.getRandomColor();
console.log(`You should use ${chosenColor.name} on your website. It's HTML code is ${chosenColor.code}`);

const favoriteColor = colors.getBlue();
console.log(`My favorite color is ${favoriteColor.name}/${favoriteColor.code}, btw`);

Salva ed esci dal file.

Il codice ora utilizza la nuova funzione di creazione getBlue(). Eseguire il file come prima:

node index.js

Otterrai un output come:

You should use brightred on your website. It's HTML code is #E74C3C
My favorite color is skyblue/#5DADE2, btw

Il tuo script è stato in grado di utilizzare l'ultima funzione nel tuo modulo colors, senza dover eseguire npm update. Ciò renderà più semplice apportare modifiche a questa applicazione in fase di sviluppo.

Mentre scrivi applicazioni più grandi e complesse, pensa a come raggruppare il codice correlato in moduli e come desideri che questi moduli vengano impostati. Se il tuo modulo verrà utilizzato da un solo programma, può rimanere all'interno dello stesso progetto ed essere referenziato da un percorso relativo. Se il modulo verrà successivamente condiviso separatamente o esiste in una posizione molto diversa dal progetto su cui stai lavorando ora, l'installazione o il collegamento potrebbero essere più praticabili. I moduli in sviluppo attivo beneficiano anche degli aggiornamenti automatici del collegamento. Se il modulo non è in fase di sviluppo attivo, l'utilizzo di npm install potrebbe essere l'opzione più semplice.

Conclusione

In questo tutorial hai appreso che un modulo Node.js è un file JavaScript con funzioni e oggetti che possono essere utilizzati da altri programmi. È stato quindi creato un modulo e collegato le funzioni e gli oggetti all'oggetto globale exports per renderli disponibili a programmi esterni. Infine, hai importato quel modulo in un programma, dimostrando come i moduli si uniscono in applicazioni più grandi.