Az NPM szkriptek az NPM egyik kedvenc funkciója közé tartoznak. Egyszerűek. Csökkentik az eszközök iránti igényt. Ezért csökkentik a konfigurációs fájlok és egyéb dolgok számát, amelyek nyomon követéséhez szükségesek. És nagyon sokoldalúak. Ezenkívül számos gyakori feladatot automatizálhat. némelyiket a cikk vége felé soroljuk fel.
Minden további nélkül merüljünk el az NPM szkriptjeiben!
Mik az NPM szkriptek?
Az NPM szkriptek Nos. Szkripteket használunk az ismétlődő feladatok automatizálásához. Például a projekt felépítése, a Cascading Style Sheets (CSS) és a JavaScript (JS) fájlok tömörítése. A szkripteket ideiglenes fájlok és mappák, stb. Törlésére is használják. Ezt sokféleképpen lehet kihúzni - írhat bash / batch szkripteket, vagy használhat olyan feladatfutót, mint a Gulp vagy a Grunt. Sokan azonban egyszerűségük és sokoldalúságuk miatt áttérnek az NPM szkriptekre. Lehetőséget kínálnak arra is, hogy kevesebb eszköz legyen a tanuláshoz, használathoz és a nyomon követéshez.
Most, hogy van (néhány) elképzelésünk arról, hogy mik az NPM szkriptek, és mit tehetnek értünk, folytassuk és írjunk néhányat!
A Scripts Object a package.json fájlban
Munkánk nagy része a package.json fájlban fog történni, amelyet az NPM a fajta nyilvántartásként használ. Ez a fájl futtatásakor jön létrenpm init.
Íme egy példa a package.json fájlra:
{ "name": "super-cool-package", "version": "1.0.0", "scripts": { ... }, "dependencies": { ... } "devDependencies": { ... } }Ha a NodeJS és az NPM programmal dolgozott, akkor ismeri a package.json fájlt. Figyelje scriptsmeg a fájlban lévő objektumot. Innen fognak menni az NPM szkriptjeink. Az NPM szkriptek a szokásos JSON kulcs-érték párok szerint íródnak, ahol a kulcs a szkript neve és az érték tartalmazza a futtatni kívánt parancsfájlt.
Talán itt van a legnépszerűbb NPM szkript (és ez egy speciális típusú szkript is):
"scripts": { "start": "node index.js", ...}Ezt valószínűleg rengetegszer láthatta a package.json fájlokban. És valószínűleg tudja, hogy gépelhet npm starta szkript végrehajtásához. De ez a példa bemutatja az NPM szkriptek első fontos szempontját - ezek egyszerűen terminálparancsok. Az operációs rendszer héjában futnak, amelyen végrehajtják őket. Tehát lehet, hogy bash Linux esetén, és cmd.exe Windows esetén.
Ezen a ponton meglehet, hogy nem imponál. De olvassa tovább, hogy lássa, mennyire hatékonyak az NPM szkriptek.
Egyéni szkriptek
Az imént látott szkript az egyik „különleges” NPM szkript. Egyszerű gépeléssel hajthatja végre npm start. Ezek olyan nevekből álló szkriptek, amelyeket az NPM felismer és különleges jelentést tulajdonít nekik. Írhat például egy nevű szkriptet prepublish. Az NPM végrehajtja a szkriptet, mielőtt a csomagodat csomagolják és közzéteszik, és akkor is, ha npm installhelyben futtatsz minden argumentum nélkül. Bővebben az ilyen szkriptekről itt.
De az NPM-nek meg kell határoznia saját egyéni szkriptjeit is. Itt kezd megmutatkozni az NPM szkriptek ereje.
Nézzünk meg egy szuper alapú egyedi NPM szkriptet, amely „hello world” -t ad ki a konzolhoz. Adja hozzá ezt a package.json fájl szkript objektumához:
"say-hello": "echo 'Hello World'"A package.json fájlban található szkriptek objektumának így kell kinéznie:
..."scripts": { "start": "node index.js", "say-hello": "echo 'Hello World!'"}Most próbálkozzon futással npm say-hello. Nem működik? Ennek oka, hogy az egyéni NPM parancsfájlok egyikének run-scriptvagy bármelyiküknek meg kell előznie runa megfelelő végrehajtáshoz. Próbálja futni npm run-script say-hellovagy npm run say-hello. A konzol azt mondja: „Hello World!”! Megírtuk az első NPM szkriptünket!
Íme egy gyors tipp - annak megakadályozásához, hogy az alapértelmezett NPM naplók kimenjenek a konzolra egy parancsfájl végrehajtásakor, adja hozzá a --silentzászlót. Így néz ki a parancsod:
npm run --silent say-helloNPM parancsfájlok hívása más NPM parancsfájlokon belül
Az NPM szkriptek használatának egyik hátránya akkor jelenik meg, ha a szkript meglehetősen összetett (és hosszú). Ezt a problémát súlyosbítja az a tény, hogy a JSON specifikáció nem támogatja a megjegyzéseket. A probléma megkerülésének néhány módja van. Az egyik módja az, hogy felosztja a parancsfájlokat kis, egycélú parancsfájlokra, majd meghívja más NPM parancsfájlokon belül. Az NPM parancsfájl meghívása a másikban egyszerű. Módosítsa az scriptsobjektumot úgy, hogy így nézzen ki:
"scripts": { "say-hello": "echo 'Hello World'", "awesome-npm": "npm run say-hello && echo 'echo NPM is awesome!'"}Mivel az NPM parancsfájlok a shellben futnak, npm run say-helloa másik NPM parancsfájlon belüli hívás szinte intuitív.
&&a parancsfájlban található két karakter elválasztására szolgál. Így a második parancs az első parancs sikeres végrehajtása után hajt végre.
Most, amikor fut npm run awesome-npm, a köszön-szia szkript hajtja végre először, kinyomtatva a „Hello World” -t a konzolra, majd a szkript utána következik az a rész &&, amely az „NPM awesome!”
Itt van egy felhasználási eset, ahol ez hasznos lehet. Tegyük fel, hogy automatizálja az alkalmazás összeállítási folyamatát. Tegyük fel, hogy a Webpack csomagcsomagként használja, és a terjesztési kódja a „dist” könyvtárba kerül.
Kezdheti a könyvtár tisztításával. Ez történhet úgy, hogy törli a tartalmát, vagy magát a könyvtárat, majd újra elkészíti. Menjünk az utóbbi megközelítéssel. A parancsod így nézhet ki:
rm -r dist && mkdir distAfter this, you might invoke the bundler by executing the webpack command.
You can execute these commands in succession by using the &&operator. However, for the sake of demonstration and modularity, let’s split this into two NPM scripts that call each other.
Here’s what the scripts object would look like in this use case:
"scripts": { ... "clean": "rm -r dist && mkdir dist", "build": "npm run clean && webpack"}There you have it! How to split a more complex task into smaller NPM scripts.
Calling Shell and Node Scripts
At times, you may have to write scripts far more complex than ones that can be achieved in 2–3 commands. When this situation arises, one solution is to write bash or JS scripts (or scripts in any scripting language you like) and call them from 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 argumentsfunction 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[0]és
process.argv[1]a csomópontok vannak fenntartva. Így
process.argv[2]és
process.argv[3]segítségével hozzáférést a parancssori paramétereket.
Most adja hozzá ezt a sort scriptsa package.jsonfájl objektumához :
"js-add": "node add.js"Végül futtassa a szkriptet npm szkriptként úgy, hogy két számot ad meg parancssori argumentumként:
npm run js-add 2 3És brácsa! A kimenet az
The sum of 2 and 3 is 5Ragyogó! Most sokkal erősebb szkripteket tudunk írni és kiaknázni más szkriptnyelvek erejét.
Elő és utáni horgok
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-helloAnd here’s the output:
I run before say-helloHello WorldI run after say-helloThere 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:
- Use commands that run cross-platform: Many useful commands are common to Unix and Windows. If your scripts are simple, consider using those.
- 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.
- Használja a ShellJS-t: A ShellJS egy npm csomag, amely Unix parancsokat futtat a Node-on keresztül. Tehát ez lehetőséget ad arra, hogy futtassa a Unix parancsokat minden platformon, beleértve a Windows rendszert is.
Néhány felhasználási eset NPM szkriptekhez
Végül sok mindent megtehetünk az NPM szkriptjeivel. Néhány felhasználási eset a következő:
- A CSS / JavaScript minimalizálása / rontása
- A gyártási folyamat automatizálása
- Szaggatja a kódot
- Képek tömörítése
- A változtatások automatikus injektálása a BrowserSync segítségével
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! :)