Publishing my first-ever npm packages

Publishing my first-ever npm packages

Andrew Zigler

6/22/2019

less than a minute

Devlog

Last updated on 11/1/2021

I'm continuing to work on a few different Nuxt projects after creating this website, but I quickly hit a point where I was tempted to copy-paste code that I had already written. Knowing that, I paused my projects and returned to my website with the goal of compartmentalizing those useful bits for reuse. After all, this is why the JavaScript ecosystem uses packages!

I extrapolated the structured data component that I previously created into a Vue component called structured-data (published on npm as a scoped package: @andrewzigler/structured-data). To achieve this, I stripped out a lot of my customized code for my own website and created an interface that accepts that data instead. This challenged me to make my own utility more universal, resilient, and composable. Getting this package on npm proved to be a huge endeavor, as it was my first-ever package and I used Babel to transpile the exported Vue component. It ended up being a challenging task but I learned a lot about publishing modern JavaScript and single-file components in the process.

Next, I looked at how I was assembling page metadata and realized that reusing my freshly-researched, fully-compliant SEO strategy would be really helpful for my future projects. If anything, it would allow me to easily update and maintain that code over time. I moved all of those functions into their own framework-agnostic library called head-helper and published it on npm as my second scoped package: @andrewzigler/head-helper. This was a lot easier, as I didn't need to transpile and could simply export an ES6 class with static functions (JavaScript's equivalent of class methods).

After a little testing, I had this website back to full functionality but with all of its custom SEO functionality now imported from newly-externalized libraries. Now I can turn back to my other projects and easily import all of that hard work! It's great to find opportunities to reuse code I've created, and it shows I found a problem that needed addressing. I've grown rather fascinated with metadata and structured data so it was fun to apply those interests and create reusable tools.

0Β claps received