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

npm-starter

v1.1.5

Published

A starter codebase for writing NPM packages using ES2015

Downloads

6

Readme

NPM Starter

Twitter Follow Version MIT license dependencies devDependency Status airbnb code style


This enables you to write ES2015 code but before the package is published on NPM, it gets converted to ES5 code so anyone can use it in their projects.

Features

  • ECMAScript 2015 Support
  • Airbnb Style Guide
  • Mocha & Chai for Testing
  • Predefined NPM Scripts
  • No Unnecessary Boilerplate

Getting Started

You just need to clone this project, delete the .git folder and install the NPM dependencies.

$ git clone https://github.com/deiucanta/npm-starter.git
$ cd npm-starter
$ rm -rf .git
$ npm install

You can run git init as well to start your own git repo. Next, you should edit package.json to reflect your package name and version.

Usage

There are a few predefined NPM scripts available. Run them by typing this in your terminal: npm run [script]

| Name | Description | | ---------- | ----------------------------------------------------- | | lint | Runs ESlint on all files from ./src and ./tests | | lint:fix | Runs ESlint and fixes all the inconsistencies | | test | Runs the tests with Mocha | | test:dev | Re-runs the tests whenever a change occurs | | build | Compiles all ES2015 files to ES5 (legacy code) | | clean | Removes the compiled files |

NOTE: There is another script prepublish that runs before you publish the package to NPM. All it does is to run clean and build.

Short Guides

How to add object rest spread capabilities?

  1. Install the Babel plugin via NPM
npm i --save-dev babel-plugin-transform-object-rest-spread
  1. Add the transform-object-rest-spread to the plugins array in your .babelrc file.
{
  "presets": ["es2015"],
  "plugins": [
    "transform-runtime",
    "transform-object-rest-spread"
  ]
}
  1. Now you can use the spread operator (...) for objects as well!

How to add support for React and JSX?

  1. Install the Babel plugin via NPM
npm i --save-dev babel-preset-react
  1. Add the react preset in your .babelrc file.
{
  "presets": ["es2015", "react"],
  "plugins": [
    "transform-runtime"
  ]
}
  1. Install the ESlint React plugin via NPM
npm i --save-dev eslint-plugin-react
  1. Change the extends property in your .eslintrc file to be just airbnb instead of airbnb/base.
{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "rules": {}
}

P.S. This approach is perfect if you write a React library but if you build an app you might want to consider Webpack which helps you bundle everything/

Want to know how to use other experimental features?

Open a new issue with the feature you want and I'll add a short tutorial for you - like the one above.

Troubleshooting

  1. After I run npm install I get UNMET PEER DEPENDENCY for two packages?

This is totally fine. It happens because Airbnb's ESlint package needs those but only when you want to use React. This project uses only the airbnb/base set of linters available in Airbnb. It includes everything you need except the React parts — which you might not need.

Change Log

1.0.0 (2016-04-15) initial release

Contributing

Before you submit a pull request, please take the following actions.

  1. Open an issue describing the contribution you would like to make
  2. Discuss until we all agree that your idea is useful for the project
  3. Create a pull request but make sure you follow the style guide and the tests pass
  4. Voila! You've done an amazing job.

Credits

  • Hexbridge for sponsoring my open-source work.
  • Airbnb for the work they've put into the javascript style guide and into the ESlint package.

License

MIT @ Andrei Canta