There are many magic scripts available for use by the Node Package Manager ecosystem, that beginners yet don't use.
When I wanted to publish a package, I would manually bump the version, build the project, and then run npm publish
to ship the package. Which by itself took a lot of time.
But then, I read this documentation by npm and realized that all the processes can be automated and can be done in just one command.
The documentation has a lot going on, so in this DEV post, I'll try to
demystify the 5 most important package.json scripts using the documentation as a reference.
Let us begin
1. prepublish
"scripts": {
"prepublish": "minify or build your code here",
}
This command is run BEFORE the package is packed and published. This command also runs when user runs npm i
locally without any parameters and arguments.
From the NPM Docs:
If you need to perform operations on your package before it is used, in a way that is not dependent on the operating system or architecture of the target system, use a prepublish script.
Prepublish script includes tasks such as:
- Compiling CoffeeScript source code into JavaScript.
- Creating minified versions of JavaScript source code.
- Fetching remote resources that your package will use.
The advantage of doing these things at prepublish time is that they can be done once, in a single place, thus reducing complexity and variability.
Additionally, this means that:
- You can depend on
coffee-script
as adevDependency
, and thus your users donโt need to have it installed. - You donโt need to include minifiers in your package, reducing the size for your users.
- You donโt need to rely on your users having
curl
orwget
or other system tools on the target machines.
2. prepare
There is a little difference between prepare
and prepublish
...
prepare
script runs when git
dependencies are being installed. This script runs after prepublish
and before prepublishOnly
.
Example ๐
"scripts": {
"build": "rollup -c",
"prepare": "npm run build"
}
Building the project could be the best thing you can execute in the prepare
script.
3. prepublishOnly
This command serves the same purpose as prepublish
and prepare
but runs only on npm publish
! ๐ฅ
4. postpublish
As the name suggests, the command runs after npm publish
...
5. Custom pre
ing and post
ing of scripts
Take a look at the below scripts.
"scripts": {
"predeploy": "cd example && npm install && npm run build",
"deploy": "gh-pages -d example/build"
}
To execute deploy
completely, you don't need to npm run predeploy && npm run deploy
, just running npm run deploy
will do the pre
and post
task.
You can add the pre
and post
prefixes to any script and have it run chronologically.
And there's much more!
- preinstall
- postinstall
- preuninstall
- postuninstall
- preversion
- postversion
- prestart
- poststart
The names are pretty self-explanatory.
To read more about these, you can refer the NPM Docs about npm-scripts
.
Conclusion
The NPM Magic Scripts can prove useful to anyone and everyone. I regret not using it for my past projects. ๐
About me
I am Kumar Abhirup, a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day.
Connect with me on Twitter ๐ฆ
My personal website and portfolio ๐ฅ๏ธ
Comment below your better ways, and suggestions to improve this article.ย :)
Top comments (6)
Great man, did not knew most of those, really helpful ๐
thanks!
16?! Look out, Jeff Bezos. ๐
5 gets a unicorn from me.
Isn't the same thing but in every JavaScript project that I have worked, I always setup the husky and lint-staged to enforce that every commit will be consistent with the code style
prepublish
was deprecated in npm v4