Learn npm by Building an npm Module

[dingjy94]

I would like to work on this. Please let me know the more detail requirement.

Is this means create a module, edit package.json, write some code and run it locally or even include test and instruction on publishing the module to npm server?

[scissorsneedfoodtoo]

@dingjy94, great! The project is all yours.

Yes, we want to teach the entire process: everything from creating a package.json file (maybe using npm init?), writing a simple module, using export and require to use the module somewhere else within the project, and publishing the module to npm.

The first step is creating the actual module. Do you have anything in mind? It doesn't have to be anything complicated. Just enough so that we can teach the basics.

[scissorsneedfoodtoo]

@dingjy94, just wanted to check in and see how everything's going. Were you able to make any progress on a prototype?

[dingjy94]

@scissorsneedfoodtoo, sorry for the late reply, I just found I muted the github notification..... I had create a sample npm package to modify the text case (upper case, lower case, proper case and sentence case). I had published the module here, and linked to a github repo.

In the README, I also covered some basic steps to build, publish and use npm module.

[scissorsneedfoodtoo]

@dingjy94, no need to apologize! Thank you for all of your hard work. Just checked out your package and it works great! The only thing I noticed is that const caseConverter = require('./index'); should be const caseConverter = require('case_converter_fcc_sample');, at least if you're an end user like me installing your NPM package rather than someone who is forking the repo itself.

Now you can start from the beginning and break down your project step-by-step. Check out the Contributor's Guide and the basic JavaScript RPG game to get an idea of what we're looking for.

We want to recreate the feeling of making an NPM package as much as possible, so I imagine your project starting with a blank file with instructions telling users to make a directory for the project, then to switch to the directory in the second step. Then from the third step it can be to run the npm init command and to mock the output of the console as users create their package name, version, description, and so on.

Looking forward to seeing your steps! Let me know if there's anything I can do to help.

[dingjy94]

@scissorsneedfoodtoo I just read the contribution guide and the RPG game, and some questions:

1. I actually didn't understand what "Instead, contributors should create their own return statements, error messages, and output to mock the functionality of those services. " means. Is this means for each step, I have to write a script to parse the user input and simulate the npm console output?

2. For this project, most of the core steps are not JavaScript code, but Unix command, answer to npm init and maybe modify package.json file. So should I write these steps in JavaScript (maybe string directly)?

[scissorsneedfoodtoo]

@dingjy94, great questions, and this is something I'm still trying to figure out myself. Thanks for bearing with me!

No, you don't have to write your own script/bash terminal and actually parse user input. The current plan is just to mock or fake that functionality and test user input with regex. You're right in that we'll have to simulate the NPM console output.

What would be good here is to simple copy and paste the console output into a file for each step for now. For example, index010.js could just have some commented out text instructing the user to run mkdir case-converter. Then the next file, index020.js, could tell the user to change to that directory with cd case-converter. In index030.js the test description could briefly explain that package.json is a configuration file for Node/NPM projects, and an easy way to create one is with npm init. Then index040.js can read:

/*
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (case-converter)
*/

/* Test description about the package name -- just hit enter */

After going through the prompts, you could then have them go into the package.json file and make changes, or just work with those defaults and start editing the index.js file.

Those are just some ideas I had. Hope that helps! Let me know if you have any other questions or would like to chat about this over on Google Hangouts.

[dingjy94]

@scissorsneedfoodtoo Thank you for your explanation. This is very helpful! I'll start to work on this project this weekend, and finish it as soon as possible.

[scissorsneedfoodtoo]

@dingjy94, no problem. Feel free to reach out if there's anything I can do to help.

[scissorsneedfoodtoo]

Hi @dingjy94, just wanted to check in and see how everything's going with your prototype. Is there anything we can help with?

[dingjy94]

Hi, @scissorsneedfoodtoo . Really sorry for the delay, I had some interviews last weeks so didn't have enough time to work on that.

I had finished that last weekend and it's on here. What should I do next? should I make a PR for this?

[scissorsneedfoodtoo]

@dingjy94, no need to apologize! Hope your interviews went well :1st_place_medal:

Yes, please submit a PR here when you can. Then we'll be able to review all of your lessons.

[scissorsneedfoodtoo]

Hi @dingjy94, any progress on your PR? Let me know if there's anything I can do to help!

[dingjy94]

@scissorsneedfoodtoo I had created the PR #168 . Please check and tell me what I should do to improve it.

[scissorsneedfoodtoo]

@dingjy94, great! I'll take a look at it ASAP :+1: :+1:

[scissorsneedfoodtoo]

Hi @dingjy94, thank you again for all of your hard work on this project. Students will definitely learn a lot as they work through it. I left some comments in #168 for rewrites and how we can break down some of the lessons a bit more. Were you able to start on a second draft?

[scissorsneedfoodtoo]

@dingjy94, hope your job interviews have been going well! Just wanted to check in and see how everything's going and if you were able to start on a second draft. Please just let us know your status and if there's anything we can do to help!

[dingjy94]

@dingjy94, hope your job interviews have been going well! Just wanted to check in and see how everything's going and if you were able to start on a second draft. Please just let us know your status and if there's anything we can do to help!

Hi @scissorsneedfoodtoo, Really sorry for the reply. I think I have some spare time this week so I can start work on that this week. Hope I can finish the second draft this weekend.

[scissorsneedfoodtoo]

@dingjy94. no need to apologize! Thank you for all of the time and effort you've put into this project so far. Hope everything's going well with the interviews. Please just take your time on the second draft and submit another PR when you can.

Also, do you have some time to hop on a quick 20-30 minute call some time next week? I'd love to hear more about you and answer any questions you might have about this project. If so, please send me an email at kris@freecodecamp.org and we can schedule a call.

[dingjy94]

Hi @scissorsneedfoodtoo, I just made a PR #190, which is the second draft of this learn npm thing.

[scissorsneedfoodtoo]

Hi @dingjy94, just wanted to check in and see how everything's going. I left some review comments in #190. Were you able to start on a third draft?

[dingjy94]

Hi @scissorsneedfoodtoo, I will start to work on the third draft next week. I think I can finish it by next Sunday.

[scissorsneedfoodtoo]

That's great to hear. Looking forward to your next draft.

[dingjy94]

Hi @scissorsneedfoodtoo, I had finished the 3rd draft #208. Please just leave comments there so that I can now how to make further improvement.

[scissorsneedfoodtoo]

@dingjy94, thank you for your latest draft. I just merged it a little while ago. We should be good to go now unless we later decide to further break down some of the steps. Will move this project into the "Coding Project Tests" section of the project board now.

[thecodingaviator]

The discussion above is TL so I DR, but I was thinking that mom is so much more than just creating a package of your own. It includes everything from installing CLIs to dependencies and removing them, etc. I don’t think from the current title that it is what we are approaching.

[scissorsneedfoodtoo]

@thecodingaviator, thanks for your input.

It's true that npm is much more than creating a module and that there's a lot involved before you even get to that point. It's hard to predict exactly what the scope should be for this project now since we're still trying to work out how the next platform will work with these types of challenges that require a CLI. Until then I feel this is a good start to the project. I do really like your idea of adding and removing dependencies, too.