what is npm stands for?

So there is always a debate that NPM stands for node package manager but this is not true it is not specified by the NPM official docks that it stands for Node package manager even though they make fun of it to give a random name.

what parcel or any bundler do?

The parcel is like a bundler that makes a bundle of your code and makes it production ready

About Parcel

Parcel support many languages like TypeScript, Javascript, SASS, React.js, and many others. It also handles files like images and fonts and optimizes them.

Parcel builds an environment in the local machine so that we can run out an app in the local host it uses Hot Module Replacement.

Parcel also checks your code so that it finds out the error for this it uses a file watcher algorithm that is written in C++.

The first time when parcel installs everything new, it might take some time but after that, it uses a .parcel_cache file so that next time it makes things quicker it uses a consistent hashing algorithm for that.

The parcel also manages your port number if you run two projects into a single machine it automatically detects it and manages your port number accordingly.

The parcel is easy you just install it and give an entry point to it, it automatically configures things like going to HTML reading all the code minifying it you can give a starting point.

npm parcel index.html

NodeModule

The node module is like a database for your NPM everything that you install via an npm that stored in the Node module.

You should not include the node module in your GitHub repo because it is very huge in size and actually, you don't need to upload that into your repo because everything in the node module can be reinstalled by the user via the help of package-lock.json this stores all the versions that are used in the project and those can be reinstall just with the command npm install or npm i both are the same thing.

package-lock.json

so in every project, there is a lock.json file this file work as a recorder it has all version that you are using in your project as you know you don't need to carry the node module file so lock.json helps you to install the right version that you used in the project.

package.json

package.json file is something that manages what you need for devDependencies and what you need for Dependencies this thing will describe further it also holds metadata related to the project.

So many times you have seen this sign ^ it is called Caret

it makes sure that if in the future there is any updated version came so your version automatically updates but it works for the smaller version

there is another sign ` tilde it also has the same functionality but it works for any version update and can be bigger or smaller.

what is the dist file do in the project

as you saw dist file in your project also have some functionality like

it makes our code clean
it makes running code faster
dev and production building
minify our code

Browser List

it is a functionality that makes sure that in which browser your code should run or in which not you can specify in a way


["Lst 2 Chrome Version"]
// That means app will work definitely to tha last 2 version of the chrome and means that expect these version app will not work

This is a thing that you should never use because you don't want to restrict your web app to some browser.

Aman