An Introduction to Package JSON Scripts in Node.js

In my experience with modern-stack JavaScript projects and Node.js, the package.json file has been a ubiquitous presence. It serves as the manifest for the project, containing vital information about applications, modules, packages, and more. Beyond being a mere configuration repository, it acts as a central hub for npm, housing the names and versions of all installed packages. 

Understanding the intricacies of package.json scripts has been instrumental in streamlining my Node.js workflow. From defining project dependencies to specifying scripts for various tasks, each property plays a crucial role in shaping the project's structure and behavior. Through hands-on experience and continuous learning, I've come to appreciate the versatility and efficiency that package.json brings to Node.js development. 

Most Automations and unrelated actions can be boiled down to the scripts section of the package.json file. 

Ever wondered what scripts are? What are they used for? What should we know about it, and what cool things can we do with it? If yes, let me give you a kickstart introduction to effectively using package.json Scripts arguments with Node.js and NPM.

package.json Scripts: An Overview

An npm script is a convenient way to bundle common shell commands like a set of built-in and custom scripts for your project. They are typically terminal commands or a string of terminal commands that help automate repetitive tasks. 

In short, NPM scripts are terminal commands that perform a set of actions. 

In a project, scripts are stored in a section of the package.json file, which means they are shared amongst everyone using the codebase, ensuring that everyone is using the same command with similar flags. 

Their purpose is to provide an effortless way to execute repetitive tasks, like: 

• Running a linter tool on your code 
• Executing the tests 
• Starting your project locally 
• Building your project 
• Minify or Uglify JS or CSS (Cascading Style Sheets) 

These scripts can be used effortlessly in CI/CD pipeline to simplify tasks like building and generating test reports. 

If you wish to choose software development as a career and want to explore the field further, check out upGrad’s Full Stack Software Development Bootcamp.

Using the NPM (Node Package Manager) scripts is also simple. To define an NPM script, set its name and write the script under the ‘scripts’ property of your package.json file: 

To execute your Script, use the ‘npm run <NAME-OF-YOUR-SCRIPT>’ command. Some predefined aliases convert to npm run, like npm test or package json npm start, you can use them interchangeably. 

Maintaining commands you run regularly as an npm script is common, like starting your application, linting, building production apps, etc. 

Example for an NPM Script

A simple example for an NPM script would be: 

1. "scripts": { 
 2.  "scss": "node-sass --output-style compressed -o dist/css src/scss" 
3. } 
4.   
5.  
6. Terminal Command to run the Script 
npm run scss  …… run scss ……

Get a deeper understanding of the Node.is file system module. 

Benefits of Using Package JSON Scripts in NodeJS

1. Simplification

• It streamlines command execution for common tasks (start, test, build, deploy). 
• It eliminates the need to memorize complex commands. 

2. Consistency

• It ensures uniform execution across different environments and developers. 
• It maintains consistent dependency management. 

3. Shareability

• It facilitates easy project setup and task execution for new developers. 
• It promotes collaboration and knowledge transfer. 

4. Automation 

• It Simplify complex workflows and repetitive tasks. 
• It Enhances efficiency and minimizes errors. 

5. Flexibility

• It customizes scripts to specific project needs and workflows. 
• It adapts to evolving project requirements. 

Commonly Used Package JSON Scripts in NodeJS

We have the following Nodejs scripts that every front-end developer should know:  

1. start: Launches the server or application (e.g., "node index.js").  
2. test: Executes project tests (e.g., "jest" or "mocha"). 
3. build: Compiles and prepares production-ready code (e.g., "webpack").  
4. dev: Starts a development server with live-reloading (e.g., "nodemon").  
5. lint: Enforces code style guidelines (e.g., "eslint"). 

Additional useful scripts in NodeJS to write better and more readable code:

We can use the following script for enhanced, improved, and highly readable code: 

1. pre/post scripts: Execute tasks before/after primary scripts (e.g., "prestart", "posttest").  
2. clean: Removes generated files (e.g., "dist" folder).  
3. deploy: Automates deployment processes. 

How to Manage Node.js package.json?

Understanding how the package.json file works helps us manage and maintain it better.  

As the name suggests, it is primarily a JSON file, so it needs to be a valid JSON. This means that any missing commas, unclosed quotation marks, or other formatting errors will prevent npm from interacting with it. 

It is recommended that you use the npm CLI (Command Line Interface) to update and manage your package to avoid accidental errors and ease the process of managing your dependencies. 

Always use `npm init` to initialize your package.json file, as it will ensure you generate a valid one. 

Dependencies are best managed using different script commands like ‘npm install,’ npm uninstall, and npm update, so the package.json and node_modules/ folder are kept in sync.  

Manually listing a dependency in the package file does not immediately reflect the state of our node_modules/ folder as our package.json file only records dependencies, and our node_modules/ folder is where the actual code for dependencies is installed. Therefore, it is needed that you run ‘npm install’ before the dependency is installed in your project. 

That is why it is easier to use npm to help manage dependencies. It updates both the package file and node_modules folder together. 

That said, even though it is not suggested, you can always edit your package file manually in your code editor and then make changes.  

Various commands and scripts you want to be exposed can be specified here, and to discover all the available scripts, you can use the `npm run` command 

Several built-in scripts are present in a Package.json script file in addition to their pre-set life cycle events and arbitrary scripts. Let us look into some of them below. 

Pre and Post Scripts

Let us begin with understanding what npm does when you run a script.

Number one on its checklist is to check the package.json file to see if you have defined a value for that script. If a value matching the script tag is found, it then checks for two other versions of the same script, that is, a ‘pre’ version and a ‘post’ version. 

These scripts can be handy for many scenarios like the commands that need to be run before or after a set of actions performed in a project.

 If either of these scripts is found, it will run them as the specified script. 

A good example would be a command for deleting test logs before running the tests and running a linter afterward. 

The creation of "pre" or "post" scripts is easy, these scripts can be defined in the "scripts" section with a matching name and adding "pre" or "post" to the beginning of them. 

Let us take an example of such a script 

npm run prepare should do the following 

• Run before the package is packed (i.e., during npm publish and npm pack) 
• Automatically run on local npm install without any arguments 
• Should also run AFTER prepublish, but BEFORE prepublishOnly 
• As of npm@7 these scripts run in the background. To see the output, run with: --foreground-scripts. 

There are respectively pre- and post-hooks for a lot of commands. This comes in very handy to manage the life cycle of your application. 

Check out our free technology courses to get an edge over the competition.

Life Cycle Scripts

Life Cycle Scripts can be considered special scripts that happen only in certain situations. These scripts work in addition to the pre<event>, post<event>, and <event> scripts. 

Examples of life cycle hooks can be prepare, prepublish, prepublishOnly, prepack, and postpack. 

Let us suppose if this is what npm was to find in our package.json file, it will run the scripts in the order prestart, start, then poststart. All we would be doing to trigger this is typing `npm start` in the command line.  

These kinds of scripts are beneficial for various situations where something is needed to happen immediately before or immediately after a primary action.  

If we set up our scripts properly, simply running the command npm start will handle all our needs in the proper order. 

The same behavior also applies to built-in commands. You can read more about those lifecycle scripts in the npm docs. 

NPM Script Options

In some cases, there can be a need to get some extra juice out of your NPM scripts, in these cases, you can pass options to the command you are using in your npm script by adding a -- --flag like in the example below. 

Let us see a few examples: 

{ 
    "scripts": { 
        "lint": "eslint .", 
        "test": "jest ./test", 
    } 
} 

If I wanted to run only the tests that changed, the command would be like this: 

> npm run test -- --onlyChanged 

And if you wanted to run the linter and save the output in a file, you could execute the following command: 

> npm run lint -- --output-file lint-result.txt 

User and Environment

• User: When npm runs with root privileges, scripts are always run with the effective uid and gid of the working directory owner. To overcome this, you should set the unsafe-perm flag to run scripts with root privileges. 
• Environment: Scripts run in different environments where many pieces of information are made available regarding the setup of npm and the current state of the process. 
• Exit: Scripts are run by passing the line as a script argument to sh, and if it exits with a code other than 0, then this aborts the process. 

Note that these script files do not have to be Node.js or JavaScript programs. They only must be some sort of executable file. 

Creating Custom Package JSON Scripts [Step–by–Step]  

A. Passing Arguments to Package JSON Scripts  

• Open package.json: Locate the "scripts" property within the file. 
• Add a new script: Define a custom script name and its associated command.  

package.json script example: 

"scripts": { 
  "my-custom-script": "node my-script.js" 
} 

B. package.json Running Multiple Scripts in Parallel  

1. Use process.argv: Access command-line arguments within scripts using process.argv. 

Example: 

// my-script.js 
console.log(process.argv); // Output: ['node', 'my-script.js', 'arg1', 'arg2'] 

2. Run with arguments: npm run my-custom-script arg1 arg2 

3. Utilize npm-run-all: Install the npm-run-all package: npm install npm-run-all --save-dev 

4. Define a combined script: 

{ 
  "parallel-tasks": "npm-run-all --parallel task1 task2" 
} 

Best Practices for Writing Package JSON Scripts 

Front end developers and engineers must follow the below listed best practices in order to deliver highly maintainable, readable and bug free code: 

• Keep it simple: Break down complex tasks into smaller scripts. 
• Meaningful names: Use descriptive names to understand script's purpose. 
• Avoid hardcoding: Store paths and values in environment variables. 
• Use dependencies: Let NPM handle installation instead of scripts. 
• Modularize scripts: Extract reusable logic into separate functions. 
• Handle errors: Exit gracefully on failures for clear feedback. 
• Document it: Add comments explaining what each script does. 
• Pre/post scripts: Utilize them for setup/cleanup before/after main scripts. 
• Test our scripts: Ensure they behave as expected in different scenarios. 
• Review and refine: Regularly maintain and improve our scripts. 

By following these tips, we’ll write clean, efficient, and maintainable scripts that benefit our development workflow. 

Conclusion

Checking out this concise introduction to the principles around npm scripts should help you in your development workflow and make it easier to evaluate the package.json scripts you come across. Hopefully, you will revisit this post when you begin developing your own scripts. If you have any further questions, I recommend you look through the FAQs below or check out npm's well-written documentation, starting with the npm CLI docs. 

You can reinforce your resume as a full-stack developer by pursuing courses like Full Stack Software Development Bootcamp and AI Powered FSD Course by IIITB. These courses impart the in-demand full-stack development skills that help you explore outstanding job opportunities like full-stack developer, frontend developer, backend developer, and UI developer.

Boost your software engineering skills with our top programs. Explore the courses below to find the right fit

Master in-demand software skills with our specialized courses. Explore your options below to upskill today