Publishing my first NPM module

There’s a few definite milestones that every developer goes through. First hello world application, first todo app, first repo, etc…

I’ve been holding off on my first NPM module for a long time. No longer! The module in question is a react typewriter animation module. Easy, simple, small.

I’ll do a simple walkthrough of a small react npm module.

1. Making the module

My first NPM module was actually built months beforehand for my website when I wanted to do a simple opening animation. (The delay is actually quite nonsensical, I made the component in July and published it 6 months later)

npm init -y
npm i --save react prop-types styled-components 
// ... all your dependencies

Because there’s no such thing as IP in the world of open source. My component is as follows:

2. Webpack

Because any React module requires some build configuration

npm i --save-dev babel-cli babel-core babel-loader babel-plugin-transform-class-properties babel-plugin-transform-object-rest-spread babel-plugin-transform-react-jsx babel-preset-env babel-preset-react babel-preset-stage-0

I used webpack 2

npm i --save webpack@2.6.1

.babelrc

.webpack.config.js

3. Package and Build

I needed to fully spec out my package.json, add scripts, and change the “main”

// change main:
"main": "build/index.js"
// add scripts"
"scripts": {
   // ...
   "start": "webpack --watch",
   "build": "webpack",
},
// add versions and descriptions and author

Then I ran a simple

npm run build

to get the bundled frontend code

4. Publish to the registry

I already had an npm account before I started but one needs one if one wants to add to its registry. The toughest part is actually coming up with a concise enough name that isn’t already taken :P

npm login
npm publish

And everything ran like a clean, lean, well-oiled machine.

Feel free to leave your feedback, thoughts, suggestions and of course… some claps so others can see this too.