NPM basics and fundamentals

what is npm?

It stands for node package manager.

It's essentially just a JavaScript package manager.

Modules are basically just JavaScript libraries.

So you can install bootstrap as a package jQuery lodash just about every popular library or framework or script .

That's available is available with NPM.

Alright and this makes it very easy to share and reuse code alright.

How can I use npm?

NPM is primarily used with Node.js, which is a JavaScript runtime built on Chrome's V8 JavaScript engine.
So if you want to use NPM,you have to nodeJs installed,if you don't have it installed already

just go to nodeJs org go ahead and download it.
node 下载地址

How can I find the packages?

npm packages search
this is basically the repository for NPM modules,so if we want to search for something like let's say Express which is a web framework and we click on Express you'll see it'll take us to that documentation page which resembles the github page.

It shows you how to install it gives you some examples some documentation it even has the github link over here.

How can I know my npm version?

we're gonna do is look at the version of NPM we can do that with

npm -v
//or
npm --version

Creating a package.json File

the package.json file is probably the most important file in the whole nodejs JavaScript world.

It's a manifest file that has all of your application info like its name its version author etc.

But that's not the most important part the most important thing is that it holds all of your applications dependencies and what I mean by dependency is the modules that it needs to work. So if your application runs on Express then you need to define in this file that it uses Express. You'll want it in listed in the package.json, so that if you deploy your app or if you move it somewhere.
It knows that it needs to use Express and not only does it list the name of the dependencies but also the specific versions that it uses. Because if it has the wrong version then excuse me things may break.

To create a package.json file, you can use the npm init command in your project directory. Here's how you can do it:

1. Create a Directory for Your Project:

mkdir my-project
cd my-project

2. Initialize the Project:

npm init
//or
npm init -y
//npm init -yes

The -y flag automatically accepts the default values for the prompts, creating a basic package.json file.

It's going to accept the defaults.

what if I want to add my name or change the license or something like?

To add your name or change the license in a package.json file for a Node.js project, you can use the command line tools provided by Node Package Manager (npm). Here’s how you can do it:

Example Command:

npm config set init-author-name "Your Full Name"

Changing the License

To change the license in the package.json, you can use the npm set command as well.

Example Command:

npm config set init-license "MIT"

This will set the license to MIT. You can replace "MIT" with the name of the license you want to use.

Alright so it doesn't give us any response or anything back, but it does in fact change the default for for the author and the license.

Let's first delete this package.json file and then we're gonna run

npm init -y

But when you use npm init -y to regenerate the package.json file, it sets up a basic configuration with default values. The npm init -y command does not preserve the existing dependencies in the package.json file. When you delete the package.json file and then run npm init -y, all the previous dependencies are lost.

However, if you notice that the dependencies section in the newly created package.json file has additional packages that were not there before, it's likely because you have installed some global or local packages that are added to the dependencies when npm init -y is run.

These configurations are useful when you want to automate certain aspects of your package initialization process or set up common values that apply across multiple projects. For instance, if you always use the MIT license for your projects, setting init-license to "MIT" means you won't need to specify the license every time you initialize a new project.

check the current configuration status using

npm config get init-license

How can I delete my name or change the license or something like?

npm config delete init-author-name "Your Full Name"
npm config delete init-license "ISC"

How can I install a module?

npm install lodash --save

There's one very important flag that we need here and that's -- save and what that does is it saves it to our package.json as a dependency. So that that's basically the most important part of this file and if we don't use -- save,it will get installed it'll create a node modules folder and install it but it won't get added to this file so we want to want to make sure that we have that flag.

you also have something called dev dependencies and you want to solve something as a dev dependency if it's only gonna be used for development okay you're not going to need it in production.

You can use

npm install gulp --save-dev

If I reload this now also notice that there is now a ton of in this node modules folder. The reason for that is because gulp has a ton of its own dependencies. So the node modules folder isn't only going to be your dependencies. It's not going to be just this stuff. It's gonna be any dependencies that any of these have so this gets huge and you can see why you don't want to package your application with this folder. because it gets humongous depending on how big your application is and how much.

If we use npm install ,it's going to install all of our regular dependencies plus the dev dependencies.

But if we want to apply --production, if we applied this flag what it's gonna do is it's only going to install the regular dependencies.

why I use npm install lodash without the --save flag, lodash still appears in the dependencies section?

If you use npm install lodash without the --save flag, theoretically lodash should not be added to the dependencies section of the package.json file. However, if lodash still appears in the dependencies section, this could be due to several reasons:

1. Previous Installation:

• • You may have previously installed lodash using npm install lodash --save, which added lodash to the dependencies section. Even after using npm install lodash, lodash remains in the dependencies section because npm install lodash alone does not remove existing dependencies.

1. Indirectly Added by Other Dependencies:

• • Another direct dependency in your project might require lodash. In this case, when you run npm install, lodash is installed as a transitive dependency. If it was already present in the dependencies section, it will remain there.

1. Manual Editing of package.json:

• • Someone may have manually edited the package.json file to add lodash to the dependencies section.

1. Commands Executed After npm install:

• • You may have executed other commands after npm install lodash, such as npm install lodash --save or manually edited the package.json file.

To confirm whether lodash is a direct dependency or a transitive one, you can check the package.json file.

If you want to ensure that lodash is not added as a direct dependency, you can try the following steps:

1. Inspect package.json:

• • Open the package.json file and check the dependencies section to confirm if lodash is present.

1. Manually Remove lodash:

• • If lodash exists in the dependencies section, you can manually remove it from the dependencies object and then run npm install to update the package-lock.json file.

1. Use npm uninstall:

• • You can use npm uninstall lodash --save to remove lodash from the dependencies section.

1. Inspect package-lock.json:

• • After running npm install, inspect the package-lock.json file to understand the source of lodash. It may appear as a transitive dependency.

1. Check the Dependency Tree:

• • Use the npm ls lodash command to view the dependency tree for lodash and find out which direct dependencies require lodash.

1. Update or Uninstall Direct Dependencies:

• • If you find direct dependencies that require lodash, consider updating or uninstalling those dependencies to address the indirect inclusion of lodash.

If you find that lodash is still incorrectly added to the dependencies section, you can try manually editing the package.json file to remove lodash, followed by running npm install. If lodash is still installed as a transitive dependency, it will not affect the package.json file.

How to uninstalling or removing dependencies?

npm rm <package>
npm uninstall <package>

# To remove gulp without modifying package.json
npm uninstall gulp

# To remove gulp and update package.json
npm uninstall gulp --save

# To remove gulp as a devDependency and update package.json
npm uninstall gulp --save-dev

How to update to the latest version or an earlier version ?

//update an earlier version
npm install lodash@4.17.3 --save
//update to the latest version
npm install lodash

When we install a package or a module when we look inside the package.json at the version numbers ,How do I know what meaning like "lodash":"^4.17.4" ?

"lodash":"^4.17.4" They're always in this this format so we have three three numbers separated by dots in between. So basically each of these has a meaning.
So this last one "lodash":"^4.17.4" ,this is the patch version,so what that means is that this is when when there's some kind of bug when there's something wrong and they fix it or a couple bugs and they fix them.They're gonna increase this. This isn't going to break anything on your on your in your application.If you upgrade to the next patch version. It's not going to break anything.it's gonna fix you know fix some issues at least.

"lodash":"^4.17.4", we have the minor version, which is the middle one so for the minor version. They may add some new features.So maybe there's some new features to the application but it's not gonna break your application. Your syntax should be safe, you should be able to upgrade that version without having to have any worries.

"lodash":"^4.17.4", the major version means that applies breaking changes.So if you upgrade,whatever your application is probably going to break and you're gonna have to go look at the new documentation and then upgrade your application. You're gonna have to upgrade your syntax to match the new version.

"lodash":"^4.17.4", this caret symbol ^, it's going to installthe latest minor version.So if there's been an update and there's now 4.18.0 or something like that.

"lodash":"~4.17.4", if we were to put a tilde here like this ~,it's gonna say to keep this minor version and only update the patch version.

what is the global modules meaning?

A good example of a global module would be something like node Mon. node Mon is a module that can continuously watch your applications so that you don't have to keep restarting it. Every time you edit It .So every time you save,it'll watch it it'll restart it .It's not going to go inside of our

package.json , it's being installed on our actual machine now if you want to know where this is being installed. There's actually a command that can show you where your global modules go

npm root -g 
//output: /home/u1/.nvm/versions/node/v16.18.0/lib/node_modules
npm install live-server -g
npm remove live-server -g

How can I list the packages in my project?

npm list
//all of
npm list --depth 0
//the top level
npm list --depth <num>

How to describe a scripts object function in simple words atpackage.json?

The scripts object in package.json allows you to define named commands that can be executed using npm. These commands can simplify common tasks in your development workflow, making it easier to run tests, start servers, and more.