Uvod u NPM skripte

NPM skripte su mi omiljene značajke NPM-a. Jednostavni su. Smanjuju potrebu za alatima. Stoga smanjuju broj konfiguracijskih datoteka i drugih stvari koje trebate pratiti. I vrlo su svestrani. Omogućuju vam i automatizaciju mnogih uobičajenih zadataka. od kojih su neki navedeni na kraju članka.

Bez daljnjega, zaronimo u NPM skripte!

Što su NPM skripte?

NPM skripte su, pa, skripte. Skripte koristimo za automatizaciju zadataka koji se ponavljaju. Na primjer, izrada vašeg projekta, umanjivanje kaskadnih tabela stilova (CSS) i JavaScript (JS) datoteka. Skripte se također koriste za brisanje privremenih datoteka i mapa itd. Postoji mnogo načina da se to izvede - možete napisati bash / batch skripte ili upotrijebiti pokretač zadataka poput Gulpa ili Grunta. Međutim, mnogi ljudi prelaze na NPM skripte zbog njihove jednostavnosti i svestranosti. Oni također nude mogućnost da imaju manje alata za učenje, upotrebu i praćenje.

Sad kad imamo (neku) predodžbu o tome što su NPM skripte i što mogu učiniti za nas, idemo naprijed i napišite neke!

Objekt skripte u paketu.json

Većina našeg rada dogodit će se u datoteci package.json koju NPM koristi kao svojevrsni manifest. Ovo je datoteka koja se stvara prilikom pokretanjanpm init.

Evo primjera datoteke package.json:

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

Ako ste radili s NodeJS i NPM, bit će vam poznata datoteka package.json. Primijetite scriptsobjekt u datoteci. Ovdje će ići naše NPM skripte. NPM skripte pišu se kao i obično JSON parovi ključ / vrijednost gdje je ključ ime skripte, a vrijednost sadrži skriptu koju želite izvršiti.

Evo možda najpopularnije NPM skripte (a ujedno je i posebna vrsta skripte):

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

Vjerojatno ste to vidjeli puno puta u datotekama package.json. I vjerojatno znate da možete tipkati npm startza izvršavanje skripte. Ali ovaj primjer ilustrira prvi važan aspekt NPM skripti - one su jednostavno terminalne naredbe. Oni se izvode u ljusci OS-a na kojem su izvršeni. Dakle, to bi mogao biti bash za Linux i cmd.exe za Windows.

U ovom trenutku možda ćete biti prilično impresionirani. Ali nastavite čitati da biste vidjeli koliko su stvarno moćne NPM skripte.

Prilagođene skripte

Skripta koju smo upravo vidjeli jedna je od "posebnih" NPM skripti. Možete ga izvršiti jednostavnim upisivanjem npm start. To su skripte s imenima koja NPM prepoznaje i kojima pridaje posebno značenje. Na primjer, možete napisati skriptu koja se zove prepublish. NPM će izvršiti skriptu prije nego što se paket spakira i objavi, a također i kada npm installlokalno pokrenete bez ikakvih argumenata. O takvim skriptama više ovdje.

Ali NPM vam također omogućuje da definirate vlastite prilagođene skripte. Tu se počinje pokazivati ​​snaga NPM skripti.

Pogledajmo super osnovnu prilagođenu NPM skriptu koja na konzolu izbacuje „zdravo svijet“. Dodajte ovo u objekt skripte vaše datoteke package.json:

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

Objekt skripte u datoteci package.json trebao bi izgledati ovako:

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

Pokušajte sada trčati npm say-hello. Ne radi? To je zato što prilagođenim NPM skriptama mora prethoditi run-scriptili runda bi se mogle pravilno izvršiti. Pokušajte trčati npm run-script say-helloili npm run say-hello. Konzola kaže: "Pozdrav svijetu!"! Napisali smo prvu NPM skriptu!

Evo kratkog savjeta - da biste spriječili izlaz zadanih NPM zapisnika na konzolu kada izvršavate skriptu, dodajte --silentzastavicu. Ovako bi izgledala vaša naredba:

npm run --silent say-hello

Pozivanje NPM skripti unutar ostalih NPM skripti

Jedna loša strana korištenja NPM skripti pokazuje se kada je vaša skripta prilično složena (i duga). Ovaj je problem složen činjenicom da JSON specifikacija ne podržava komentare. Postoji nekoliko načina zaobilaženja ovog problema. Jedan od načina je da svoju skriptu podijelite na male jednonamjenske skripte, a zatim ih pozovete unutar drugih NPM skripti. Način pozivanja NPM skripte u drugoj je jednostavan. Izmijenite svoj scriptsobjekt tako da izgleda ovako:

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

Budući da se NPM skripte izvršavaju u ljusci, pozivanje npm run say-hellounutar druge NPM skripte gotovo je intuitivno.

Za one koji vam nisu baš ugodne naredbe terminala, &&skripta se koristi za ograničavanje dvije naredbe. Dakle, druga se naredba izvršava nakon uspješnog izvršavanja prve naredbe.

Sada kada pokrenete npm run awesome-npm, prvo se izvršava say-hello skripta, koja na konzolu izbacuje "Hello World", a zatim dio skripte nakon &&, koji daje "NPM je strašan!"

Evo primjera upotrebe u kojem bi ovo moglo biti korisno. Pretpostavimo da automatizirate postupak izrade vaše aplikacije. Recimo da koristite Webpack kao paket, a vaš distribucijski kôd ide u direktorij zvan "dist".

Možete započeti s čišćenjem direktorija. To se može učiniti brisanjem njegovog sadržaja ili brisanjem samog direktorija i ponovnim izradom. Krenimo s potonjim pristupom. Vaša naredba može izgledati otprilike ovako:

rm -r dist && mkdir dist
Imajte na umu da se ovdje koriste bash naredbe. Kasnije u ovom članku naučit ćete kako pisati NPM skripte s više platformi.

Nakon toga možete izvršiti webpacknaredbu da izvršite poziv na paket .

Te naredbe možete izvršavati uzastopno pomoću &&operatora. Međutim, radi demonstracije i modularnosti, podijelimo ovo na dvije NPM skripte koje se međusobno pozivaju.

Evo kako bi objekt skripti izgledao u ovom slučaju upotrebe:

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

Eto ti! Kako složeniji zadatak podijeliti na manje NPM skripte.

Pozivanje skripti školjke i čvora

Ponekad ćete možda morati pisati skripte mnogo složenije od onih koje se mogu postići u 2-3 naredbe. Kada se dogodi ovakva situacija, jedno je rješenje napisati bash ili JS skripte (ili skripte na bilo kojem skriptnom jeziku koji želite) i pozvati ih iz NPM skripti.

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]));}
Objekt process.argv sadrži argumente naredbenog retka dane skripti. Prva dva elementa, process.argv[0]i process.argv[1], rezervirani su čvorom. Tako process.argv[2]i process.argv[3]neka vam pristup argumente naredbenog retka.

Sada dodajte ovaj redak u scriptsobjekt package.jsondatoteke:

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

Na kraju, pokrenite skriptu kao npm skriptu dajući joj dva broja kao argumente naredbenog retka:

npm run js-add 2 3

I viola! Izlaz je

The sum of 2 and 3 is 5

Sjajno! Sada smo sposobni pisati mnogo snažnije skripte i iskorištavati snagu drugih skriptnih jezika.

Kuke prije i poslije

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. Upotrijebite ShellJS: ShellJS je npm paket koji izvodi Unix naredbe putem Node-a. Dakle, ovo vam daje moć pokretanja Unix naredbi na svim platformama, uključujući Windows.
Gore navedeni pristupi preuzeti su iz ovog sjajnog članka Cory Housea o tome zašto je Grunt i Gulp napustio za NPM skripte. Članak detaljno opisuje mnoge stvari koje nisu obuhvaćene ovom serijom i završava popisom izvrsnih izvora. Svakako bih vam preporučio da ga pročitate kako biste dodatno razumjeli NPM skripte.

Nekoliko slučajeva za NPM skripte

Napokon, puno toga možete učiniti s NPM skriptama. Neki slučajevi upotrebe su:

  • Minifikacija / uglifikacija CSS-a / JavaScript-a
  • Automatizacija procesa izrade
  • Povezivanje vašeg koda
  • Sažimanje slika
  • Automatsko ubrizgavanje promjena pomoću 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

That is all for this article on using NPM scripts. I hope you’ve gained some insight on how you can integrate these into your own projects. This article is by no means an in-depth tutorial on NPM scripts. Hence I’d recommend you learn further both from other resources and from actually using NPM scripts in your own projects.

Also, do connect with me on GitHub and LinkedIn.

Happy Coding! :)