silly-input-test v1.0.0

Creating-an-NPM-package

In this lesson we'll create our own package, a rather silly/brilliant one that selects input elements by a specific class and turns them into inputs that change their background colour on every key up event.

The steps we require

Create a package.json a file and enter the name of our package Compile the source code for the package to ES5 so that the package can be used in all browsers. We'll use Babel for this step. Create an NPM account Login to NPM via the terminal console Publish the package The repo for this lesson is here, the master branch contains the starting source code.

The final code is on this branch.

There are comments in the code explaining it, but basically it does the following:

selects all input elements with a certain selector string (.silly-input if another one is not passed in) loops through the inputs, styles them and adds a keyup event listener to each that changes the background colour

Creating package.json

You can run npm init -y to have all default values filled in automatically, or npm init to fill the values in interactively.

We'll change the name field to silly-input. This value is what users will enter when they run:

npm install <name-of-package>

Compiling the source code to ES5

The source code uses ES6/ES2015, so we need to compile down to ES5 to make sure our package works in all (older) browsers.

We'll use Babel for this so we'll install the following as dev dependencies:

npm install babel-cli babel-preset-es2015 -D

We'll also create a .gitignore file and add the node_modules folder.

Her skal det komme bilde

We'll add .babelrc file with the presets value set to es2015:

her skal det komme bilde

And create a build script entry in package.json:

Her skal det komme bilde

Now we can run npm run build:

The compiled code in the dist folder is what the package will consist of.

We need to add an index.js in the root of our project that exports this code:

Her skal det komme bilde

Creating an NPM account and logging in

npmjs.com is NPM's home.

Create an account at npmjs.com/signup

Once created, use npm login from a terminal/command line to log in. On Mac (and maybe Windows too) your password won't show up when typing it.

legg til bilde her

Publishing the package

Before we publish the package, there is a final file to add, an .npmignore. We'll exclude the src and node_modules folders from the package:

legg til bilde her

Then we can publish the package with the npm publish command:

legg til bilde her

Once published, the package is listed in our NPM profile.

Legger til bilde her

Adding a README file We need to add a README file with instructions for users of our package.

legg til bilde her

We can't use the same version number when updatin a package, so in package.json we'll update the version to 1.0.1, and update the package by running npm publish again.

You can click through from the admin panel to the public URL for the package.

legg til bilde her

Using the package

We've added instructions on how to use the package in a project in the package's README file.

npm install silly-input

Add a .silly-input class to any input element we want to convert to a Silly Input