Creating Npm Packages: The Complete Guide

Create and publish your own NPM packages with solid foundations, automated processes and advanced techniques

What you'll learn

Learn all basic & advanced configurations every NPM package creator must know

Implement tree shakable packages (dive deep and truely understand this concept)

Publish your NPM package with ease using automated CI tools

Ship your package with vaious module systems

Handle parallel development of pre-release versions of your package while maintainning stable versions

Create your package with Typescript support

Requirements

Basic knowledge of Javascript

Description

NPM packages are the most popular and powerful way today for making your code reusable and share it between various projects. But as most of us are starting to code for the web by developing web applications, when the time comes and we need to create and publish our own first NPM package, we find ourselfs guessing what are the best practices we should followThat's what happened to me a few years ago when I was required to create my first NPM package. I tried to search for some detailed tutorial or an in-depth course to guide me, but pretty soon I realized such source doesn't really exist. So I started gathering the knowledge through endless blog posts, short tutorials, friends, colleagues and mainly a lot of exploring and experimenting I did on my own.Years later, I'm really happy to publish this course and share the knowledge I accumulated during all this time. One of the main purposes of doing so, is to make your journey with NPM packages much easier and pleasant. So I hope you will enjoy this ride of learning and start implementing your own amazing NPM packagesThis course will start from the basic stuff regarding NPM packages and then continue to the most advanced topics it involvesYou will learn the basic structure of a NPM package, all the configurations involved in creating it, and of course the various properties that the package json file should include. We will experiment with our newly created package, ship it with different module systems, develop it with full typescript support and see the differences between consuming it through frontend and backend applications. We will then learn how we can automate the process of versioning and publishing the package, with some of the most popular and exciting CI tools. Pre-releases will also be on the menu, and we will learn some techniques that will enable us to publish pre-release versions while maintaining our current stable version. We will test various ways of building our packages, And of course, we will take a deep dive into the interesting topic of tree shaking, where we will see live examples and reveal all the behind the scenes of it.After this course you will feel confident regarding your ability to create NPM packages with best practices, and you will have the tools to debug the behavior of your package and adjust its configurations according to your needsI hope you will have a great experience during our time together, and wish you will soon start to implement your own creative ideas for your popular, brand-new, NPM package

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 How to get help

Section 2: Creating our first basic npm package

Lecture 3 Section intro

Lecture 4 Verifing Node version

Lecture 5 Create git repo for the package

Lecture 6 Generate source code

Lecture 7 Package json name property

Lecture 8 Module systems in packages

Lecture 9 Setting tsconfig.json

Lecture 10 Installing Rollup

Lecture 11 Rollup configuration

Lecture 12 Configurations explained

Lecture 13 Package entry points

Lecture 14 The files field

Lecture 15 Creting our npm account

Lecture 16 Publishing our package

Lecture 17 Section wrap up

Section 3: Experimenting with the package

Lecture 18 Section intro

Lecture 19 Installing a Vite app

Lecture 20 Using the package inside the app

Lecture 21 Exploring the app's production bundle

Lecture 22 How our package is consumed?

Lecture 23 Express App

Lecture 24 Installing express js dependencies

Lecture 25 Using the package inside express

Lecture 26 Experimenting with the express app

Lecture 27 Section wrap up

Section 4: Versioning & Publishing

Lecture 28 Section intro

Lecture 29 Changesets action

Lecture 30 Semantic versioning

Lecture 31 Initializing changesets

Lecture 32 Writing github workflow

Lecture 33 Explain the workflow

Lecture 34 Creating a Github token

Lecture 35 Creating a NPM token

Lecture 36 Publishing with changesets

Lecture 37 Multiple tasks with changesets

Lecture 38 Section wrap up

Section 5: Pre releases

Lecture 39 Section intro

Lecture 40 Linking our package

Lecture 41 Behind the scenes of npm link

Lecture 42 Planning pre release

Lecture 43 Enter pre release mode

Lecture 44 Working in parallel

Lecture 45 Publish our first pre release version

Lecture 46 Consume the pre release version

Lecture 47 Parallel work on regular release

Lecture 48 Consume the regular package release

Lecture 49 Promoting our pre release tag

Lecture 50 Releasing the next major version

Lecture 51 Trying the new major version

Lecture 52 Section wrap up

Section 6: Tree shaking

Lecture 53 Section intro

Lecture 54 Explaining tree shaking

Lecture 55 Components package code

Lecture 56 Creating git repo for the new package

Lecture 57 Exploring the package's code

Lecture 58 Prepare for publishing

Lecture 59 Generating github token

Lecture 60 Generating npm token

Lecture 61 Publishing the components package

Lecture 62 using our new package

Lecture 63 Is our package tree shakable

Lecture 64 First condition for tree shakable package

Lecture 65 NPM packages and side effects

Lecture 66 How to leverage the side effects optimization

Lecture 67 Package built with typescript

Lecture 68 Publish our tree shakable package

Lecture 69 Testing if the package is tree shakable

Lecture 70 One more mystery to solve

Lecture 71 Section wrap up

Section 7: Closing notes

Lecture 72 Congratulations

All levels Javascript developers that want to expand their knowledge on NPM packages and create NPM package with best practices