DEV Community

Cover image for 5 package.json magic scripts that you don't use!
Kumar Abhirup
Kumar Abhirup

Posted on

5 package.json magic scripts that you don't use!

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",
}
Enter fullscreen mode Exit fullscreen mode

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 a devDependency, 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 or wget 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"
}
Enter fullscreen mode Exit fullscreen mode

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 preing and posting of scripts

Take a look at the below scripts.

"scripts": {
  "predeploy": "cd example && npm install && npm run build",
  "deploy": "gh-pages -d example/build"
}
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
anwar_nairi profile image
Anwar

Great man, did not knew most of those, really helpful ๐Ÿ˜Š

Collapse
 
kumareth profile image
Kumar Abhirup

thanks!

Collapse
 
squidbe profile image
squidbe

16?! Look out, Jeff Bezos. ๐Ÿ˜Š

Collapse
 
therealkevinard profile image
Kevin Ard • Edited

5 gets a unicorn from me.

Collapse
 
gustavofsantos profile image
Gustavo Santos

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

Collapse
 
pauluz profile image
Paul Canning

prepublish was deprecated in npm v4