NPM

Most developers would have come across this term at some point in time and they would have got to know it as Node Package Manager(NPM), but do you know NPM official website does not call it the Node Package Manager rather the NPM community gives it many funny names like 'Need Paper Mache' ,' Nuclear Powered Macros', etc.

What !!! were we still calling it Node Package Manager?
Check the top left-hand corner of the NPM website and when you click on it you can see many full forms for NPM. Though it's a fun fact about the full-form controversy so let's leave it to you to explore.

NPM is a software registry from where we can download javascript modules that are used as dependencies mentioned in package.json.

What is Parcel**?**
It's a web bundler that provides support for various languages like javascript, typescript etc.
It provides a build developer server for the development and production environment. It's needed because it handles a lot of extra tasks which might have to be taken off while developing a web app. Some of its core features are:-

• HMR(Hot Module Replacement): Parcel takes care of any dynamic changes done during development to update automatically without rebuilding the project and deployment.
  HMR in Parcel uses File watching Algorithm which is written in Native C++.

• Different Browser Support: Parcel provides the facility to use the list of browsers in which we can specify which browser will support the Web app we are developing using the parcel.

• Diagnostic: Provides proper message when something breaks in the web app.

• HTTPS support: Parcel gives HTTPS support and also support for the certification and key for security

• Tree Shaking Algorithm/ Dead code Elimination Algorithm: Parcel uses a tree-shaking algorithm to increase the performance of the web app.

There are many such advantages to using a web bundler as it makes the life of the developer easy.

What is Parcel .cache?

The .cache folder (or .parcel-cache in parcel v2) stores information about your project when the parcel builds it so that when it rebuilds, it doesn't have to re-parse and re-analyze everything from scratch. It's a key reason why parcels can be so fast in development mode.

What is NPX?

It stands for Node Package Execute it is simply an NPM package runner which allows the developer to execute any Javascript Package available on the NPM registry without installing it. Sometimes a developer wants just to look at a specific package and try out commands without installing it so here npx comes in handy.

Dependencies

In a web application project, package.json contains all the dependencies with their version number in the file.
If the project is missing the file you can create it using the command :

npm init -y

So when you install any library in your project its dependencies get added in the node_module.

npm install <package name>

devDependencies

In the package.json file, there is an object called dev Dependencies and it consists of all the packages that are used in the project in its development phase and not in the production or testing environment with its version number. So, whenever you want to install any library that is required only in your development phase then you can find it in the dev Dependencies object.

npm install <package name> --save-dev

Tree Shaking Algorithm

Tree Shaking Algorithm is commonly used in JavaScript context to describe dead code. It uses the import and export statement to detect if the code modules are exported and imported for use in JavaScript files.

We can intentionally tell web bundlers that a function call is side-effect-free by using the /#__PURE__*/ annotation. It can be used in a minimizer for the optimization of code.

/*#__PURE__*/ double(55);

You can explore more about the Tree Shaking algorithm from the web pack documentation.

I hope I was able to add some new things to your knowledge base. Thanks for reading the article.