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.

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.

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.

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.

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.

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 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.