Johdanto NPM-skripteihin

NPM-komentosarjat ovat suosikkini ominaisuuksia NPM: ssä. Ne ovat yksinkertaisia. Ne vähentävät työkalujen tarvetta. Siksi ne vähentävät määritystiedostojen ja muiden seurattavien asioiden määrää. Ja ne ovat erittäin monipuolisia. Niiden avulla voit myös automatisoida monia yleisiä tehtäviä. joista osa on lueteltu artikkelin lopussa.

Sukellamme ilman lisäsoittoja NPM-skripteihin!

Mitä ovat NPM-komentosarjat?

NPM-komentosarjat ovat hyvin skriptejä. Käytämme komentosarjoja toistuvien tehtävien automatisointiin. Esimerkiksi projektin rakentaminen, CSS- ja JavaScripti (JS) -tiedostojen pienentäminen. Skriptejä käytetään myös väliaikaisten tiedostojen ja kansioiden jne. Poistamiseen. On monia tapoja vetää tämä pois - voit kirjoittaa bash / batch-komentosarjoja tai käyttää tehtävänajuria, kuten Gulp tai Grunt. Monet ihmiset ovat kuitenkin siirtymässä NPM-skripteihin yksinkertaisuuden ja monipuolisuuden vuoksi. Ne tarjoavat myös mahdollisuuden saada vähemmän työkaluja oppimiseen, käyttöön ja seurantaan.

Nyt kun meillä on (osa) käsitys siitä, mitä NPM-komentosarjat ovat ja mitä ne voivat tehdä meille, mennään eteenpäin ja kirjoitetaan joitain!

Scripts-objekti paketissa.json

Suurin osa työstämme tapahtuu pack.json-tiedostossa, jota NPM käyttää eräänlaisena manifestina. Tämä on tiedosto, joka luodaan suoritettaessanpm init.

Tässä on esimerkki package.json-tiedostosta:

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

Jos olet työskennellyt NodeJS: n ja NPM: n kanssa, olet perehtynyt package.json-tiedostoon. Huomaa scriptstiedostossa oleva objekti. Tähän NPM-komentosarjamme menevät. NPM-komentosarjat kirjoitetaan tavallisten JSON-avainarvoparien kanssa, joissa avain on komentosarjan nimi ja arvo sisältää suoritettavan komentosarjan.

Tässä on ehkä suosituin NPM-komentosarja (ja se on myös erityinen komentosarja):

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

Olet todennäköisesti nähnyt tämän useita kertoja pack.json-tiedostoissasi. Ja luultavasti tiedät, että voit kirjoittaa npm startsuorittamaan komentosarjan. Mutta tämä esimerkki kuvaa NPM-komentosarjojen ensimmäisen tärkeän näkökohdan - ne ovat yksinkertaisesti päätelaitteiden komentoja. Ne suoritetaan sen käyttöjärjestelmän kuoressa, jolla heidät suoritetaan. Joten se voi olla bash Linuxille ja cmd.exe Windowsille.

Tässä vaiheessa saatat olla melko vaikuttamaton. Mutta jatka lukemista nähdäksesi, kuinka tehokkaita NPM-komentosarjat todella ovat.

Mukautetut komentosarjat

Juuri näkemämme skripti on yksi "erityisistä" NPM-skripteistä. Voit suorittaa sen yksinkertaisesti kirjoittamalla npm start. Nämä ovat komentosarjoja nimillä, jotka NPM tunnistaa ja kiinnittää erityistä merkitystä. Voit esimerkiksi kirjoittaa komentosarjan nimeltä prepublish. NPM suorittaa komentosarjan ennen paketin pakkaamista ja julkaisemista ja myös silloin, kun suoritat npm installpaikallisesti ilman argumentteja. Lisää tällaisista skripteistä täältä.

Mutta NPM: n avulla voit myös määrittää omat komentosarjat. Täällä NPM-komentosarjojen voima alkaa näkyä.

Katsotaanpa superperus mukautettua NPM-komentosarjaa, joka tuottaa "hei maailma" konsolille. Lisää tämä package.json-tiedostosi skriptiobjektiin:

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

Pack.json-tiedostosi skriptiobjektin tulisi näyttää tältä:

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

Yritä nyt juosta npm say-hello. Ei toimi? Tämä johtuu siitä, että mukautettujen NPM-komentosarjojen on oltava jommankumman edestä run-scripttai runjotta ne voidaan suorittaa oikein. Yritä juosta npm run-script say-hellotai npm run say-hello. Konsoli sanoo: "Hei maailma!"! Olemme kirjoittaneet ensimmäisen NPM-komentosarjamme!

Tässä on lyhyt vinkki: lisää --silentlippu , jotta estät NPM-oletuslokien lähettämisen konsolille, kun suoritat komentosarjan . Näin komentosi näyttäisi:

npm run --silent say-hello

NPM-komentosarjojen soittaminen muissa NPM-komentosarjoissa

Yksi haittapuoli NPM-komentosarjojen käytöstä näkyy, kun komentosarjasi on melko monimutkainen (ja pitkä). Tätä ongelmaa pahentaa se tosiasia, että JSON-tekniset tiedot eivät tue kommentteja. On olemassa muutama tapa kiertää tämä ongelma. Yksi tapa on jakaa komentosarjasi pieniksi yksikäyttöisiksi komentosarjoiksi ja kutsua niitä sitten muissa NPM-komentosarjoissa. Tapa soittaa NPM-komentosarjaan toisessa on yksinkertainen. Muokkaa scriptsobjektia siten, että se näyttää tältä:

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

Koska NPM-komentosarjat suoritetaan kuoressa, soittaminen npm run say-hellotoisessa NPM-komentosarjassa on melkein intuitiivista.

Niille teistä, jotka eivät ole kovin tyytyväisiä päätelaitteiden komentoihin, &&komentosarjan komentoa käytetään kahden komennon rajaamiseen. Siten toinen komento suoritetaan ensimmäisen komennon onnistuneen suorittamisen jälkeen.

Nyt kun suoritat npm run awesome-npm, tervehdyskomentosarja suorittaa ensin ja antaa "Hello World" -konsolille, jota seuraa komentosarjan osa sen jälkeen &&, joka antaa "NPM on mahtava!"

Tässä on käyttötapaus, jossa tämä voi olla hyödyllistä. Oletetaan, että automatisoit sovelluksesi rakennusprosessin. Oletetaan, että käytät Webpackia pakettina ja jakelukoodisi siirtyy hakemistoon nimeltä dist.

Voit aloittaa puhdistamalla hakemiston. Tämä voidaan tehdä joko poistamalla sen sisältö tai poistamalla itse hakemisto ja tekemällä se sitten uudelleen. Mennään jälkimmäisen lähestymistavan kanssa. Komentosi saattaa näyttää tältä:

rm -r dist && mkdir dist
Huomaa, että tämä käyttää bash-komentoja. Opit kirjoittamaan monen alustan NPM-komentosarjoja myöhemmin tästä artikkelista.

Tämän jälkeen saatat kutsua paketin suorittamalla webpackkomennon.

Voit suorittaa nämä komennot peräkkäin &&operaattorin avulla. Jaetaan tämä kuitenkin esittelyn ja modulaarisuuden vuoksi kahteen NPM-komentosarjaan, jotka kutsuvat toisiaan.

Näin skriptiobjekti näyttäisi tässä käyttötapauksessa:

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

Sinulla on se! Kuinka jakaa monimutkaisempi tehtävä pienempiin NPM-skripteihin.

Shell- ja solmuohjelmien soittaminen

Toisinaan joudut ehkä kirjoittamaan komentosarjoja paljon monimutkaisemmiksi kuin ne, jotka voidaan saavuttaa 2-3 komennolla. Tässä tilanteessa yksi ratkaisu on kirjoittaa bash- tai JS-komentosarjat (tai komentosarjat mille tahansa haluamallesi komentokielelle) ja kutsua ne NPM-komentosarjoista.

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-objekti sisältää komentosarjalle annetut komentoriviargumentit. Kaksi ensimmäistä elementtiä process.argv[0]ja process.argv[1]on varattu solmuilta. Siten process.argv[2]ja process.argv[3]anna sinun käyttää komentoriviargumentteja.

Lisää nyt tämä rivi tiedoston scriptsobjektiin package.json:

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

Suorita lopuksi komentosarja npm-komentotiedostona antamalla sille kaksi numeroa komentoriviargumentteina:

npm run js-add 2 3

Ja alttoviulu! Tulos on

The sum of 2 and 3 is 5

Loistava! Nyt voimme kirjoittaa paljon tehokkaampia komentosarjoja ja hyödyntää muiden komentosarjakielien voimaa.

Koukut ennen ja jälkeen

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. Käytä ShellJS: ää: ShellJS on npm-paketti, joka suorittaa Unix-komennot Solmun kautta. Joten tämä antaa sinulle voiman suorittaa Unix-komentoja kaikilla alustoilla, mukaan lukien Windows.
Yllä olevat lähestymistavat otettiin tästä Cory Housen loistavasta artikkelista siitä, miksi hän lähti Gruntista ja Gulpista NPM-skriptejä varten. Artikkelissa kuvataan monia asioita, joita ei käsitellä tässä sarjassa, ja lopuksi luettelo erinomaisista resursseista. Suosittelen ehdottomasti, että luet sen, jotta ymmärrät paremmin NPM-komentosarjoja.

Muutama käyttötapa NPM-komentosarjoille

Lopuksi, NPM-skripteillä voi tehdä paljon. Jotkut käyttötapaukset ovat:

  • CSS: n / JavaScriptin minimointi / sekoitus
  • Rakennusprosessin automatisointi
  • Koodasi nukkuu
  • Pakataan kuvia
  • Ruiskutetaan muutokset automaattisesti BrowserSyncin avulla

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

Se on kaikki tässä artikkelissa NPM-komentosarjojen käytöstä. Toivon, että olet saanut oivalluksen siitä, miten voit integroida nämä omiin projekteihisi. Tämä artikkeli ei suinkaan ole perusteellinen opetusohjelma NPM-skripteistä. Siksi suosittelen, että opit edelleen sekä muista resursseista että NPM-komentosarjojen tosiasiallisesta käytöstä omissa projekteissasi.

Muista myös olla yhteydessä minuun GitHubissa ja LinkedInissä.

Hyvää koodausta! :)