Introduktion til NPM-scripts

NPM-scripts er blandt mine foretrukne funktioner i NPM. De er enkle. De reducerer behovet for værktøjer. Derfor reducerer de antallet af konfigurationsfiler og andre ting, du har brug for at holde styr på. Og de er meget alsidige. De giver dig også mulighed for at automatisere mange almindelige opgaver. hvoraf nogle er anført mod slutningen af ​​artiklen.

Uden yderligere ado, lad os dykke ned i NPM-scripts!

Hvad er NPM-scripts?

NPM-scripts er, ja, scripts. Vi bruger scripts til at automatisere gentagne opgaver. For eksempel at opbygge dit projekt, minimere Cascading Style Sheets (CSS) og JavaScript (JS) filer. Scripts bruges også til at slette midlertidige filer og mapper osv. Der er mange måder at trække dette af - du kan skrive bash / batch-scripts eller bruge en task runner som Gulp eller Grunt. Imidlertid flytter mange mennesker til NPM-scripts for deres enkelhed og alsidighed. De giver også mulighed for at have færre værktøjer til at lære, bruge og holde styr på.

Nu hvor vi har (en) ide om, hvad NPM-scripts er, og hvad de kan gøre for os, lad os gå videre og skrive nogle!

Scripts-objektet i package.json

Det meste af vores arbejde vil ske i den package.json-fil, som NPM bruger som et manifest af slags. Dette er den fil, der oprettes, når du kørernpm init.

Her er en prøvepakke.json-fil:

{ "name": "super-cool-package", "version": "1.0.0", "scripts": { ... }, "dependencies": { ... } "devDependencies": { ... } }

Hvis du har arbejdet med NodeJS og NPM, vil du være bekendt med filen package.json. Bemærk scriptsobjektet i filen. Det er her vores NPM-scripts vil gå. NPM-scripts skrives som sædvanlige JSON-nøgleværdipar, hvor nøglen er navnet på scriptet, og værdien indeholder det script, du vil udføre.

Her er måske det mest populære NPM-script (og det er også en særlig slags script):

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

Du har sikkert set dette mange gange i dine package.json-filer. Og du ved sikkert, at du kan skrive for npm startat udføre scriptet. Men dette eksempel illustrerer det første vigtige aspekt af NPM-scripts - de er simpelthen terminalkommandoer. De kører i skallen på det operativsystem, som de udføres på. Så det kan være bash for Linux og cmd.exe for Windows.

På dette tidspunkt er du måske ikke imponeret. Men fortsæt med at læse for at se, hvor stærke NPM-scripts virkelig er.

Brugerdefinerede scripts

Scriptet, vi lige har set, er et af de "specielle" NPM-scripts. Du kan udføre det ved blot at skrive npm start. Dette er scripts med navne, som NPM genkender og tillægger særlig betydning. For eksempel kan du skrive et script kaldet prepublish. NPM udfører scriptet, før din pakke pakkes og offentliggøres, og også når du kører npm installlokalt uden nogen argumenter. Mere om sådanne scripts her.

Men NPM lad os også definere dine egne brugerdefinerede scripts. Det er her, hvor kraften i NPM-scripts begynder at vise sig.

Lad os se på et super grundlæggende brugerdefineret NPM-script, der sender "hej verden" til konsollen. Føj dette til scriptsobjektet i din package.json-fil:

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

Scripts-objektet i din package.json-fil skal se sådan ud:

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

Prøv nu at løbe npm say-hello. Fungerer ikke? Dette skyldes, at brugerdefinerede NPM-scripts skal forud for en af run-scripteller runfor at de skal udføres korrekt. Prøv at løbe npm run-script say-helloeller npm run say-hello. Konsollen siger "Hello World!"! Vi har skrevet vores første NPM-script!

Her er et hurtigt tip - for at forhindre, at standard NPM-logfiler udsendes til konsollen, når du udfører et script, skal du tilføje --silentflag. Sådan ser din kommando ud:

npm run --silent say-hello

Opkald til NPM-scripts inden for andre NPM-scripts

En ulempe ved at bruge NPM-scripts vises, når dit script er ret komplekst (og langt). Dette problem forstærkes af det faktum, at JSON-specifikationen ikke understøtter kommentarer. Der er et par måder omkring dette problem. En måde er at opdele dit script i små single-purpose-scripts og derefter kalde dem inden for andre NPM-scripts. Måden at kalde et NPM-script inden for et andet er ligetil. Rediger dit scriptsobjekt, så det ser sådan ud:

"scripts": { "say-hello": "echo 'Hello World'", "awesome-npm": "npm run say-hello && echo 'echo NPM is awesome!'"}

Da NPM-scripts udføres i skallen, er opkald npm run say-helloinden for et andet NPM-script næsten intuitivt.

For dem af jer, der ikke er særlig fortrolige med terminalkommandoer, bruges &&i scriptet til at afgrænse to kommandoer. Den anden kommando udføres således efter den vellykkede udførelse af den første kommando.

Når du kører nu, udføres npm run awesome-npmsay-hallo-scriptet først og udskriver "Hello World" til konsollen, efterfulgt af den del af scriptet efter &&, der output "NPM er fantastisk!"

Her er en brugssag, hvor dette kan være nyttigt. Antag, at du automatiserer byggeprocessen for din applikation. Lad os sige, at du bruger Webpack som en bundler, og din distributionskode går ind i et bibliotek kaldet “dist”.

Du kan starte med at rense biblioteket. Dette kan gøres ved enten at slette dets indhold eller slette selve biblioteket og derefter gøre det igen. Lad os gå med den sidstnævnte tilgang. Din kommando kan se sådan ud:

rm -r dist && mkdir dist
Bemærk, at dette bruger bash-kommandoer. Du lærer at skrive NPM-scripts på tværs af platforme senere i denne artikel.

Efter dette kan du muligvis påberåbe dig bundler ved at udføre webpackkommandoen.

Du kan udføre disse kommandoer i rækkefølge ved hjælp af &&operatøren. Af hensyn til demonstration og modularitet lad os dog opdele det i to NPM-scripts, der kalder hinanden.

Her er, hvordan scripts-objektet vil se ud i denne brugssag:

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

Der har du det! Sådan opdeles en mere kompleks opgave i mindre NPM-scripts.

Opkald til Shell og Node-scripts

Til tider skal du muligvis skrive scripts langt mere komplekse end dem, der kan opnås i 2-3 kommandoer. Når denne situation opstår, er en løsning at skrive bash- eller JS-scripts (eller scripts på ethvert script-sprog, du kan lide) og kalde dem fra NPM-scripts.

Let’s quickly write a bash script that says hello to you. Create a file called hello.sh in your root directory and paste this code in it:

#!/usr/bin/env bash
# filename: hello.shecho "What's your name?"read nameecho "Hello there, $name!"

It’s a simple script that echoes your name back to you. Now modify the package.json file so that the scripts object has this line of code:

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

Now, when you run npm run bash-hello, it asks you for your name and then says hello to you! Brilliant.

You can do the same thing with JS scripts run using node. An advantage of this approach is that this script will be platform independent since it uses node to run. Here’s a slightly more complex JS script to add two integers received as command line arguments (put this in a file named add.js):

// add.js// adds two integers received as command line arguments
function add(a, b) { return parseInt(a)+parseInt(b);}
if(!process.argv[2] || !process.argv[3]) { console.log('Insufficient number of arguments! Give two numbers please!');}
else { console.log('The sum of', process.argv[2], 'and', process.argv[3], 'is', add(process.argv[2], process.argv[3]));}
Process.argv-objektet indeholder kommandolinjeargumenter, der gives til scriptet. De to første elementer, process.argv[0]og process.argv[1], er reserveret efter node. Således process.argv[2]og process.argv[3]lad dig få adgang til kommandolinjeargumenterne.

Tilføj nu denne linje til filens scriptsobjekt package.json:

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

Endelig kør scriptet som et npm-script ved at give det to tal som kommandolinjeargumenter:

npm run js-add 2 3

Og viola! Outputtet er

The sum of 2 and 3 is 5

Strålende! Nu er vi i stand til at skrive meget mere kraftfulde scripts og udnytte styrken i andre script-sprog.

Pre og Post kroge

Remember how we talked about a special npm script called prepublish that runs before you publish your package? Such a functionality can be achieved with custom scripts too. We’ve discussed one way to do this in the previous section. We can chain commands using the &&operator, so if you wanted to run script-1 before script-2, you would write:

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

However, this makes our scripts a little dirty. This is because the core functionality of the script is reflected only in the second part of the command (after the && ). One way to write clean scripts is to use pre and post hooks.

Pre and post hooks are exactly what they sound like — they let you execute scripts before and after you call a particular script. All you have to do is define new scripts with the same name as your main script. Yet these are prefixed with “pre” or “post” depending on whether the script is executed before the main script or after it.

Let’s look at our say-hello script again. Say we want to execute the command echo 'I run before say-hello' before say-hello and echo 'I run after say-hello' after say-hello. This is what your scripts object would look like:

"scripts": { "say-hello": "echo 'Hello World'", "presay-hello": "echo 'I run before say-hello'", "postsay-hello": "echo 'I run after say-hello'" }

The “pre” and “post” before the script names tell npm to execute these before and after the script called say-hello respectively.

Now, when you run npm run say-hello, the output of all three scripts shows up in order! How cool is that?

Since all three scripts output to the console and the NPM logs clutter the output, I prefer using the -silent flag while running these. So your command would look like this:

npm run --silent say-hello

And here’s the output:

I run before say-helloHello WorldI run after say-hello

There you have it!

Let’s apply this knowledge to our build script example. Modify your package.json file so that it looks like this:

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

Now our scripts look much cleaner. When you run npm run build, prebuildis called because of the “pre” hook, which calls clean, which cleans up our dist directory for us. Sweet!

Making Our Scripts Cross-Platform

There is one drawback of writing terminal/shell commands in our scripts. This is the fact that shell commands make our scripts platform dependently. This is perhaps what draws our attention to tools like Gulp and Grunt. If your script is written for Unix systems, chances are, it won’t work on Windows, and vice versa.

The first time I used NPM scripts, which called other bash/batch scripts, I thought of writing two scripts per task. One for Unix and one for the Windows command line. This approach may work in use cases where the scripts aren’t that complex and there aren’t many scripts. However, it quickly becomes clear that they are not a good solution to the problem. Some of the reasons behind this are:

  • You have another thing to keep track of that distracts you from your primary task of working on the application. Instead, you end up working in the development environment.
  • You’re writing redundant code — the scripts you write are very similar and accomplish the same task. You’re essentially rewriting code. This violates one of the fundamental principles of coding — DRY: Don’t Repeat Yourself.

So how do we get around this? There are three approaches that you may use:

  1. Use commands that run cross-platform: Many useful commands are common to Unix and Windows. If your scripts are simple, consider using those.
  2. Use node packages: You can use node packages like rimraf or cross-env instead of shell commands. And obviously, you can use these packages in JS files if your script is large and complex.
  3. Brug ShellJS: ShellJS er en npm-pakke, der kører Unix-kommandoer via Node. Så dette giver dig beføjelse til at køre Unix-kommandoer på alle platforme, inklusive Windows.
Ovenstående fremgangsmåder blev taget fra denne strålende artikel af Cory House om, hvorfor han forlod Grunt og Gulp til NPM-scripts. Artiklen beskriver mange ting, der ikke er dækket af denne serie, og afsluttes med en liste over fremragende ressourcer. Jeg vil bestemt anbefale, at du læser den for at fremme din forståelse af NPM-scripts.

Et par brugssager til NPM-scripts

Endelig er der meget, du kan gøre med NPM-scripts. Nogle brugssager er:

  • Minificering / afbrydelse af CSS / JavaScript
  • Automatisering af byggeprocessen
  • Linting din kode
  • Komprimering af billeder
  • Automatisk indsprøjtning af ændringer med BrowserSync

And a lot more. To learn about how to automate the above-mentioned tasks using NPM scripts, check out this brilliant article on the topic.

Bonus: Commander for Creating CLI Applications Using NodeJS

While we’re discussing NPM scripts and the CLI, I’d like to quickly tell you about a really cool package called commander. Commander allows you to create your own CLI applications. This isn’t really related to NPM scripts, but it’s a cool piece of technology to know. Check out the commander docs here or try one of these tutorials:

  • Build An Interactive Command-Line Application with Node.js — Scotch.io
  • Writing Command Line Applications in NodeJS — freeCodeCamp

Concluding Words

Det er alt sammen for denne artikel om brug af NPM-scripts. Jeg håber, du har fået noget indblik i, hvordan du kan integrere disse i dine egne projekter. Denne artikel er på ingen måde en grundig tutorial om NPM-scripts. Derfor vil jeg anbefale dig at lære mere både fra andre ressourcer og fra faktisk at bruge NPM-scripts i dine egne projekter.

Forbind dig også med mig på GitHub og LinkedIn.

Glad kodning! :)