Create your own NPM package for code you use in every project

Glenn Gijsberts
Apr 18 · 5 min read

What is NPM?

npm -v

Let’s get started

mkdir CustomStorage
cd CustomStorage
npm init
{
"name": "@glenngijsberts/customstorage",
"version": "1.0.0",
"description": "A wrapper around the localStorage API",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Glenn Gijsberts",
"license": "MIT"
}

Dependencies

npm install @babel/cli @babel/core @babel/preset-env --save-dev
"devDependencies": {
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/preset-env": "^7.4.3"
}

Write a few lines of code

class CustomStorage {
get(key) {
const item = localStorage.getItem(key);
const parsedItem = JSON.parse(item);
return parsedItem.value;
}
set(key, value) {
localStorage.setItem(key, JSON.stringify({ value }));
}
}
export default new CustomStorage();

Compile with Babel

{
"presets": ["@babel/preset-env"]
}
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel ./src/index.js --out-file ./index.js"
},
"use strict";Object.defineProperty(exports, "esModule", {
value: true
});
exports["default"] = void 0;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }var CustomStorage =
/*#PURE__*/
function () {
function CustomStorage() {
_classCallCheck(this, CustomStorage);
}
_createClass(CustomStorage, [{
key: "get",
value: function get(key) {
var item = localStorage.getItem(key);
var parsedItem = JSON.parse(item);
return parsedItem.value;
}
}, {
key: "set",
value: function set(key, value) {
localStorage.setItem(key, JSON.stringify({
value: value
}));
}
}]);
return CustomStorage;
}();
var _default = new CustomStorage();exports["default"] = _default;

Publish your code to NPM

npm login
npm publish

Conclussion


Glenn Gijsberts

Written by

UX Student / Front-end developer based in NL

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade