package.json is needed to tell your computer what dependencys are installed, what devDependencys are installed and other stats.
A typical package.jsons first line is { and its last line is }.
JSON uses the same indentation as HTML(2 spaces or tabs per indent).
The first thing to start a package.json after the {} will be the name. This can be done in one line: "name": "ProjectName"
If you are publishing an NPM its name will be the name in package.json this is why it is required.
If the package.json only had a name this is how it looks:
{
"name": "ProjectNameHere"
}
Next is the version It is recommended to follow the SemVer versioning. This typicaly follows Major.Minor.Patch
Patch is for bug fixes or README.md edits.
Minor is for nonbreaking changes.
Major is for breaking changes.
You can also follow Major.Minor.Patch-label
This means you can do "version": "1.0.0-beta"
Next is to include the Dependencys(Packages the project is dependent on)
Dependencys typicaly are multi-line:
{
"dependencys": {
"YourDependencyName": "DependencyVersion",
"YourDependencyName": "DependencyVersion"
}
}
NOTE: You need the commas for two or more lines in the first {]
Now there are 4 ways you can use dependency versions:
- ^
- Updates the version for Minor and Patch updates but not Major
- ~
- Updates the version for Patch updates but not Minor or Major.
- >= and <=
- Updates the version name between a specified range or just >= or <= cap.
- No prefix to version name
- Updates the version for Major, Minor and Patch updates.
For no dependencys you should still include it but make it single line: "dependencys": {}.
The same works for devDependencies these are the dependencies used for development.
For example you can use Vite as a dev dependency.
If you dont have any you can type this line: "devDependencies": {}
You can also decide if you want the project to be private with "private": boolean
You will also need a json scripts: {} if you are using vite make sure to use:
{
"scripts": {
"dev": "vite",
"preview": "vite preview",
"build": "vite build"
}
}
For react projects using CRA(Create React App) instead of vite make sure to use react-scripts.
You will also need to have an "eject": string for CRA projects.
After all this, a minimal package.json with vite looks like:
{
"name": "ProjectName",
"version": "1.0.0",
"private": true,
"dependencys": {},
"devDependencys": {
"vite": "^7.3.1"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
}
}
If you have any questions, feel free to comment!
Top comments (0)