Web Design Agency Bradford

Whether you are working on a small or large front-end project, managing your package.json file is really important. Done right, your package.json file will describe the project and be the starting point to getting started, without wasting time reading out of date documentation.

Here are a couple of tips and tricks to make sure that your package.json file is clean and useful.

Setup additional properties. (top 5)

If you setup your project with npm cli, you will likely only have the basic properties defined (name, version, licence, dependencies). But there are many more that you can setup which will really help other contributors on your project;

Description: “ ”

A simple description goes a long way and will help people using npm search to find your project.

description: "**This is a blog to improve your NPM package.json file**"

Keywords: []

Put keywords in it. It’s an array of strings. This helps people discover your package as it’s listed when developers use npm search

keywords: [“package json”, “cleaner”, “optimise”]

Contributors: []

Adding the project contributors is an excellent way of telling people who are responsible for the project and how to get in touch.

contributors: [  
    “Phillip Whitaker <contact@averment.digital> (https://averment.digital)"  
]

Config: {}

The config property is an object and can be used to set configuration parameters used in package scripts that persist across upgrades. This is really useful when running frameworks such as Angular, React as it allows contributors who might not be familiar with the framework to quickly change primary configuration.

"config" : { "port" : "8080" }

Bugs: {} or “ ”

The bug property allows you to direct people to your issue tracker. It is helpful for people who encounter issues with your package. The bug property can either be an object or just a string when only supplying the URL.

bug: {  
    "url" : "https://averment.digital",   
    "email" : "contact@averment.digital"  
}

Cleanup your package.json scripts

The scripts property define a list of operations. In small projects you will usually find a handful; test, run & linting. In larger projects, the npm scripts can get into a mess. Here are four tips to clean them up.

1. Organise similar commands
2. Use colon separated names rather than hyphenated ones.
3. Create base commands and reuse them with the other commands
4. Order commands in logical order, development scripts first, production/ci scripts last."scripts": { "build-uat": "ng build --uat", "start-prod": "ng serve --port 4200 --prod --aot=true --sourceMap=true", "build": "ng build", "build-prod": "ng build --prod", "lint": "eslint -c .eslintrc", "lint-fix": "eslint -c .eslintrc --fix", "test": "ng test", "start": "ng serve --port 4200 --aot=true --sourceMap=true", "start-dev": "ng serve --port 4200 --dev --aot=true --sourceMap=true", } original"scripts": { "start": "ng serve --port 4200 --aot=true --sourceMap=true", "start:production": "npm run start -- --prod", "start:dev": "npm run start -- --dev", "build": "ng build", "build:production": "npm run build -- --prod", "build:uat": "npm run build -- --uat", "lint": "eslint -c .eslintrc", "lint:fix": "npm run lint --fix", "test": "npm run build & npm run lint & jest --color", "test:features": "npm run test ./features", "production:test": "npm run lint && npm run test" } refactored

NPM Commands to start using (top 5)

— production

Okay, so the first one is not actually a new command, it is a flag. The production flag tells the install command that you are building for a production build and it will ignore your devDependancies. Ensuring that those packages do not get installed.

npm install --production

— prune

This command will remove packages that are not listed in your package.json file. This is really useful when you have been trying out a couple of different libraries and you have removed the ones you don’t want from your package.json file. This command will ensure that they are no longer locally installed.

npm prune

— dry-run

Sorry, another flag rather than a command. But a really useful one! This flag can be added to any npm command and will log to the terminal like normal, but will do nothing. Great with the prune command above if you want to know what it will remove.

npm install --dry-install

— outdated

A quick and easy way to know whether your packages are up to date. This command will check the registry to see if any (or, specific) installed packages are currently outdated.

npm outdated

— shrinkwrap

This command will generate a file npm-shrinkwrap.json file which lists out the current versions of packages installed like your package-lock.json file. But this file takes precedence. With this file, when you run npm install it will override the listed dependencies in the package.json. In most cases you wont need it. But if you are having problems with unstable packages / dependencies it is a great way of locking down versions.

npm shrinkwrap

@AvermentDigital on Twitter, Facebook and Instagram