ReactJS: Understanding package.json
package.json is used to store the metadata associated with the project as well as to store the list of dependency packages. In order to add dependency packages to your projects, you need to create package.json file. The file makes it easy for others to manage and install the packages associated with the project.
A package.json file:
- lists the packages your project depends on
- specifies versions of a package that your project can use.
- makes your build reproducible, and therefore easier to share with other developers.
A package.json file may look similar to this:
This file outlines all the settings for the React app.
Each of the attributes in the file has its importance in some way or the other. Where some of these are basic and clear from their names, some are not. This article is aimed at simplifying and developing a better understanding of the same.
nameis the name of your app, which you give while executing
create-react-app<name-of-application>. You can give any name of your choice to the app, the only condition being is that it should be in lowercase. It may also contain hyphens and underscores.
versionis the current version of your app. The version field must be of the form x.x.x. By default, create-react-app initializes it as 0.1.0
"private": trueis one of the most crucial attributes. The use is that if you set private as true in your package.json, then npm will refuse to publish it within npm ecosystem. This is a way to prevent the accidental publication of private repositories.
dependenciescontains all the required node modules and versions required for the application in production. In the snapshot above, it contains three dependencies, which allows us to use
react-scriptsprovide a set of useful development scripts for working with React.
In the screenshot above, the react version is specified as
^16.6.3, which means that npm will install the most recent major version matching
16.x.x. In contrast if you see something like
~5.6.7 in package.json, it means that it will install the most recent minor version matching
In order to add a package under
dependencies, while installing, use
npm install <package-name> --save
This lists the package by default under
dependecies with its version number.
devDependenciesthough is not there in the screenshot above, forms an important part of package.json. It lists out the packages required for development and testing.
In order to add a package to this list, while installing, use
npm install <package-name> --save-dev
This way, it is added to the list of
scriptsspecifies aliases that you can use to access some of the react-scripts commands in a more efficient manner. For example, running
npm startin your command line will run
react-scripts startbehind the scenes. Similar is true for other attributes:
create-react-app takes care of all the basic scripts for these operations. If not using it, you need to write of your own.
There can be other scripts as well, such as
deploy, etc. Each has their own set of commands.
For example, when using
gh-pages, you can write
“deploy”: “gh-pages -d build”
Here the command specifies which branch and directory to deploy.
The above set of attributes form the basic set of attributes for package.json file of a basic React application. There can be other attributes as well, for example,
homepagespecifies the url to your project homepage. This becomes handy in react applications, when you use
gh-pages, where it deploys your build directory to your homepage.
repositoryspecifies the location of the code for your project. This is helpful for people who want to contribute.
licenseYou should specify a license for your project so that people know how they are permitted to use it, and any restrictions you’re placing on it.
The screenshot shown above also contains two more attributes,
browserslist. Both of these are node modules having their own set of values. They have been recently added to
create-react-app. On one hand, where
browserslist provides information about browser compatibility of the app,
eslintConfig takes care of the code linting. For more information, please refer browserslist and eslintConfig