Creating NPM packages: The Complete Guide

Learn to create and publish an npm package with Rollup and TypeScript, including core files like package.json and tsconfig.json, and publish to the npm registry.

Ensure your node and npm are installed and aligned to the latest lts, ideally v20, with a minimum v18, and verify with node -v before creating your package.

Create a GitHub repository for your npm package, add a description and readme, choose an MIT license, then clone the repo to your local machine to continue packaging.

Create and configure an npm package by initializing package.json, adding a gitignore to ignore lib and node_modules, and building a minimal src with morningGreet and eveningGreet, exported from index.ts.

Explore the package.json name field, its role in a package’s identity, scope, and access. Compare unscoped and scoped names and how to publish public packages with the access flag.

Examine JavaScript module systems—cjs, amd, umd, and esm—and learn to ship npm packages in both esm and cjs formats, since esm is the official package format.

Install TypeScript 5.4.5 as a dev dependency, then create tsconfig.json to emit declarations into lib/types, target es ecma-script-6, with node module resolution, including src and excluding node_modules and lib.

Install rollup and plugins as dev dependencies with exact versions 4.17.2, 0.36.0, and 2.0.0 to build the package into esm and cjs bundles, then prepare the rollup configuration.

Set up a rollup.config.js to build from src/index.ts, exporting two outputs in CGS and ESM formats (lib/index.CGS and lib/index.ESM.CGS) with rollup-plugin-delete and rollup-plugin-typescript2; emit declarations via tsconfig.

Configure npm package builds to produce cjs and esm artifacts, generate type declarations in lib/.types, and ensure clean outputs with the delete plugin and module type in package.json.

Explains how the exports field defines ESM and CJS entry points, maps types, encapsulates internal modules, and keeps a main fallback for older Node versions.

Learn how to use the files field in package.json to publish only build artifacts from lib, while package.json, readme, and license are always included, and verify with npm publish --dry-run.

Open an npm account to publish your package to the npm registry, then sign in with a one-time password to complete setup.

Publish your npm package by logging in, verifying your account with npm whoami, and publishing with npm publish --access public, using a scoped name in package.json.

Wraps up the first section by detailing essential package files, especially package.json fields, demonstrates building with rollup, links rollup config to build artifacts, and publishes the package to npm.

Explore how our greeting package powers a vite frontend app and an express backend, shows consumption across different module systems, and previews exports in package.json and tree shaking.

Install a vite app by scaffolding a react and typescript template with npm create vite, then run npm install and npm run dev to view it.

Install the package as a dependency for the app, import its morning and evening greetings, and render them to verify the npm package works inside the React app.

Build a production bundle, inspect the dist assets, and see how minification and tree shaking remove unused code, illustrated by morning and evening greeting strings.

Explore how the package is consumed by a client app, comparing ESM and CJS via the exports field in package.json, and see which version the dev server uses by default.

Install dependencies with npm install, transpile TypeScript with npm run build to produce dist, then run npm run dev to serve a hello world express app on port 3000.

Install the npm package in an express app and import the morning greet function. Use it to produce a hello world message, then build, run, and verify in the browser.

Explore configuring an Express app to consume a package via CommonJS or ESM, by setting type in package.json, adjusting tsconfig, and switching between require and import to see dist changes.

Experiment with the package in a front end and an express back end, inspect how package.json in node_modules shapes consumption across module systems, and preview tree shaking and publishing automation.

Explore automating versioning and publishing of your npm package with Changesets, replacing manual bumps and npm publish steps, and generating a changelog for clear version differences.

Learn how to automate versioning and publishing with changesets and GitHub actions, creating change set files, opening PRs, updating package.json and changelog, and publishing to npm.

Explore semantic versioning for npm packages, detailing major, minor, and patch components and their impact on backward compatibility. Learn to apply these rules with Changeset and prepare for versioned releases.

Begin changesets in your npm package by installing the cli, initializing changesets, and configuring public access in the .changeset folder, with a new side branch and a GitHub workflow.

Automate npm package releases by creating a GitHub workflow that uses the Changesets action, includes checkout and setup-node steps, runs npm ci, and publishes via a release pull request.

Explain the release workflow: trigger on main pushes, checkout code, set up node.js, run npm ci, and use changesets to open PRs and publish the package.

Learn how to securely create and store GitHub tokens and npm tokens, guard them as secrets, and use them in workflows and git operations to authenticate pushes.

Generate an npm token with publish permissions, store it as a repository secret, and wire it into the GitHub workflow to publish the package when changesets exist.

Learn how to use changesets and the GitHub action for versioning and publishing, including branch protection, feature creation, automated release PRs, changelogs, and git tags.

Learn how to manage multiple tasks with changesets, create patch and minor bumps on side branches, and publish them together via an automated versioning PR.

Version and publish npm packages automatically using changesets and a ci process that bumps versions, updates changelogs, and publishes, with previews via pre-releases for consumer feedback.

Learn to validate new features by linking your package to a consumer project or publishing a pre-release, and gather feedback before a full npm release.

Discover how to test an npm package locally by linking it to a vite consumer project, update the night grid, and verify changes without publishing.

Explore how npm link connects a local package to a consumer project, manage local and remote versions, build changes, and publish workflows using Git and GitHub actions.

Learn how to plan and execute npm pre-releases using changesets, pre-release branches, and automated PRs to validate, publish, and merge a mature release.

Enter pre-release mode by checking out the pre-release branch, running npx changeset and tagging alpha, then updating the release workflow to trigger on the pre-release branch.

Explore parallel workflows in npm package development: maintain v1 on the main branch while developing pre-release v2 on a separate branch to prepare breaking changes and merge.

Publish your first pre-release version by creating a breaking change on the pre-release branch, updating the changeset and package.json, and triggering the pre-release npm alpha release workflow.

Learn how to consume a pre-release npm package version alongside the stable release, install the specific pre-release with npm install package@version, and verify changes in a vite project.

Discover how to parallelize pre-release work for v2 while fixing v1 on the main branch, using side branches, changesets, pull requests, and publishing npm versions.

Pull the latest code from the main branch, run npm install to fetch the regular package version, and verify the update, while working in parallel on main and pre-release branches.

Promote the pre-release from alpha to beta by updating the pre json tag, adding grumpy to monarch cats, and generating a major changeset for the beta release.

Exit pre mode, update the changelog and package.json, resolve conflicts, and merge to main to release version 2 from the release-ready branch.

Install and verify the new major version v2 with npm install and npm run dev. Delete the pre-release branch locally to keep the release workflow consistent.

Use pre-releases with Changeset Prix mode to version, publish, and pre-release in parallel, while maintaining the current version and exploring alternative tools.

Explore tree shaking in npm packages by building a components package and applying steps to create a tree shakeable package, comparing before and after states and revealing behind the scenes.

Explain tree shaking and dead code elimination in npm packages, show how bundlers remove unused code to shrink production bundles, and outline rules to make packages tree shakeable.

Learn to set up a new npm package repository, consider tree shaking for front-end bundles, clone from GitHub, adjust package.json, commit, and push.

Explore how to build a React component package with Material UI, customize styles for brand colors, and manage dependencies and peer dependencies with Rollup for publishing.

Prepare for publishing npm packages by enforcing a main branch protection rule requiring a pull request, initializing changesets, and importing the release workflow with npm and GitHub tokens.

Generate a GitHub classic token with a 90-day expiration and save it as a repository secret named git changeset token for GitHub actions; future lectures cover npm changeset token.

Generate the npm change set token in the browser, and copy it. Add it as a repository secret named npm change set token with publish permissions.

Publish the components package by creating a changeset for a major release, merging a release PR, and publishing to npm with a v1 tag and changelog update.

Test a published package by installing with a force flag, importing custom button and text field, and running dev server to render components. It shows package is not tree shakeable.

Explore tree shakeable behavior by building the app bundle, removing the text field, and confirming that unused code disappears while the button module stays.

Learn the first condition for a tree shakable package: ship code in ESM format to improve bundler predictability, enabling effective dead code elimination.

Declare side effects as false in package.json to help bundlers skip unused modules and enable tree-shaking. See how terser in Webpack analyzes side effects to remove code and optimize bundles.

Learn to enable tree shaking for npm packages by setting the side effects flag to false, keeping modules separate in lib, and using rollup preserve modules.

Use TypeScript to build npm packages with separate esm and cjs formats by creating tsconfig.esm.json and tsconfig.cjs.json, configuring outputs, and replacing rollup with tsc.

Update import and require paths to lib/esm and lib/CJS, install rim ref, use tsc for the build, and publish a tree shakeable package with a patch version.

Verify the npm package is tree shakable by rebuilding the app, then confirm the dist bundle includes only the button while excluding the custom text field component.

Explore why a package bundled with Rollup still includes component styles due to minifier side effects analysis, and how Webpack, terser, and React higher-order components affect tree-shaking.

Learn to make npm packages tree shakeable by shipping an ESM package, declaring side effects with the side effects flag, and keeping modules separated to optimize bundlers and app performance.