npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

addiction-module-bip

v1.0.0

Published

workshop

Downloads

4

Readme

npm guide

Pre-workshop

Slides

Slides link

login

As we are going to publish packages into npm and we don't want to polute our company account, start by logging out:

npm logout

Login back into npm:

npm login

Use these credentials:

Username: npm-workshop
Password: ************
Email: [email protected]

Checkout that you are logged in as npm-workshop by executing

npm whoami

Workshop

Exercise 1: Create a package.json file

We want to publish our addition module, therefore we need a package.json file. Create one.

After it's done, change the name property inside the package.json file in order to avoid collitions. For example, use your name initials (Bart Simpson would rename the package as addition-module-bs)

Exercise 2: Install dependencies and run scripts

We want to make sure that our test are working (npm run test fails right now). Install the jest dependency, which is our chosen javascript testing framework and edit the test script so it launches jest.

Bonus: run jest without using npm run

Exercise 3: Basic info about installed packages

After installing your fist dependency, the node_modules folder and the package-lock.json file have been created. Check what jest version has been installed without opening the package.json file

Exercise 4: Publish a package

After being able to check that our test works we feel confident enough to publish our first npm module. Checkout the log after running npm publish

Exercise 5: Use published package

Create a new project, execute npm init -y, install your recent published package and create a index.js file that requires the addition-module and uses it. Run it and checkout that it works

Exercise 6: Link packages

Add a new call to adds a third param to our exported function. Iterate our addition package so it is able to add 3 arguments. Link the packages so you are able to test it locally

Bonus: check out what happens if you unlink the addition-module and run you code

Exercise 7: Publish betas

Publish the recent changes to your addition-module as beta and install this version in your new module


Solutions

Exercise 1 solution

npm init -y

Change the name to addition-module-[your name initials]

{
  "name": "addition-module-jg",
  "version": "1.0.0",
  "description": "",
  "main": "sum.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "[email protected]:julian-gernun/workshop-npm.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Exercise 2 solution

npm i --save-dev jest

Modify the test script inside the package.json file

{
  "name": "addition-module-jg",
  "version": "1.0.0",
  "description": "",
  "main": "sum.js",
  "scripts": {
    "test": "jest"
  },
  "repository": {
    "type": "git",
    "url": "[email protected]:julian-gernun/workshop-npm.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^26.1.0"
  }
}
npm run test

// runs jest test

Bonus

npx jest

Exercise 3 solution

npm ls jest

Exercise 5 solution

mkdir new-module
cd new-module
npm init -y
npm install addition-module-jg
// index.js
const sum = require("addition-module-jg");

console.log(sum(1, 2));
// output: 3
// package.json
{
  "name": "use-addition-module",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "addition-module-jg": "^1.0.0"
  }
}

Exercise 6 solution

// index.js
const sum = require("addition-module-jg");

console.log(sum(1, 2, 3));
// output: 3
npm link # in the addition-module-jg folder
npm link addition-module-jg # in our new module folder
node index.js
// output: 6

Bonus

npm unlink addition-module-jg

Execution breaks as the package has been removed completely

Exercise 7 solution

npm version 1.0.0-beta.0 # in the addition-module-jg folder
// new module's package.json
{
  ...
  "dependencies": {
    "addition-module-jg": "beta"
  }
}
npm install # in the new module's folder