Questions about using modules

Hey there everyone!

I would like to start a new front end project and use NPM (or maybe some other manager) to have my imports sorted out. Basically I’d like to keep them at hand locally, so I could even work offline, if it came to that.

My question is, what are the recommended ways to manage that? Also, how is that controlled when versioning with Git?

If anyone has any pointers, or any relevant information, please do share. :slight_smile:

Thanks for your time!

Your imports, like the actually es6 imports you write in your code or imports like other peoples packages from NPM?

Packages and libraries I might want to include from other people.

I know I can get many of them from a CDN link, but I’d like to learn different ways of doing that, you know? I’d take a look at the npm website which will show you how to get an npm project started. All of your dependencies are recorded in a package.json file. All of the actual modules you want from other people are stored in the node_modules folder.

If you are familiar with git, most people put the node_modules folder in a .gitignore file and only the package.json file is commited with git.

Adding on from what @iamknox suggests, you’ll find a lot of the commonly CDN hosted modules, like Bootstrap or React, are also available via npm.

You use npm (or yarn) to install them for your project, and then import them into your code, with import or require statements.

Right! I understand it better after the comments and some reading. Thanks for your comments. :slight_smile:

So, from what I got, I can use those modules, but it’d be pretty much in a Node server application only.

If I wanted to put my code on Github Page or CodePen, for example, they wouldn’t be usable, since modules aren’t meant for that, is that right?

No, npm modules can be used in static, front-end stuff too.

React is a frontend library you can host on GitHub pages and it can be loaded in with npm modules.


Someone please correct me if I’m wrong - as mentioned, you can indeed use these packages purely on the front-end. You might check out webpack - it’s a tool that makes this endeavor a lot easier in my opinion, and if you learn to use it, it might shed some light on what you’re thinking. I personally found getting webpack setup to be a bit tedious, but it’s really worth it.

But, the thing that really helped me grasp this point is to realize that under the hood, these are all just JavaScript code. You could have written code with similar functionality yourself, for example, and pulled it in from a separate file in much the same way. Much the same as you can use JavaScript on the front-end, the same applies here. The tricky part is just figuring out how to incorporate it into the code your already using.

I didn’t know React could aid with that! I was planning on taking a look at it once I’m done with the Front End map. Now I have one more reason to do that! :smile:

And I’ll surely take a look into Webpack as well. Thanks for all the information! :slight_smile: