What is NPM, and why do we need it? | Tutorial for beginners

hey everyone this video on npm is from my  course that I'm creating, Responsive Design   for Beginners. you can find more info about  the course linked down in the description   all right let's get into the video   okay so why do we need npm for this course  specifically the main reason is because we're   writing our styles in a CSS preprocessor called  Sass. Sass is widely used because you can write   your styles more quickly and efficiently than  pure CSS the only problem is that Sass files   themselves are not readable by the browser so  we need to compile or convert them into CSS   in a real-world development environment you would  normally use some type of build tool to do the   conversion for you in our case we will be using  Gulp and we need to use npm to install and run   Gulp for our workflow npm is a huge part of the  JavaScript ecosystem these days so it's definitely   a good skill set to have what is npm npm is a main  package manager for node js is a huge repository   of mostly open source software and it can be  used by anyone for free but why do we need npm   well let's say you want to build a car now you  could try to make every single part of the car   yourself but that would be very involved  you'd be mining the metal on the ground   melting and casting it and using an anvil  and hammer to form it into the right shapes   all while trying to not set yourself on fire it  would take a very long time and be quite expensive   most people who want to build a car won't go that  route instead they'll start by getting all the   pre-built parts they need and assembling  those parts into a complete working car   in the same way npm makes writing code easier  because you can rely on pre-built code that other   people have written you can use their code for  your own projects instead of getting bogged down   writing everything yourself authors will write  the code for their package and publish it on the   npm registry then if you want to use that package  you can install it onto your own computer with the   npm cli or command line interface there are all  kinds of packages from small single purpose ones   to large libraries for example chalk a small  package that weighs in at just 26 kilobytes   lets you set different colors in your console log  messages then you have frameworks like tailwind   CSS that you can use to build websites  which is much larger at over 30 megabytes   to use npm on your own computer you'll first  have to install node.js the JavaScript runtime   environment the easiest way to install node is  to go to the website nodejs.org and download the   version for your operating system when you run the  installer it'll install node and npm at the same   time you can check that everything was installed  by opening your terminal and running node-v   and then npm-v each of those commands should  return the version number that's been installed so   which packages should you install there are over a  million packages on npm but how do you know which   ones you actually need a lot of it will depend  on what tech stack you are using in your project   for example if you're starting a new vue.js  project you'll need a build tool like webpack   or snowpack and for our purposes we're using gulp  to compile our sass files so we'll need to install   a bunch of gulp and sass related packages it is  a little bit like the wild west in that there's   no 100 right combination of packages for every  single person it'll depend on what tools and   frameworks you're using and your own preferences  if you're not sure which packages you need you can   always follow a good tutorial on the framework  that you're using or in this case this course   now that we have node and npm installed how do  you go about actually installing npm packages   first there are two ways of installing packages  locally and globally generally you'll want   to install packages locally in the project  folder that you want to use the package for   this ensures that when you deploy your project  it'll include all the necessary packages   installing a package locally means that it  will only be accessible from that specific   project folder if you have other projects each  one will have its own set of local packages   to install a local package you'll use the npm  cli in your terminal type in npm install and   the name of the package you want for example  to install the chalk package navigate in your   terminal to the project folder and type in  npm install chalk while most packages should   be installed locally like this some packages can  and should be installed globally on your computer   this means that the package functions  will be accessible from any directory   usually you will only globally install packages  that are meant to be run on your command line   in any directory the gulp cli is one example  of this as it will run gulp when you type gulp   into your command line from any location  to install a package globally type in   npm install g and the package name for example  npm install g gulp cli to install the gulp cli   now that we've covered the basics of installing  packages let's look at the package json file if   you're using multiple packages in your project one  way to keep track of which ones you have installed   is the package.json file it can also store  information about your projects like the name   version author and github repo the package.json  file is super useful especially if other people   want to clone your project and need all the  specific packages that you used they can use   the package json file to install all of them all  at once if they run npm install in a folder that   has a package json file npm will read the file and  automatically install all the packages listed this   comes in handy with deployments too as the server  can install the packages right when you deploy   when you're developing a project one of the first  things you should do is create your package.json   file you can do this through npm by running npm  init on your command line in your project folder   npm will ask you some questions about  your project like the name and description   and then create the json file and if you don't  want to answer the questions manually on install   you can also run npm init-y this will make  npm immediately create the file and set all   the fields to a default value and you can  always change the information in the future once you've created your package.json file  you can now start installing packages but   what does installing a package actually do on your  computer let's say you have a brand spanking new   project and you need the chalk package you type  in npm install chalk and npm starts installing it   when it's done you can see in your package.json  file that chalk is now listed as a dependency   what this means is that you're going to be using  functions from a chalk package in your code   and if you didn't have it something would  probably break now if you look in your files you   will notice that a new folder called node modules  has been created this is where npm stores all the   package files that get installed in this folder  you can see one folder for chalk which makes sense   but there's also a bunch of other folders  with different names why did npm install all   those other packages in addition to chalk well  this is because of the dependency nature of npm   you're installing npm packages in your  project to use other people's code   making your project dependent on those packages  and each of those packages is also using code   from even other packages in our node_modules  folder those other folders are for packages   that chalk is dependent on you can actually  see this in the chalk package json file as it   has the ansi styles and supports color packages  listed as dependencies then if you look at the   package.json file for ansi styles you'll see  color convert listed as a dependency for that   and color convert is dependent on color name the  supports color package is dependent on the has   flag package and that's all the packages in our  node_modules folder you can also run npm list in   your project folder to quickly display a list of  all installed packages and what version they are   keep in mind chalk is a relatively small package  itself just imagine how many dependencies larger   packages like webpack or tailwind might  require and you can start to understand   why the node modules folder is often referred  to as the densest matter in the known universe   one other really important aspect of npm is  package versioning like most software npm packages   will get updated over time to fix bugs and roll  out new features sounds good right well these   updates are actually one of the biggest sources  of headaches when working with npm packages   this is because every package has its own author  and so will get bug fixes and updates independent   from other packages but because packages are so  dependent on one another this can sometimes cause   conflicts and errors for you it's important  to understand how versioning works and how   to update safely so that you don't break stuff  when you do update packages that you're using   so how does versioning and updating work in npm if  we type npm view chalk versions into the terminal   it'll return a list of all the versions of  chalk from the beginning for more details   on each version you can also check out the  release page of the packages github repository   the numbers in the package versions may seem  a little bit confusing or random at first   the first public release is generally version  1.0.0 and each release after that will continue   going up in number but the way these numbers  increment isn't quite the same as decimal numbers   this is because npm packages follow semantic  versioning semantic versioning is a system of   numbering software versions with each number  containing three digits separated by a dot   the first digit is the major version second  digit is a minor version and the last digit   is the patch version major version updates occur  when changes are big and not backwards compatible   this means that updating to this new version from  an older version will most likely break any code   that depends on the old version for example  when shock moved from version 2 to version 3   it removed a property called enabled and replaced  it with a new property level so any code using   chalk version 2 would have to migrate to this new  syntax in order to be compatible with version 3.   minor version changes on the other hand are for  new features that are backwards compatible and   won't break anything when you change it ideally  and patch updates are for small bug fixes that   also won't break anything when a new version is  released the digits to the right will reset back   to zero for example if the current version is  1.9.15 and the next update is a major one the   major number will change to 2 and then the minor  and patch numbers will reset to 0 so the new   version will be 2.0.0 alternatively if the next  update from 1.9.15 is a minor one the minor number   would go up to 10 and the patch number would reset  to zero with the final version number being 1.10.0   and that's another quirk of semantic versioning  unlike regular decimal numbers which range from   zero to nine there aren't really any limits to  how high each digit could go so you could very   well have a version number of 3.28.45 so with all  these different versions of packages how do you   update a package that you've already installed  when you first install an npm package locally   npm will install the newest public release over  time you may want to update those packages to get   the newest bug fixes and features however you  need to be careful that you don't accidentally   update to a new major version that could break  your code fortunately npm has some safeguards   in place that will help you have more control  over what versions you update to by default   in your package.json file when you install  a package npm will save the specific version   number that you have installed now what's that  caret symbol in front of the version number   this and a few other symbols are what npm uses to  limit what versions it'll automatically update to   the carrot symbol will update the package to the  latest miner and patch version for the currently   installed major version this is a default symbol  that npm will prefix the version number with when   it installs packages this means that if a new  miner or patch version of chalk gets released   if you run npm update in the project folder you'll  get that new version however if chalk version   5.0.0 gets released this command won't install  that version so let's say version 5 does come   out and you want to update chalk you can manually  update to the newest version in the command line   by running npm install chalk at latest you can  also specify a version number with npm installed   chalk at 5 to install version 5. this also works  if you need to install an older version of the   package if you run npm install chalk at two  it'll install the latest major version of two   this is sometimes necessary if the latest version  of a dependent package isn't compatible with other   dependencies aside from the caret symbol you  can also use the tilde symbol to limit updates   to patches within the current minor version  so if you had chalk version 2.2.0 installed   and wanted to update to the latest patch within  2.2 you could run npm install chalk at tilda 2.2 now when you're installing packages you may have  noticed that npm creates a package lock json file   this file records the actual specific versions  of each package and dependency that you have   installed on your local computer the reason this  file exists is because of compatibility issues   that can arise when using a package.json file from  a different environment let's say you've cloned   a github repo that has a package.json file and  you run npm install to install all the packages   to your own computer however remember the caret  symbol that npm prefixes each package version in   if a dependent package has been updated between  the time the package json file was created by   the original author and when you run it  on your on computer you could actually be   installing a different miner and patch version  than what was used in the original repository   and if the newer version has compatibility issues  with other dependent packages that you're using it   could potentially break your project this is the  problem that the package lock json file solves   if you run npm install and there is a package lock  json file in addition to the package json file   npm will install the exact major miner and patch  versions recorded in the package lock json file   this ensures that the packages in your  local environment will exactly match the   original authors and that's npm in a nutshell  if you're interested in learning how to build a   responsive website from scratch with HTML SCSS and  JavaScript you can sign up for email updates and   be the first to find out when it launches thanks  for watching and we'll see you in the next one

Channel: Coder Coder

Views: 42,583

Keywords: npm, what is npm, web development

Id: P3aKRdUyr0s

Length: 14min 26sec (866 seconds)

Published: Mon Jun 21 2021