02Geek HTML5 and JavaScript, TypeScript, React, Flash, ActionScript online School
Previous VideoNext Video

Declaring NPM Packages with package.json

Declaring NPM Packages with package.json

In this tutorial, we will walk you through declaring NPM packages using the package.json file. The package.json file is the heart of any Node.js project, as it holds important information about the project and its dependencies. This tutorial, originally created in 2016, includes critical updates to ensure that you have all the current information you need.

Step 1: Understanding the package.json File

The package.json file is used to manage the metadata of a Node.js project, including the list of dependencies needed to run or develop the project. It contains information such as:

  • name: The name of your project.
  • version: The version of your project, typically in semantic versioning format (e.g., 1.0.0).
  • description: A brief description of the project.
  • dependencies: A list of packages required to run the application.
  • devDependencies: Packages required for development purposes only, such as testing libraries.
  • scripts: Custom scripts you can define and run using NPM (e.g., npm start).

Step 2: Initializing a package.json File

To create a new package.json file, you can use the npm init command:

npm init

This command will prompt you for information, such as the name and version of the project. After answering the prompts, a package.json file will be created in your project directory.

If you want to generate the package.json file without any prompts, you can use the -y flag:

npm init -y

This will create a package.json file with default values, which you can edit later.

Step 3: Adding Dependencies

Dependencies are packages that your project needs to run. You can add a dependency to your package.json file using the npm install command.

Example: Adding a Dependency

To add express as a dependency to your project, use the following command:

npm install express --save

The --save flag is used to add the package to the dependencies section of your package.json file. Starting from NPM version 5, --save is the default behavior, so you don’t need to include it explicitly.

Critical Update (2024): You no longer need to use the --save flag, as adding dependencies to package.json is the default behavior in the latest versions of NPM.

Step 4: Adding Development Dependencies

Development dependencies are packages required for developing the project but not for running it in production. To add a devDependency, use the --save-dev flag.

Example: Adding a Development Dependency

To add jest as a development dependency:

npm install jest --save-dev

This command will add jest to the devDependencies section of your package.json file. This is useful for tools like linters, testing libraries, and build tools that are only needed during development.

Step 5: Specifying Version Ranges

In the package.json file, you can specify the version of a package using semantic versioning:

  • ^1.0.0: Indicates compatibility with version 1.x.x. Any minor or patch updates are acceptable.
  • ~1.0.0: Indicates compatibility with version 1.0.x. Only patch updates are acceptable.
  • 1.0.0: Locks to version 1.0.0 exactly.

Understanding version ranges helps you manage dependencies more effectively, ensuring compatibility and stability for your projects.

Tip: Be cautious when using version ranges, as they may introduce breaking changes if not handled properly. Using lock files like package-lock.json can help ensure consistency across different environments.

Step 6: Running Scripts from package.json

In the scripts section of your package.json file, you can define custom commands to automate tasks.

Example: Adding a Start Script

To add a start script to run your application, modify the scripts section as follows:

"scripts": {
  "start": "node app.js"
}

You can then run your application using the command:

npm start

Conclusion

The package.json file is a powerful tool for managing your Node.js projects. It helps you declare and manage your project's dependencies, development tools, and scripts effectively. In this tutorial, you learned how to create a package.json file, add dependencies, set version ranges, and define scripts to streamline your workflow.

Keeping your package.json file well-organized will make your projects easier to maintain and share with other developers. Remember to use semantic versioning carefully, and take advantage of tools like package-lock.json to avoid unexpected issues with dependencies.

Video Transcript

00:01Now that we know really everything there is to know about
00:04how to install, uninstall,
00:05and update packages, it's time for us
00:08to take a deeper look into packages.
00:11'cause really when you're working in no js,
00:13what you're really doing is, is you're creating a package.
00:16You might share it with the world or not.
00:19By building it with a package, you're making it easier
00:22for you to move it around and share it with other people.
00:25If internally in your organization
00:28or globally to other people,
00:29you're basically declaring what's inside of your application
00:32and on what does it depend.
00:34So in this lecture, we're gonna learn how
00:36to configure a package
00:38and with it we're also gonna learn on how
00:40to define production dependencies, which is code
00:43that you're using from the external world
00:46that you depend on for your production.
00:49And also how do you define development dependencies
00:52that are dependencies that are only relevant when it's
00:54not in production.
00:56So let's jump right into it and let's see it in action.
01:00So far we've installed locally, globally,
01:03but one of the problems with our local installations is
01:07that we don't really have version management within it.
01:10Beyond that oso, if we wanna send our file onwards,
01:13we would have to send all of our modules with it,
01:16making the files bigger
01:18and making it harder for us to create some sort
01:21of management where we could define what are the modules
01:25that are used and into what version could we use them with.
01:28So to be able to solve that,
01:29and really one of the greatest additions into um,
01:33no JS in general
01:35and NPM is the capability to create a descriptor file,
01:39which is called package js o.
01:42And in it we'll describe our project
01:44and also de describe the dependencies
01:47of the different packages that we're going to use.
01:49So I'm gonna go ahead and just delete our nodes, example,
01:53our nodes modules to create an empty folder again.
01:57And I'm gonna go into my terminal
01:59and what I'm gonna do is I'm gonna type in the folder NPM in
02:03it for initializing.
02:05When I do this, what's gonna happen, it's gonna take me
02:07through an interview where I'm gonna go
02:10through step-by-step naming the name of my project.
02:13Um, I could only contain URL friendly character.
02:16So I'm gonna have to go ahead here.
02:17NPM sample
02:20and I'm gonna version, I'm fine with version one
02:23and I could describe it.
02:24This is a sample of working with NPM,
02:30um, our index, we're fine with that.
02:32We don't have a test command, we don't have a GI repository,
02:36uh, n pm maybe.
02:37And what else would we have here installing in it, how about
02:42that would be our keywords.
02:43Our author is me.
02:44So I'm gonna just type your Ben Fala, uh, license.
02:47I'm not gonna get into that at all at this stage.
02:49Everything here seems okay.
02:50So I'm gonna click on yes once I've done that.
02:54And as soon as I've done that,
02:56I've created a descriptor file,
02:58which you could open up in any editor.
03:00And once you do that, you're gonna see I'm gonna open up
03:03inside of my, um, sublime text
03:06and you can see that we have your a basic construct
03:08to the way packages, the package JS looks like.
03:12Don't worry about this error, this will only come we'll
03:14happen because if we're trying to run a test,
03:17it's gonna say, Hey, we don't have any tests.
03:19We didn't really create any. So this is the basic structure.
03:23Now that we have a basic structure that defines
03:26what our package is,
03:27I wanna just show you it's a few more steps involved here.
03:29How could you create this package quicker?
03:32So I'm just gonna go ahead here and I'm gonna go into
03:35and delete my package here.
03:38And instead of that I'm gonna go into terminal.
03:40And this time around I'm gonna run the same command,
03:43setting it with a marker of yes, by doing this,
03:47it's gonna run automatically
03:48and create the names that it needs to.
03:51Only problem is, is that we set our folder name
03:54to be a folder structure
03:55that is not valid in HTML is not a valid path name.
04:00So I could go ahead there into my finder.
04:02And how about I'm gonna just delete this again
04:05and I'll just go into the folder itself
04:08and rename this folder to be, let me go one more step back
04:16And let me just find it.
04:18And I'm just gonna go ahead here and rename this folder.
04:22So I'm gonna go ahead, rename that folder
04:25and I'm gonna open up in a new tab
04:26so we have your nice clean, fresh start.
04:29Okay, so now that I've opened this up,
04:32we have your a better folder structure.
04:34Let's give it ahead a shot again.
04:35Now that we have a legal HT a legal name,
04:38it's gonna go ahead and automatically create the
04:41folder structure for us.
04:42That Jason folder structure for us.
04:45All that's left for us to do is if we wanted to,
04:48we could improve the structure slightly.
04:51What we could do is to improve the structure,
04:53is we could set default values, for example,
04:56for our name of our author.
04:58So if I go ahead here
04:59and just load in the new package that was loaded,
05:02it's gonna put your no author name
05:03and we really want to have maybe some sort of a default.
05:06So anything that you know is not going to change
05:10or is not going to change often what you could do,
05:13and I'm just gonna go ahead here
05:14and clear here, I could go to my NPM
05:16and I could set default values.
05:19For example, for our in it, I'm gonna set an author name
05:22to be Ben Val.
05:25Now all the different properties that you'll find inside
05:27of your descriptor, you could set here.
05:29So for example, if you look at here, I could, there,
05:31you could look in the documentation,
05:33but for for author, I'm setting my author name
05:35because I have your to a secondary command, which is email.
05:39And I'm gonna set that author email as well.
05:41So every single package that I create will have access
05:43to my email as well.
05:46Um, I'm not gonna go much further into these global
05:49parameters, but if you are creating a lot of projects often
05:52and you don't wanna worry about creating these default
05:55values over and over, you could literally,
05:58by setting those defaults, you could then go
06:00and run in it again without the interview
06:04and have it automatically assign the value.
06:06Ben fallow with that email and the author.
06:08You could change the license description version and so on
06:12and so forth and di differentiate
06:14and change it the way the names are created.
06:17So that's it about the setup, the core setup of your, um,
06:21package, json file.
06:23But really the reason why we created that was to be able
06:26to list out the dependencies.
06:28So let's go ahead and install, again, that is array module,
06:32but this time around I'm gonna set it
06:34and say save it by setting it to save it.
06:37And you really want to do it in any package
06:39that you install locally
06:41because what's gonna happen, it's gonna, oh, I forgot
06:44to start it with NPM silly me NPM.
06:49And once I do that, it's gonna go ahead
06:51and download that package
06:53and it's gonna add it into our dependency.
06:56So if I go ahead into that file in our JSON
06:58and refresh it, we'll see that we, now we have a dependency
07:01and we have your aversion 1.00.
07:04Beautiful. Now I wanna show you just one more thing is,
07:08in general, not only when you're creating
07:11and installing elements, so I'm gonna go ahead here
07:14and, uh, what I want to do is I'm gonna just go ahead here
07:16and I'm just going to get rid of everything here
07:19and I'm gonna go ahead and redo it.
07:21'cause what I wanna do is I wanna show you also the process
07:24of not only installing it for, for example,
07:26when you might have scenarios
07:28where you're only working on development.
07:30You know, I'm not gonna delete, I'm just gonna show you
07:31that you could also save for dev.
07:34And if I set it to save for Dev,
07:35what's gonna happen is it's gonna install the package
07:38and it's gonna set it up in a dev dependencies.
07:41Now, dev dependencies could be different debugger
07:43operations, different things that you don't want production
07:46to have, but you want the dependency
07:48to exist in your dev environment itself,
07:51but not in the live environment.
07:53So you see you have two different ways
07:55of installing elements
07:57and you could go back into any point in a package,
07:59you could remove it.
08:01So if I go into back and I want to say I want to remove,
08:03not install, I wanna remove it, I'm going to remove,
08:08and I'm gonna keep that minus, minus save dash dev.
08:11And once I do that, it's gonna make sure
08:13that it's gonna be removed
08:14and it will also go into our dependencies
08:17and remove it from our dependencies.
08:19Now, we could manually have done it, but it's so much easier
08:22and so much nicer working with our terminal.
08:24So get used to working with it
08:26because it's gonna really streamline your work when we get
08:29into the following chapters as we go into know JS
08:32and other elements
08:34and other things that we're gonna work within
08:36our application.
08:37So that's it. Now you know how to create a JSO uh, package.
08:40Do JSO and describe it
08:42and set up its packages, its dependencies
08:45and its dev dependencies.
08:48In this lecture we learned how to create a package js o file
08:52and that brings us very close to the end of the, the topics
08:55that relate to NPM, leaving us with one more topic
08:59and that is understanding really well version controlling
09:02and that is both for you, the packages you will create,
09:05but also for knowing how to ask for the right packages.
09:10I.

Ready to Level Up Your Skills?

Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!

Enroll Now for Free!