Avatar



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

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",
}

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"
}

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"
}

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. ๐Ÿ˜…


Discuss on Twitter ๏น’ Edit this article ๏น’ Connect with me on Discord


๐Ÿ† About me

I am Kumar Abhirup, a 16-year-old JavaScript React developer from India who keeps learning a new thing every single day.

Love what I write? Subscribe to Kumar&Thoughts and stay updated about the tech community, me and coding in general.


If you like what I write on my blog and twitter,
I bet you gonna love the stuff I'll be mailing you!
I don't spam, really!