Introduzione agli script NPM

Gli script NPM sono tra le mie funzionalità preferite di NPM. Sono semplici. Riducono la necessità di strumenti. Quindi riducono il numero di file di configurazione e altre cose di cui devi tenere traccia. E sono molto versatili. Ti consentono anche di automatizzare molte attività comuni. alcuni dei quali sono elencati verso la fine dell'articolo.

Senza ulteriori indugi, tuffiamoci negli script NPM!

Cosa sono gli script NPM?

Gli script NPM sono, beh, script. Utilizziamo gli script per automatizzare le attività ripetitive. Ad esempio, costruendo il tuo progetto, minimizzando i file CSS (CSS) e JavaScript (JS). Gli script vengono anche utilizzati per eliminare file e cartelle temporanei, ecc. Esistono molti modi per farlo: puoi scrivere script bash / batch o usare un task runner come Gulp o Grunt. Tuttavia, molte persone passano agli script NPM per la loro semplicità e versatilità. Offrono anche la possibilità di avere meno strumenti per apprendere, usare e tenere traccia di.

Ora che abbiamo (qualche) idea di cosa sono gli script NPM e cosa possono fare per noi, andiamo avanti e scriviamo alcuni!

L'oggetto script in package.json

Gran parte del nostro lavoro avverrà nel file package.json che NPM utilizza come manifest di sorta. Questo è il file che viene creato quando si esegue npm init.

Ecco un esempio di file package.json:

{
    "name": "pacchetto super-cool",
    "versione": "1.0.0",
    "script": {
        ...
    },
    "dipendenze": {
        ...
    }
    "devDependencies": {
        ...
    }
}

Se hai lavorato con NodeJS e NPM, avrai familiarità con il file package.json. Notare l'oggetto script nel file. Questo è dove andranno i nostri script NPM. Gli script NPM sono scritti come al solito coppie chiave-valore JSON in cui la chiave è il nome dello script e il valore contiene lo script che si desidera eseguire.

Ecco forse lo script NPM più popolare (ed è anche un tipo speciale di script):

"script": {
    "start": "node index.js",
    ...
}

Probabilmente lo hai visto un sacco di volte nei tuoi file package.json. E probabilmente sai che puoi digitare npm start per eseguire lo script. Ma questo esempio illustra il primo aspetto importante degli script NPM: sono semplicemente comandi terminali. Funzionano nella shell del sistema operativo su cui vengono eseguiti. Quindi potrebbe essere bash per Linux e cmd.exe per Windows.

A questo punto, potresti non essere impressionato. Ma continua a leggere per vedere quanto sono potenti gli script NPM.

Script personalizzati

Lo script che abbiamo appena visto è uno degli script "speciali" di NPM. Puoi eseguirlo semplicemente digitando npm start. Questi sono script con nomi a cui NPM riconosce e attribuisce un significato speciale. Ad esempio, puoi scrivere uno script chiamato prepublish. NPM eseguirà lo script prima che il pacchetto sia compresso e pubblicato e anche quando si esegue npm install localmente senza alcun argomento. Maggiori informazioni su tali script qui.

Ma NPM ti consente anche di definire i tuoi script personalizzati. È qui che la potenza degli script NPM inizia a mostrarsi.

Diamo un'occhiata a uno script NPM personalizzato super basico che genera "ciao mondo" sulla console. Aggiungi questo all'oggetto script del tuo file package.json:

"say-hello": "echo 'Hello World'"

L'oggetto script nel file package.json dovrebbe apparire così:

...
"script": {
    "start": "node index.js",
    "say-hello": "echo 'Hello World!'"
}

Ora prova a eseguire npm say-hello. Non funziona? Questo perché gli script NPM personalizzati devono essere preceduti da run-script o eseguirli affinché vengano eseguiti correttamente. Prova a eseguire npm run-script say-hello o npm run say-hello. La console dice "Hello World!"! Abbiamo scritto il nostro primo script NPM!

Ecco un breve suggerimento: per evitare che i registri NPM predefiniti vengano inviati alla console quando si esegue uno script, aggiungere il flag --silent. Ecco come sarebbe il tuo comando:

npm run - silenzioso saluta

Chiamata di script NPM all'interno di altri script NPM

Un aspetto negativo dell'utilizzo degli script NPM si presenta quando lo script è abbastanza complesso (e lungo). Questo problema è aggravato dal fatto che le specifiche JSON non supportano i commenti. Ci sono alcuni modi per aggirare questo problema. Un modo è quello di dividere lo script in piccoli script monouso e quindi chiamarli all'interno di altri script NPM. Il modo di chiamare uno script NPM all'interno di un altro è semplice. Modifica il tuo oggetto script in modo che assomigli a questo:

"script": {
    "say-hello": "echo 'Hello World'",
    "awesome-npm": "npm corri saluta && echo 'echo NPM è fantastico!'"
}

Poiché gli script NPM vengono eseguiti nella shell, chiamare npm run say-hello in un altro script NPM è quasi intuitivo.

Per quelli di voi che non si sentono a proprio agio con i comandi del terminale, il simbolo && nello script viene utilizzato per delimitare due comandi. Pertanto, il secondo comando viene eseguito dopo l'esecuzione corretta del primo comando.

Ora quando esegui npm esegui awesome-npm, lo script say-hello viene eseguito per primo, generando "Hello World" sulla console, seguito dalla parte dello script dopo &&, che genera "NPM è fantastico!"

Ecco un caso d'uso in cui questo potrebbe essere utile. Supponiamo che tu stia automatizzando il processo di compilazione della tua applicazione. Supponiamo che tu stia utilizzando Webpack come un bundler e il tuo codice di distribuzione vada in una directory chiamata "dist".

Potresti iniziare con la pulizia della directory. Questo può essere fatto sia cancellando il suo contenuto o eliminando la directory stessa e poi facendolo di nuovo. Andiamo con quest'ultimo approccio. Il tuo comando potrebbe assomigliare a questo:

rm -r dist && mkdir dist
Nota che questo usa i comandi bash. Imparerai come scrivere script NPM multipiattaforma più avanti in questo articolo.

Successivamente, è possibile richiamare il bundler eseguendo il comando webpack.

È possibile eseguire questi comandi in successione utilizzando l'operatore &&. Tuttavia, per motivi di dimostrazione e modularità, dividiamolo in due script NPM che si chiamano l'un l'altro.

Ecco come sarebbe l'oggetto script in questo caso d'uso:

"script": {
    ...
    "clean": "rm -r dist && mkdir dist",
    "build": "npm run clean && webpack"
}

Ecco qua! Come dividere un'attività più complessa in script NPM più piccoli.

Chiamare script di shell e nodi

A volte, potresti dover scrivere script molto più complessi di quelli che si possono ottenere in 2-3 comandi. Quando si presenta questa situazione, una soluzione è quella di scrivere script bash o JS (o script in qualsiasi linguaggio di script che ti piace) e chiamarli da script NPM.

Scriviamo rapidamente uno script bash che ti saluta. Crea un file chiamato hello.sh nella directory principale e incolla questo codice in esso:

#! / usr / bin / env bash
# nomefile: hello.sh
echo "Come ti chiami?"
leggi il nome
echo "Ciao a tutti, $ name!"

È una semplice sceneggiatura che fa eco al tuo nome. Ora modifica il file package.json in modo che l'oggetto script abbia questa riga di codice:

"bash-hello": "bash hello.sh"

Ora, quando corri npm corri bash-ciao, ti chiede il tuo nome e poi ti saluta! Brillante.

Puoi fare la stessa cosa con gli script JS eseguiti usando il nodo. Un vantaggio di questo approccio è che questo script sarà indipendente dalla piattaforma poiché utilizza il nodo per l'esecuzione. Ecco uno script JS leggermente più complesso per aggiungere due numeri interi ricevuti come argomenti della riga di comando (inseriscilo in un file chiamato add.js):

// add.js
// aggiunge due numeri interi ricevuti come argomenti della riga di comando
funzione add (a, b) {
    return parseInt (a) + parseInt (b);
}
if (! process.argv [2] ||! process.argv [3]) {
    console.log ('Numero insufficiente di argomenti! Dai due numeri per favore!');
}
altro {
    console.log ('La somma di', process.argv [2], 'e', ​​process.argv [3], 'is', add (process.argv [2], process.argv [3]));
}
L'oggetto process.argv contiene gli argomenti della riga di comando forniti allo script. I primi due elementi, process.argv [0] e process.argv [1], sono riservati per nodo. Pertanto process.argv [2] e process.argv [3] consentono di accedere agli argomenti della riga di comando.

Ora aggiungi questa riga all'oggetto script del file package.json:

"js-add": "node add.js"

Infine, esegui lo script come uno script npm assegnandogli due numeri come argomenti della riga di comando:

npm esegui js-add 2 3

E viola! L'output è

La somma di 2 e 3 è 5

Brillante! Ora siamo in grado di scrivere script molto più potenti e di sfruttare il potere di altri linguaggi di scripting.

Ganci pre e post

Ricordi come abbiamo parlato di uno speciale script npm chiamato prepublish che viene eseguito prima di pubblicare il tuo pacchetto? Tale funzionalità può essere raggiunta anche con script personalizzati. Abbiamo discusso di un modo per farlo nella sezione precedente. Possiamo concatenare i comandi usando l'operatore &&, quindi se vuoi eseguire script-1 prima di script-2, dovresti scrivere:

"script-2": "npm run script-1 && echo 'I am script-2'"

Tuttavia, questo rende i nostri script un po 'sporchi. Questo perché la funzionalità principale dello script si riflette solo nella seconda parte del comando (dopo &&). Un modo per scrivere script puliti è utilizzare gli hook pre e post.

Gli hook pre e post sono esattamente come sembrano: ti permettono di eseguire script prima e dopo aver chiamato un determinato script. Tutto quello che devi fare è definire nuovi script con lo stesso nome del tuo script principale. Tuttavia, questi sono preceduti da "pre" o "post" a seconda che lo script sia eseguito prima dello script principale o dopo di esso.

Diamo un'occhiata al nostro script di saluto. Diciamo che vogliamo eseguire il comando echo 'Corro prima di dire-ciao' prima di dire-ciao ed eco 'Corro dopo dire-ciao' dopo dire-ciao. Ecco come sarebbe il tuo oggetto script:

"script": {
    "say-hello": "echo 'Hello World'",
    "presay-hello": "echo 'corro prima di dire-hello'",
    "postsay-hello": "echo 'Corro dopo say-hello'"
}

Il "pre" e il "post" prima dei nomi degli script indicano a npm di eseguirli rispettivamente prima e dopo lo script chiamato say-hello.

Ora, quando esegui npm, esegui say-hello, l'output di tutti e tre gli script viene visualizzato in ordine! Quant'è fico?

Poiché tutti e tre gli script di output sulla console e i registri NPM ingombrano l'output, preferisco usare il flag -silent mentre li eseguo. Quindi il tuo comando sarebbe simile al seguente:

npm run - silenzioso saluta

Ed ecco l'output:

Corro prima di salutare
Ciao mondo
Corro a salutare

Ecco qua!

Applichiamo questa conoscenza al nostro esempio di script di build. Modifica il tuo file package.json in modo che assomigli a questo:

"script": {
    ...
    "clean": "rm -r dist && mkdir dist",
    "prebuild": "npm run clean"
    "build": "webpack"
}

Ora i nostri script sembrano molto più puliti. Quando esegui npm run build, prebuild è chiamato a causa del hook "pre", che chiama clean, che pulisce la nostra directory dist per noi. Dolce!

Rendere i nostri script multipiattaforma

C'è un inconveniente di scrivere comandi terminal / shell nei nostri script. Questo è il fatto che i comandi della shell rendono la nostra piattaforma di script in modo dipendente. Questo è forse ciò che attira la nostra attenzione su strumenti come Gulp e Grunt. Se il tuo script è scritto per sistemi Unix, è probabile che non funzionerà su Windows e viceversa.

La prima volta che ho usato gli script NPM, che chiamavano altri script bash / batch, ho pensato di scrivere due script per attività. Uno per Unix e uno per la riga di comando di Windows. Questo approccio può funzionare nei casi d'uso in cui gli script non sono così complessi e non ci sono molti script. Tuttavia, diventa subito chiaro che non sono una buona soluzione al problema. Alcuni dei motivi alla base di questo sono:

  • Hai un'altra cosa da tenere traccia di ciò che ti distrae dal tuo compito principale di lavorare sull'applicazione. Invece, finisci per lavorare nell'ambiente di sviluppo.
  • Stai scrivendo codice ridondante: gli script che scrivi sono molto simili e svolgono la stessa attività. Stai essenzialmente riscrivendo il codice. Ciò viola uno dei principi fondamentali della codifica: DRY: non ripetere te stesso.

Quindi, come possiamo aggirare questo? Esistono tre approcci che è possibile utilizzare:

  1. Usa comandi che eseguono multipiattaforma: molti comandi utili sono comuni a Unix e Windows. Se i tuoi script sono semplici, considera di usarli.
  2. Usa pacchetti di nodi: puoi usare pacchetti di nodi come rimraf o cross-env invece dei comandi shell. E ovviamente, puoi usare questi pacchetti nei file JS se lo script è grande e complesso.
  3. Usa ShellJS: ShellJS è un pacchetto npm che esegue i comandi Unix tramite Node. Quindi questo ti dà il potere di eseguire i comandi Unix su tutte le piattaforme, incluso Windows.
Gli approcci di cui sopra sono stati presi da questo brillante articolo di Cory House sul perché ha lasciato Grunt e Gulp per gli script NPM. L'articolo descrive molte cose non trattate in questa serie e si conclude con un elenco di risorse eccellenti. Consiglio vivamente di leggerlo per comprendere meglio gli script NPM.

Pochi casi d'uso per gli script NPM

Infine, c'è molto che puoi fare con gli script NPM. Alcuni casi d'uso sono:

  • Minificazione / Uglificazione di CSS / JavaScript
  • Automatizzare il processo di compilazione
  • Linting your code
  • Compressione delle immagini
  • Iniettando automaticamente le modifiche con BrowserSync

E molto di più. Per informazioni su come automatizzare le attività sopra menzionate utilizzando gli script NPM, dai un'occhiata a questo brillante articolo sull'argomento.

Bonus: comandante per la creazione di applicazioni CLI utilizzando NodeJS

Mentre discutiamo degli script NPM e della CLI, vorrei parlarvi rapidamente di un pacchetto davvero interessante chiamato comandante. Commander ti consente di creare le tue applicazioni CLI. Questo non è in realtà correlato agli script NPM, ma è una tecnologia interessante da sapere. Dai un'occhiata ai documenti del comandante qui o prova uno di questi tutorial:

  • Crea un'applicazione a riga di comando interattiva con Node.js - Scotch.io
  • Scrittura di applicazioni da riga di comando in NodeJS - freeCodeCamp

Parole conclusive

Questo è tutto per questo articolo sull'uso degli script NPM. Spero che tu abbia acquisito alcune informazioni su come puoi integrarli nei tuoi progetti. Questo articolo non è affatto un tutorial approfondito sugli script NPM. Quindi ti consiglio di imparare ulteriormente sia da altre risorse sia dall'uso effettivo degli script NPM nei tuoi progetti.

Inoltre, connettiti con me su GitHub e LinkedIn.

Buona programmazione! :)

Aggiornamento (17 agosto 2019): mi sono appena unito a Twitter per entrare in contatto con voi ragazzi meglio, e sono più coinvolto nel mondo dell'apprendimento (e dell'insegnamento) della tecnologia (e non tecnologica). Il mio profilo Twitter è praticamente vuoto al momento, ma resta sintonizzato per le cose buone da seguire! Ecco il link del profilo!