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

@murz-test-org/npm-package-example

v0.0.0-development

Published

This is a simple npm package example

Downloads

2

Readme

npm package example

travis build codecov coverage version downloads MIT License

This is a simple npm package example based on How to Write an Open Source JavaScript Library course from egghead.io

Configuring npm and creating a package.json

npm set init-author-name 'Your Name'
npm set init-author-email '[email protected]'
npm set init-author-url 'yourdomain.com'
npm set init-license 'MIT'
npm set save-exact true

signup for npm account (if you don't have already): npmjs.com

npm adduser
npm init

Publishing to npm

npm publish

Releasing a version to GitHub

git tag 1.0.0
git push --tags

Semantic versioning and npm

Semantic versioning is a standard that a lot of projects use to communicate what kinds of changes are in this release. It's important to communicate what kinds of changes are in a release because sometimes those changes will break the code that depends on the package.

If a project is going to be shared with others, it should start at 1.0.0, though some projects on npm don't follow this rule.

After this, changes should be handled as follows:

  • Bug fixes and other minor changes: Patch release, increment the last number, e.g. 1.0.1
  • New features which don't break existing features: Minor release, increment the middle number, e.g. 1.1.0
  • Changes which break backwards compatibility: Major release, increment the first number, e.g. 2.0.0

Releasing a new version to npm

Update version number in package.json file, commit your changes to github and add new tag and then run:

npm publish

Publishing a beta version

Update version number to for example: 1.1.0-beta.0, commit your changes to github and add new tag and then run:

npm publish --tag beta

To install this beta verion you can run:

npm install your-package-name@beta

Unit Testing with Mocha and Chai

Install mocha and chai:

npm i -D mocha chai

To package.json add:

"scripts": {
    "test": "mocha src/index.test.js"
  },

To run test:

npm run test

Automating Releases with semantic-release

npm install -g semantic-release-cli
semantic-release-cli setup

in .travis.yml add:

script:
  - npm run test

Writing conventional commits with commitizen

npm install -D commitizen cz-conventional-changelog

Add following lines to package.json:

"scripts": {
    "commit": "git-cz",
"czConfig": {
    "path": "node_modules/cz-conventional-changelog"
}

Now you can commit yourchanges using:

npm run commit

In "List any breaking changes or issues closed by this change:" step you can use:

closes #1

if your update closes any existing issue

Automatically running tests before commits with ghooks

npm i -D ghooks

Update package.json to include:

"config": {
    "ghooks": {
        "pre-commit": "npm run test"
    }
}

Adding code coverage recording with Istanbul

npm install -D istanbul

update package.json to include:

"scripts": {
    "test": "istanbul cover -x *.test.js ./node_modules/mocha/bin/_mocha -- -R spec src/index.test.js",

Adding code coverage checking

update package.json to include:

  "scripts": {
    "check-coverage": "istanbul check-coverage --statements 100 --branches 100 --functions 100 --lines 100",

and

  "config": {
    "ghooks": {
      "pre-commit": "npm run test && npm run check-coverage"

update .travis.yml to include:

script:
  - npm run test
  - npm run check-coverage

Add code coverage reporting

signup for codecov.io account (if you don't have already)

npm install -D codecov.io

update package.json to include:

 "scripts": {
    "report-coverage": "cat ./coverage/lcov.info | codecov",

update .travis.yml to include:

after_success:
  - npm run report-coverage

Adding badges to your README

You can go to shields.io and use their banges for example to create something like this:

travis build codecov coverage version downloads MIT License

use this code:

[![travis build](https://img.shields.io/travis/creativedeveloper-net/npm-package-example.svg?style=flat-square)](https://travis-ci.org/creativedeveloper-net/npm-package-example)
[![codecov coverage](https://img.shields.io/codecov/c/github/creativedeveloper-net/npm-package-example.svg?style=flat-square)](https://codecov.io/github/creativedeveloper-net/npm-package-example)
[![version](https://img.shields.io/npm/v/npm-package-example.svg?style=flat-square)](http://npm.im/npm-package-example)
[![downloads](https://img.shields.io/npm/dm/npm-package-example.svg?style=flat-square)](http://npm-stat.com/charts.html?package=npm-package-example&from=2015-08-01)
[![MIT License](https://img.shields.io/npm/l/npm-package-example.svg?style=flat-square)](http://opensource.org/licenses/MIT)

Adding ES6 Support

npm i -D babel-cli
npm i -D rimraf
npm i -D babel-preset-es2015 babel-preset-stage-2

update package.json to include:

 "scripts": {
    "prebuild": "rimraf dist",
    "build": "babel --copy-files --out-dir dist --ignore *.test.js src",

and

  "babel": {
    "presets": ["es2015", "stage-2"]
  }

and also update "main" section to use dist folder instead of src:

"main": "dist/index.js",

update .travis.yml to include:

script:
  - npm run test
  - npm run check-coverage
  - npm run build

add "files" section to package.json to include only necessary files:

  "files": [
    "dist",
    "README.md"
  ],

Adding ES6 Support to Tests using Mocha and Babel

npm i -D nyc

update package.json "script" section:

"check-coverage": "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
 "report-coverage": "cat ./coverage/lcov.info | codecov",
 "watch:test": "npm t -- --watch",
 "test": "mocha src/index.test.js --compilers js:babel-core/register",
 "cover": "nyc npm t",

and "ghooks" section:

    "ghooks": {
      "pre-commit": "npm run cover && npm run check-coverage"
    },

update .travis.yml "script" section:

script:
  - npm run cover
  - npm run check-coverage
  - npm run build

Limit Built Branches on Travis

update .travis.yml to include:

branches:
  only:
    - master

Add a browser build to an npm module

npm i -D webpack

Add new file C:\Users\sciurkat\Desktop\My files\webpack.config.babel.js with this code:

import {join} from 'path'

const include = join(__dirname, 'src')

export default {
  entry: './src/index',
  output: {
    path: join(__dirname, 'dist'),
    libraryTarget: 'umd',
    library: 'npmPackageExample',
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {test: /\.js$/, loader: 'babel', include},
      {test: /\.json$/, 'loader': 'json', include},
    ]
  }
}

install

npm i -D babel-loader json-loader
npm install npm-run-all --save-dev

update package.json "script" section:

    "build": "npm-run-all --parallel build:*",
    "build:main": "babel --copy-files --out-dir dist --ignore *.test.js src",
    "build:umd": "webpack --output-filename index.umd.js",
    "build:umd.min": "webpack --output-filename index.umd.min.js -p",

You can now access your package via url like this: https://unpkg.com/npm-package-example/dist/index.umd.js

Integrating SonarQube

https://docs.travis-ci.com/user/sonarqube/

generate token for sonarqube: https://sonarqube.com/account/security/

encrypt that token here: https://travis-encrypt.github.io/

update .travis.yml to inlcude:

script:
  - npm run cover
  - npm run check-coverage
  - npm run build
  - sonar-scanner -Dsonar.login=$SONAR_TOKEN -X

add sonar-project.properties file with code like this (update your projectKey and projectName):

sonar.projectKey=creativedeveloper.net:npm-package-example
sonar.projectName=creativedeveloper.net::npm-package-example
sonar.projectVersion=1.0
sonar.language=js
sonar.sources=src/index.js
sonar.sourceEncoding=UTF-8
sonar.tests=src/index.test.js
sonar.javascript.lcov.reportPath=coverage/lcov.info

Add jshint

install jshint

npm install jshint -g

update package.json:

  "scripts": {
    "check-jshint": "jshint src/index.js",

and:

  "config": {
    "ghooks": {
      "pre-commit": "npm run cover && npm run check-coverage && npm run check-jshint"
    }
  },