What is package.json and how to change it

What is Package.json:

All npm packages contain a file, usually in the project root, called package. json - this file holds various metadata relevant to the project, like sites name, version, and all the dependencies needed to setup the site at first.

How to write Package.json:

Here is a demo package.json file for a React Native App:

{
    "name""AkijFood",
    "version""0.0.1",
    "private"true,
    "scripts": {
        "start""react-native start",
        "test""jest",
        "lint""eslint ."
    },
    "dependencies": {
        "@react-native-community/netinfo""^4.3.3",
        "axios""^0.19.0",
        "react""16.8.6",
        "react-native""0.60.5",
        "react-native-elements""^1.2.0",
        "react-native-firebase""^5.5.6",
        "react-native-linear-gradient""^2.5.6",
        "react-native-magic-move""^0.6.6",
        "react-native-modal""^11.4.0",
        "react-native-numeric-input""^1.8.3",
        "react-native-router-flux""^4.0.6",
        "react-native-shadow""^1.2.2",
        "react-native-sqlite-storage""^4.1.0",
        "react-native-svg""^9.9.4",
        "react-native-svg-uri""^1.2.3",
        "react-native-vector-icons""^6.6.0",
        "react-redux""^7.1.1",
        "redux""^4.0.4",
        "redux-thunk""^2.3.0",
        "sqlite3""^4.1.0"
    },
    "devDependencies": {
        "@babel/core""^7.6.0",
        "@babel/runtime""^7.6.0",
        "@react-native-community/eslint-config""^0.0.5",
        "babel-jest""^24.9.0",
        "eslint""^6.4.0",
        "jest""^24.9.0",
        "metro-react-native-babel-preset""^0.56.0",
        "react-test-renderer""16.8.6"
    },
    "jest": {
        "preset""react-native"
    },
    "rnpm": {
        "assets": [
            "./assets/fonts/"
        ]
    }
}



All your external or packages will be bind in dependencies object.

So, let's see what's inside the package.json one by one.

In the first line of the package.json
"name""AkijFood",
This name is our app/website name in node application. In this case it's name is AkijFood.

In the next line of this package.json - 
"version""0.0.1"
This is the version specified of our app which is 0.0.1. We can change it to 1.0.0 or whatever we want. Initially the package.json stays to 0.0.1

Next important part is scripts section - 
    "scripts": {
        "start""react-native start",
        "test""jest",
        "lint""eslint ."
    },

This scripts section is responsible to initilize or run the project. Like in my case, inside the scripts, there is a start command. 
whenever we run this command - npm start
It will execute the commands - npm react-native start.
So, we can change the start as our necessary. As for example, for an express js project, we can set that to different based on express server running process documentation.

Next and most important section is dependencies.

"dependencies": {
// All of dependency link
}
.
In our real project it looks like this -


    "dependencies": {
        "@react-native-community/netinfo""^4.3.3",
        "axios""^0.19.0",
        "react""16.8.6",
        "react-native""0.60.5",
        "react-native-elements""^1.2.0",
        "react-native-firebase""^5.5.6",
        "react-native-linear-gradient""^2.5.6",
        "react-native-magic-move""^0.6.6",
        "react-native-modal""^11.4.0",
        "react-native-numeric-input""^1.8.3",
        "react-native-router-flux""^4.0.6",
        "react-native-shadow""^1.2.2",
        "react-native-sqlite-storage""^4.1.0",
        "react-native-svg""^9.9.4",
        "react-native-svg-uri""^1.2.3",
        "react-native-vector-icons""^6.6.0",
        "react-redux""^7.1.1",
        "redux""^4.0.4",
        "redux-thunk""^2.3.0",
        "sqlite3""^4.1.0"
    },

Where, we've imported all of our scripts necessary to run this project. This packages installed when we run the commands - npm install or npm i .




how to write package.json



What is package.json and how to change it What is package.json and how to change it Reviewed by Maniruzzaman Akash on January 19, 2020 Rating: 5

No comments:

Powered by Blogger.