Sissejuhatus NPM-i skriptidesse

NPM-i skriptid on minu NPM-i lemmikfunktsioonide seas. Need on lihtsad. Need vähendavad tööriistade vajadust. Seega vähendavad need konfiguratsioonifailide ja muude jälgimiseks vajalike asjade arvu. Ja need on väga mitmekülgsed. Need võimaldavad teil automatiseerida ka paljusid levinud ülesandeid. mõned neist on loetletud artikli lõpus.

Pikemalt mõtlemata sukeldume NPM-i skriptidesse!

Mis on NPM-i skriptid?

NPM-i skriptid on noh, skriptid. Korduvate ülesannete automatiseerimiseks kasutame skripte. Näiteks oma projekti ülesehitamine, kaskaadstiilide (CSS) ja JavaScripti (JS) failide minimeerimine. Skripte kasutatakse ka ajutiste failide ja kaustade jne kustutamiseks. Selle eemaldamiseks on palju võimalusi - võite kirjutada bash / batch skripte või kasutada ülesandejooksjat nagu Gulp või Grunt. Kuid paljud inimesed lähevad oma lihtsuse ja mitmekülgsuse tõttu üle NPM-i skriptidele. Need pakuvad ka võimalust, et õppimiseks, kasutamiseks ja jälgimiseks on vähem tööriistu.

Nüüd, kui meil on (mõni) ettekujutus, mis on NPM-i skriptid ja mida nad saavad meie heaks teha, jätkame ja kirjutame mõned!

Skriptide objekt paketis.json

Suurem osa meie tööst toimub failis package.json, mida NPM kasutab omamoodi manifestina. See on fail, mis luuakse teie käivitamiselnpm init.

Siin on faili package.json näidis:

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

Kui olete töötanud NodeJS-i ja NPM-iga, olete failiga package.json tuttav. Pange tähele scriptsfailis olevat objekti. Siit lähevad meie NPM-i skriptid. NPM-skriptid kirjutatakse nagu tavaliselt JSON-i võtmeväärtuste paarid, kus võti on skripti nimi ja väärtus sisaldab skripti, mida soovite käivitada.

Siin on võib-olla kõige populaarsem NPM-i skript (ja see on ka eriline skript):

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

Ilmselt olete oma failides package.json seda mitu korda näinud. Ja ilmselt teate, et saate npm startskripti käivitamiseks sisestada . Kuid see näide illustreerib NPM-i skriptide esimest olulist aspekti - need on lihtsalt terminalikäsklused. Need töötavad OS-i kestas, millel nad hukatakse. Nii et see võib olla Linuxi jaoks bash ja cmd.exe Windowsi jaoks.

Sel hetkel võite olla pigem muljetamata. Kuid lugege edasi, et näha, kui võimsad on NPM-i skriptid tegelikult.

Kohandatud skriptid

Skript, mida me just nägime, on üks "spetsiaalsetest" NPM-i skriptidest. Saate selle täita lihtsalt tippides npm start. Need on skriptid nimedega, mida NPM tunneb ära ja omistab neile erilise tähenduse. Näiteks võite kirjutada skripti nimega prepublish. NPM käivitab skripti enne paketi pakkimist ja avaldamist ning ka siis, kui käivitate npm installkohapeal ilma argumentideta. Lisateavet selliste skriptide kohta leiate siit.

Kuid NPM määrab ka ise oma kohandatud skriptid. Siit hakkab NPM-i skriptide jõud ennast näitama.

Vaatame super põhilist kohandatud NPM-i skripti, mis väljendab konsooli "tere maailm". Lisage see oma faili package.json skriptide objektile:

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

Teie faili package.json skriptide objekt peaks välja nägema järgmine:

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

Proovige nüüd joosta npm say-hello. Ei tööta? Selle põhjuseks on asjaolu, et kohandatud NPM-skriptidele peab eelnema kumbki run-scriptvõi runnende korrektne täitmine. Proovige joosta npm run-script say-hellovõi npm run say-hello. Konsool ütleb: "Tere maailm!"! Oleme kirjutanud oma esimese NPM-i skripti!

Siin on kiire näpunäide - et vältida NPM-i vaikelogide skripti käivitamisel konsooli väljastamist, lisage --silentlipp. Teie käsk näeks välja selline:

npm run --silent say-hello

NPM-skriptidele helistamine teistes NPM-i skriptides

Üks negatiivne külg NPM-skriptide kasutamisel ilmneb siis, kui teie skript on üsna keeruline (ja pikk). Selle probleemi raskendab asjaolu, et JSON-i spetsifikatsioon ei toeta kommentaare. Selle probleemi lahendamiseks on mitu võimalust. Üks võimalus on jagada oma skript väikesteks üheotstarbelisteks skriptideks ja seejärel helistada neile teistes NPM-i skriptides. NPM-i skripti kutsumine teises on lihtne. Muutke oma scriptsobjekti nii, et see näeks välja järgmine:

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

Kuna NPM-skriptid käivitatakse kestas, npm run say-helloon teises NPM-i skriptis helistamine peaaegu intuitiivne.

Neile, kes pole terminali käskudega eriti rahul, &&kasutatakse skriptis olevat kahe käsu piiritlemiseks. Seega täidab teine ​​käsk pärast esimese käsu edukat täitmist.

Nüüd käivitamisel npm run awesome-npmkäivitatakse kõigepealt tere-tere skript, väljastades konsooli "Hello World", millele järgneb skripti osa pärast &&, mis väljastab "NPM on fantastiline!"

Siin on kasutamisjuhtum, kus see võib olla kasulik. Oletame, et automatiseerite oma rakenduse koostamisprotsessi. Oletame, et kasutate Webpacki paketina ja teie jaotuskood läheb kataloogi nimega dist.

Võite alustada kataloogi puhastamisega. Seda saab teha kas selle sisu kustutades või kataloog ise kustutades ja seejärel uuesti koostades. Läheme viimase lähenemisega. Teie käsk võib välja näha umbes selline:

rm -r dist && mkdir dist
Pange tähele, et see kasutab käske bash. Platvormidevaheliste NPM-i skriptide kirjutamise kohta saate teada hiljem sellest artiklist.

Pärast seda võite webpackkäsu käivitades kutsuda komplekti .

&&Operaatori abil saate neid käske järjest täita . Jagame selle demonstreerimise ja modulaarsuse huvides siiski kaheks NPM-i skriptiks, mis üksteist kutsuvad.

Siinkohal näeb skriptide objekt välja sellisel juhul:

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

Seal see teil on! Kuidas jagada keerulisem ülesanne väiksemateks NPM-i skriptideks.

Shelli ja sõlme skriptidele helistamine

Mõnikord peate võib-olla kirjutama skripte palju keerulisemaks kui need, mida saab saavutada 2-3 käsuga. Kui selline olukord tekib, on üks lahendus kirjutada bashi või JS-i skriptid (või skriptid mis tahes skriptikeeles, mis teile meeldib) ja helistada neile NPM-i skriptidest.

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 sisaldab skriptile antud käsurea argumente. Esimesed kaks elementi process.argv[0]ja process.argv[1]on reserveeritud sõlmede kaupa. Seega process.argv[2]ja process.argv[3]teile juurdepääsu käsurea argumente.

Nüüd lisage see rida faili scriptsobjektile package.json:

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

Lõpuks käivitage skript npm-skriptina, andes sellele käsurea argumentidena kaks numbrit:

npm run js-add 2 3

Ja vioola! Väljund on

The sum of 2 and 3 is 5

Geniaalne! Nüüd oleme võimelised kirjutama palju võimsamaid skripte ja kasutama teiste skriptikeelte jõudu.

Eel- ja järelkonksud

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. Kasutage ShellJS: ShellJS on npm pakett, mis käitab Unixi käske sõlme kaudu. Nii et see annab teile õiguse käivitada Unixi käske kõigil platvormidel, sealhulgas Windowsis.
Eespool toodud lähenemisviisid võeti sellest hiilgavast Cory House'i artiklist selle kohta, miks ta jättis Grunti ja Gulpi NPM-i skriptide jaoks. Artikkel kirjeldab paljusid asju, mida selles seerias ei käsitleta, ja lõpetatakse suurepäraste ressursside loeteluga. Soovitan kindlasti seda lugeda, et NPM-i skriptidest paremini aru saada.

Vähesed kasutamisjuhud NPM-skriptide jaoks

Lõpuks on NPM-i skriptidega palju teha. Mõned kasutusjuhtumid on:

  • CSS-i / JavaScripti minimeerimine / uglifitseerimine
  • Ehitamisprotsessi automatiseerimine
  • Koodi lintimine
  • Piltide tihendamine
  • Muudatuste automaatne sisestamine BrowserSynci abil

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

See on kõik selle artikli kohta NPM-i skriptide kohta. Loodan, et olete saanud ülevaate sellest, kuidas saate neid oma projektidesse integreerida. See artikkel pole sugugi põhjalik õpetus NPM-i skriptide kohta. Seetõttu soovitaksin teil õppida nii muudest ressurssidest kui ka NPM-i skriptide tegelikust kasutamisest oma projektides.

Samuti võtke minuga ühendust GitHubi ja LinkedIni kaudu.

Head kodeerimist! :)