Turning repetitive code into npm modules

If you’re a coder you probably have made one code so handy that every time when you face a similar problem you reuse that code. And you probably do it by copying the previous code from other project and placing it into the new one.

If the code fits in just one .js file is might be Ok doing that every time, but if the code requires others .js files it’s probably something painful to do.

A good approach to solve it and also to share your solution with many other coders is package your code in a library ready to use. Nowadays, npm, node package manager, is the greatest place to find JavaScript modules to use.

So, let’s create a simple node project to make some math operations and them we’re gonna share it as a npm module.

First step, creating the project folder:

mkdir mymathnpm
cd mymathnpm

Creating the package.json:

npm init

Enabling ES6 features in our project:

npm install --save babel-register
npm install --save-dev babel-preset-es2015 babel-cli

Adding the .babelrc file:

{
    "presets":["es2015"]
}

And now we have ES6 features available in our project.

Now it’s important to know that ES6 features are not widely supported for some environments, due to that we need to maintain two different versions of our code: the one that we properly code, using ES6, and other one to use in distribution. To parse the ES6 code into a “distributable” code we need to use a transpiler, here we’re gonna use babel.

So, let’s create two folders in our project: src, to keep our source code and dist, to place the files to distribute.

mkdir src dist

In src folder let’s add our main code in two files: MathHandler.js to place a class that performs math operations:

class MathHandler {
    constructor() {}
isEven(number) {
        return number % 2 == 0;
    }
isOdd(number) {
        return number % 2 != 0;
    }
getDouble(number) {
        return number * 2;
    }
}
export default MathHandler;

And a index.js to export that code;

import MathHandler from "./MathHandler";
export default MathHandler;

And then, we need to set babel to transpile the code inside src to dist, so change the package.json and add it to the scripts:

"build": "babel src --presets babel-preset-es2015 --out-dir dist"

To transpile the code run:

npm run build

If now into the dist folder you’ll see the transpiled code.

Now we need to setup the main file in package.json to reference the index.js file inside the dist folder:

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

Next thing we need to do is tell to npm to ignore the files in src folder when exporting the project. To do it, we need to add a file called .npmignore, and inside of it put the src folder:

src

And in the same way, we need to tell git to ignore the files in dist folder, so in the .gitignore besides the node_modules add it:

node_modules
dist

To finish, we need to add a last script into package.json to tell npm to build the code before publish the code:

"prepublish": "npm run build"

And our package.json looks like it:

{
  "name": "mymathnpm",
  "version": "1.0.0",
  "description": "first project exported in npm",
  "main": "./dist/index.js",
  "scripts": {
    "build": "babel src --presets babel-preset-es2015 --out-dir dist",
    "prepublish": "npm run build"
  },
  "author": "ABuarque",
  "license": "ISC",
  "dependencies": {
    "babel-register": "^6.26.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

To finally share your npm module you need to login into your npm account, if you don’t have one yet type:

npm adduser

And fill the camps. And finally type:

npm publish

It’s done! To add your new package to other project just type:

npm install --save mymathnpm

Till next!

Full project on GitHub: https://github.com/ABuarque/npmmodulesarticle