[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":-5,"_8":9,"_10":11},"actionData","errors","root",{"_517":-5,"_524":-5,"_525":526,"_527":528,"_529":530,"_531":532,"_533":534,"_535":536,"_537":354,"_538":539},"routes/_store+/_readers+/read_/route","routes/_store+/_readers+/read_.$slug/route",{"_16":348,"_349":350,"_351":352,"_353":354,"_355":-7},"routes/_store+/_readers+/read_.$slug.$chapterId/route",{"_12":13,"_14":15,"_16":17,"_18":19,"_20":21},"title","Creating NPM Package with Vanilla JavaScript","content","

Defining Package’s Entry Point

https://leanpub.com/creating-npm-package-with-vanilla-javascript","book",{"_33":34,"_12":13,"_35":36,"_37":38,"_39":40,"_41":42,"_43":15},"nextChapter",{"_22":23,"_12":24,"_25":-5,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":-5},"sections",[],"level",2,"Local Testing of Unpublished Package","description","path","#local-testing-of-unpublished-package","fileCount",1,"quizType","sectionNum","youtubeId","previewContent","

\nIntroduction\n
- \nWelcome to NPM Package!\n
- \nHow This Book Can Help You\n
- \nThe Roadmap\n
- \nDependencies\n
- \nPrerequisite\n
- \nQuestions and Comments\n
- \nLet’s Get It Started!\n
\n
\nProject Configuration\n
- \n1. Setting Up Your System\n
- \n2. Creating a Project Directory\n
- \n3. Creating a package.json File\n
- \n4. Initializing a Git Repository\n
- \n5. Specifying the Files Git Should Ignore\n
- \n6. Staging and Committing Your Project’s Changes to Git\n
- \n7. Configuring a GitHub Remote Repository\n
- \n8. Uploading Your Local Git Directory to the Remote Repo\n
\n
\nTesting JavaScript Code\n
- \n1. Installing the Testing Tool\n
- \n2. Specifying Jest as Your Project’s Test Runner Tool\n
- \n3. Configuring Jest to Support ECMAScript Modules\n
- \n4. Configuring Babel to Use the @babel/preset-env Preset\n
- \n5. Configuring Jest’s Testing Environment\n
- \n6. Creating Your Code Files\n
- \n7. Writing Your Test Case\n
- \n8. Developing Your JavaScript Code\n
- \n9. Running the Test\n
\n
\nCommit Message Configuration\n
- \nConventional Commits Message Syntax\n
- \nEnforcing the Conventional Commits Format\n
- \nSetting Up Husky\n
- \nCreating a Hook to Auto-Lint Commit Messages\n
\n
\nSetting Up Commitlint GitHub Action\n
- \n1. Create a Commitlint GitHub Action Workflow File\n
- \n2. Define the Commitlint GitHub Action Workflow\n
- \n3. Test the Commitlint GitHub Action Workflow\n
\n
\nStyling React Components\n
- \n1. Create the Stylesheet\n
- \n2. Apply CSS Styles to Your Elements\n
- \n3. Run the Test\n
\n
\nDefining Package’s Entry Point\n
\nLocal Testing of Unpublished Package\n
- \nLink-Install Your Package Globally in Your System\n
- \nCreating a Directory for the Demo Website\n
- \nCreating a package.json File\n
- \nInitializing a Git Repository\n
- \nSpecifying the Files Git Should Ignore\n
- \nInstalling Your Package from Your System’s Global Folder to the Test App\n
- \nUsing the Link-Installed Package in the Test App\n
- \nCreating the Demo Website’s Homepage\n
- \nInstalling the Parcel Build Tool\n
- \nSpecifying Parcel as Your Website’s Development Server\n
- \nUnlinking Your Package from the Test App\n
- \nUnlinking Your Package from the Global Folder\n
\n
\nCreating README\n
\nCreating LICENSE\n
\nPublishing Package to NPM\n
- \n1. Search Engine Optimization (SEO)\n
- \n2. Specify the Files You Want to Publish to NPM\n
- \n3. Confirm the Files NPM Will Publish\n
- \n4. Confirm That Your Package Have Passing Tests\n
- \n5. Stage and Commit Any Recent Changes\n
- \n6. Push Your Local Git Directory to the Remote Repo\n
- \n7. Sign In or Sign Up on the NPM Website\n
- \n8. Log In to NPM via the Terminal\n
- \n9. Confirm If Your Package’s Name Is Available\n
- \n10. Publish Your Package!\n
\n
\nLocal Testing of the Published Package\n
- \n1. Installing the Package\n
- \n2. Importing the Package\n
- \n3. Running Your Local Server\n
\n
\nProduction Testing of the Published Package\n
\n
\nUpdating Package’s Versions\n
- \nExample 1: Updating to a Patch Version\n
- \nExample 2: Updating to a Minor Version\n
- \nExample 3: Updating to a Major Version\n
\n
\nAutomating Version Management\n
\n
\nNPM Trusted Publishing Configuration\n
- \nAdd a New Feature\n
- \nUpdate an Existing Feature\n
\n
\nAutomating GitHub Releases\n
- \nAdd the Preset Library to Your Release Workflow\n
- \nConfigure semantic-release to Automatically Publish the Package’s Release Notes\n
\n
\nModularizing JavaScript Codebase\n
\n
\nEpilogue\n
- \nWhat’s Next?\n
- \nOne Last Favor\n
\n

Introduction

Welcome to NPM Package!

NPM is a database (storage) for thousands of packages. Developers use it to share, manage, find, and install libraries.

\n\n\n\n

$\"An$

A package is sometimes called a library, plugin, framework, or tool. It is a directory (or project) with a package.json file for recording information about it.

Publishing NPM packages is a fantastic way to share your code with others and become a better developer. It is a vital step in contributing to the developer community and showcasing a variety of skills, such as:

\ncommunication skills\n
\ncollaboration skills\n
\norganizational skills\n
\ntechnical skills\n
\ndocumentation skills\n
\nproblem-solving skills\n

Becoming an NPM package publisher is a unique way to create a finished product that others can use as part of or the main component of their apps.

This beginner-friendly book discusses everything you need to know to create, test, and publish NPM packages like a pro.

How This Book Can Help You

The best way to learn is through progressive practice. In other words, the easiest way to become a proficient package publisher is to proactively build NPM plugins—rather than merely reading or watching videos about them.

As such, this book is intentionally project-oriented to get you to practice as much as possible while learning the fundamental concepts of becoming an NPM package publisher.

Therefore, you will do yourself a favor by opening your text editor (such as VS Code) and code-along as you go through the book. By so doing, you will avoid being part of those stuck in “Tutorial Hell.”

The Roadmap

This book’s main project is a Tweet Button—which you can scale up to whatever magnitude your imagination can afford.

Don’t let the project type scare you off! You are on for an exciting ride—where you will learn the fundamental concepts needed to publish any NPM package. So, give it a chance.

Dependencies

It is highly recommended that you use the exact version of dependencies specified in this book. By doing so, you will spend less time dealing with bugs that a newly released dependency version may cause.

After finishing this book’s lessons, you can upgrade the dependencies to the latest version. If the bump (update) causes a bug, search online or the package’s community for the appropriate fix.

Prerequisite

Familiarity with Git, GitHub, and JavaScript will help you learn NPM package publishing better. So, to be better prepared for this book’s content, it’s best to be familiar with the elementary aspects of those tools.

Questions and Comments

If you have questions or comments about this book, email contact@codesweetly.com or direct message me on Twitter (@oluwatobiss).

Let’s Get It Started!

The following chapter will discuss how to configure the project.

Project Configuration

Below are the required system and file configurations for creating NPM packages.

1. Setting Up Your System

Please ensure your system has the following installations:

\nGit\n
\nNode 22.13 (or greater)\n
\nNPM 10.9 (or greater)\n

\n\n\n\n

$\"An$

\nUse the Git tutorial to install, update, or verify Git on your system.\n
\nUse the package manager tutorial to install, update, or verify Node and NPM on your system.\n

2. Creating a Project Directory

Create a new folder for your project like so:

Figure 1. Command Line

1 mkdir thank-you-tweet-button-001\n

\n\n\n\n\n

$\"An$

You may use any name. For example, this guide uses thank-you-tweet-button-001.

\n\n\n\n

$\"An$

\nSpecify a name that is less than or equal to 214 characters.\n
\nUse lowercase letters only in the name.\n
\nYour package’s name should not contain “js” or “node”.\n

Afterward, navigate to your project directory using the command line.

Figure 2. Command Line

1 cd path/to/thank-you-tweet-button-001\n

\n\n

3. Creating a package.json File

Use NPM to initialize a package.json file for your project.

Figure 3. Command Line

1 npm init -y\n

\n\n

Let’s also configure Git.

4. Initializing a Git Repository

Create a .git repo in your project’s root directory:

Figure 4. Command Line

1 git init\n

\n\n

You now need to specify the files you want Git to ignore.

5. Specifying the Files Git Should Ignore

Create a .gitignore file in your project’s root directory:

Figure 5. Command Line

1 touch .gitignore\n

\n\n

Afterward, open the newly created .gitignore file and write the names of the files, folders, or file types you want Git to ignore.

Here’s an example:

Figure 6. .gitignore

1 /node_modules\n2 /dist\n

\n\n

The snippet above instructs Git to ignore tracking the current directory’s node_modules and dist folders.

\n\n\n\n

$\"An$

\nA current directory is the folder in which you are currently working.\n
\nA current directory is sometimes called a “current working directory (CWD)” or “working directory.”\n
\nSee the .gitignore file example to learn more about gitignore.\n

It’s now time to stage and commit your recent changes.

6. Staging and Committing Your Project’s Changes to Git

Enter the following command on your terminal to stage and commit your recent changes.

Figure 7. Command Line

1 git add -A && git commit -m \"Initialize project using CodeSweetly's guide\"\n

\n\n

The command above tells Git to stage and commit all modified and untracked files in the project.

Let’s now configure a remote repository for the project.

7. Configuring a GitHub Remote Repository

\nGo to the GitHub website and sign in or sign up if you do not have an account.\n
\nAfter signing up for an account, create a home (a repository) in GitHub for your Git repository. (You can use thank-you-tweet-button-001 as the repo’s name or any other name you prefer.)\n
\nOnce you’ve created a remote repository for your package, link your project’s .git directory (located locally on your system) with the remote repository on GitHub. To connect to the remote repository, go to your package’s root directory via your local terminal and run the git remote add command. Here’s the syntax:\n

Figure 8. Command Line

1 git remote add origin https://github.com/your-username/remote-repo-name.git\n

\n\n\n\n\n

$\"An$

\nReplace your-username in the code above with your GitHub username. Likewise, replace remote-repo-name with your remote repository’s name.\n
\nSee GitHub Docs to learn more about creating a GitHub repository.\n

You can also add the remote repo to your package.json file so that people who want to contribute to your project can easily access it.

Figure 9. package.json: Add repository field (line 4-7)

 1 {\n 2   \"name\": \"thank-you-tweet-button-001\",\n 3   \"version\": \"1.0.0\",\n 4   \"repository\": {\n 5     \"type\": \"git\",\n 6     \"url\": \"https://github.com/your-username/app-repo-name.git\"\n 7   },\n 8   \"scripts\": {\n 9     \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n10   }\n11 }\n

\n\n

Let’s provide the remote repo’s Issues URL as the package’s bug tracker. And an email people can use to report issues:

Figure 10. package.json: Add bugs field (line 8-11)

 1 {\n 2   \"name\": \"thank-you-tweet-button-001\",\n 3   \"version\": \"1.0.0\",\n 4   \"repository\": {\n 5     \"type\": \"git\",\n 6     \"url\": \"https://github.com/your-username/app-repo-name.git\"\n 7   },\n 8   \"bugs\": {\n 9     \"url\": \"https://github.com/your-username/app-repo-name/issues\",\n10     \"email\": \"your-project-email@host.com\"\n11   },\n12   \"scripts\": {\n13     \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n14   }\n15 }\n

\n\n

Afterward, stage and commit your changes:

Figure 11. Command Line

1 git add -A && git commit -m \"Configure project's remote repo\"\n

\n\n

Let’s now push the local Git repository upstream.

8. Uploading Your Local Git Directory to the Remote Repo

After successfully connecting your local directory to the remote repository, you can begin to push (upload) your local project upstream. Here’s how:

Figure 12. Command Line

1 git push -u origin main\n

\n\n

The command above instructs Git to push your local main branch’s .git directory to the remote origin branch on GitHub.

\n\n\n\n

$\"An$

Refreshing your remote repository’s page should now reflect your upload.

Let’s look at how to write a test case for your package in the next chapter.

Testing JavaScript Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

1. Installing the Testing Tool

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

2. Specifying Jest as Your Project’s Test Runner Tool

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

3. Configuring Jest to Support ECMAScript Modules

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

4. Configuring Babel to Use the @babel/preset-env Preset

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

5. Configuring Jest’s Testing Environment

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

6. Creating Your Code Files

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

7. Writing Your Test Case

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

8. Developing Your JavaScript Code

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

9. Running the Test

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Commit Message Configuration

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Conventional Commits Message Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Enforcing the Conventional Commits Format

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Setting Up Husky

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Creating a Hook to Auto-Lint Commit Messages

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Setting Up Commitlint GitHub Action

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

1. Create a Commitlint GitHub Action Workflow File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

2. Define the Commitlint GitHub Action Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

3. Test the Commitlint GitHub Action Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Styling React Components

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

1. Create the Stylesheet

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

2. Apply CSS Styles to Your Elements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

3. Run the Test

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Defining Package’s Entry Point

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Local Testing of Unpublished Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Link-Install Your Package Globally in Your System

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Creating a Directory for the Demo Website

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Creating a package.json File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Initializing a Git Repository

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Specifying the Files Git Should Ignore

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Installing Your Package from Your System’s Global Folder to the Test App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Using the Link-Installed Package in the Test App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Creating the Demo Website’s Homepage

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Installing the Parcel Build Tool

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Specifying Parcel as Your Website’s Development Server

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Unlinking Your Package from the Test App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Unlinking Your Package from the Global Folder

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Creating README

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Creating LICENSE

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Publishing Package to NPM

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

1. Search Engine Optimization (SEO)

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Description

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Keywords

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Author

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

License

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Homepage

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

2. Specify the Files You Want to Publish to NPM

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

3. Confirm the Files NPM Will Publish

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

4. Confirm That Your Package Have Passing Tests

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

5. Stage and Commit Any Recent Changes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

6. Push Your Local Git Directory to the Remote Repo

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\nThis content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

8. Log In to NPM via the Terminal

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

9. Confirm If Your Package’s Name Is Available

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

1. CLI command

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

2. URL search

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

What to do if your chosen package name is currently in use by someone else

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

10. Publish Your Package!

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Local Testing of the Published Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

1. Installing the Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

2. Importing the Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

3. Running Your Local Server

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Production Testing of the Published Package

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

1. Staging and Committing Your Changes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

2. Setting Up a GitHub Remote Repository for Your Demo Test App

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

3. Uploading Your Local Git Directory to the Remote Repo

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

4. Signing In or Creating an Account on the Vercel Website

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

5. Deploying Your Project to Vercel’s Server

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

6. Testing the Package on the Live Demo Website

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Updating Package’s Versions

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Example 1: Updating to a Patch Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Example 2: Updating to a Minor Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Example 3: Updating to a Major Version

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Automating Version Management

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

1. Create a Release GitHub Action Workflow File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

2. Define the Release GitHub Action Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

3. How to Overwrite semantic-release’s Default Configurations

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

4. Notify Developers That the Package Uses Automated Version Management

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

NPM Trusted Publishing Configuration

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Add a New Feature

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Update an Existing Feature

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Automating GitHub Releases

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Add the Preset Library to Your Release Workflow

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Configure semantic-release to Automatically Publish the Package’s Release Notes

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Modularizing JavaScript Codebase

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

1. Identify Independent Elements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

2. Split the Elements You Want to Extract into Their Separate Modules

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

`generateStarIcons.js`

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

`showError.js`

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

3. Import the Extracted Elements into the `tweetButton.js` File

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

4. Configure Jest to Strip the Extension from Import Statements

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

5. Release the Latest Version of the Project

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

Epilogue

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

What’s Next?

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n

One Last Favor

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-vanilla-javascript.\n\n

\n\n","metaText","Learn how to build, test & publish vanilla JavaScript NPM packages like a pro! CodeSweetly’s step-by-step guide covers project setup, GitHub Actions, versioning, automation & more. Start sharing your code with the world—get the book now!","slug","creating-npm-package-with-vanilla-javascript","showReadLinkString","sample","tocStructure",[44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,19,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144],"publicChapterContent",{"_22":23,"_12":346,"_25":-5,"_26":347,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":344,"_25":-5,"_26":345,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":342,"_25":-5,"_26":343,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":340,"_25":-5,"_26":341,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":338,"_25":-5,"_26":339,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":336,"_25":-5,"_26":337,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":334,"_25":-5,"_26":335,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":332,"_25":-5,"_26":333,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":330,"_25":-5,"_26":331,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":328,"_25":-5,"_26":329,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":326,"_25":-5,"_26":327,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":324,"_25":-5,"_26":325,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":322,"_25":-5,"_26":323,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":320,"_25":-5,"_26":321,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":318,"_25":-5,"_26":319,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":316,"_25":-5,"_26":317,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":314,"_25":-5,"_26":315,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":312,"_25":-5,"_26":313,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":310,"_25":-5,"_26":311,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":308,"_25":-5,"_26":309,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":306,"_25":-5,"_26":307,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":304,"_25":-5,"_26":305,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":302,"_25":-5,"_26":303,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":300,"_25":-5,"_26":301,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":298,"_25":-5,"_26":299,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":296,"_25":-5,"_26":297,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":294,"_25":-5,"_26":295,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":292,"_25":-5,"_26":293,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":290,"_25":-5,"_26":291,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":288,"_25":-5,"_26":289,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":286,"_25":-5,"_26":287,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":284,"_25":-5,"_26":285,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":282,"_25":-5,"_26":283,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":280,"_25":-5,"_26":281,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":278,"_25":-5,"_26":279,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":276,"_25":-5,"_26":277,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":274,"_25":-5,"_26":275,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":272,"_25":-5,"_26":273,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":270,"_25":-5,"_26":271,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":268,"_25":-5,"_26":269,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":266,"_25":-5,"_26":267,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":264,"_25":-5,"_26":265,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":262,"_25":-5,"_26":263,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":260,"_25":-5,"_26":261,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":258,"_25":-5,"_26":259,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":256,"_25":-5,"_26":257,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":254,"_25":-5,"_26":255,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":252,"_25":-5,"_26":253,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":250,"_25":-5,"_26":251,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":248,"_25":-5,"_26":249,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":246,"_25":-5,"_26":247,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":244,"_25":-5,"_26":245,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":242,"_25":-5,"_26":243,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":240,"_25":-5,"_26":241,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":238,"_25":-5,"_26":239,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":236,"_25":-5,"_26":237,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":234,"_25":-5,"_26":235,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":232,"_25":-5,"_26":233,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":230,"_25":-5,"_26":231,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":228,"_25":-5,"_26":229,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":226,"_25":-5,"_26":227,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":224,"_25":-5,"_26":225,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":222,"_25":-5,"_26":223,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":220,"_25":-5,"_26":221,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":218,"_25":-5,"_26":219,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":216,"_25":-5,"_26":217,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":214,"_25":-5,"_26":215,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":212,"_25":-5,"_26":213,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":210,"_25":-5,"_26":211,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":208,"_25":-5,"_26":209,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":206,"_25":-5,"_26":207,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":204,"_25":-5,"_26":205,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":202,"_25":-5,"_26":203,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":200,"_25":-5,"_26":201,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":198,"_25":-5,"_26":199,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":196,"_25":-5,"_26":197,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":194,"_25":-5,"_26":195,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":192,"_25":-5,"_26":193,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":190,"_25":-5,"_26":191,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":188,"_25":-5,"_26":189,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":186,"_25":-5,"_26":187,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":184,"_25":-5,"_26":185,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":182,"_25":-5,"_26":183,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":180,"_25":-5,"_26":181,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":178,"_25":-5,"_26":179,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":176,"_25":-5,"_26":177,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":174,"_25":-5,"_26":175,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":172,"_25":-5,"_26":173,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":170,"_25":-5,"_26":171,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":168,"_25":-5,"_26":169,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":166,"_25":-5,"_26":167,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":164,"_25":-5,"_26":165,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":162,"_25":-5,"_26":163,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":160,"_25":-5,"_26":161,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":158,"_25":-5,"_26":159,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":156,"_25":-5,"_26":157,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":154,"_25":-5,"_26":155,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":152,"_25":-5,"_26":153,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":150,"_25":-5,"_26":151,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":148,"_25":-5,"_26":149,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":146,"_25":-5,"_26":147,"_28":29,"_30":-5,"_31":-5,"_32":-5},3,"One Last Favor","#one-last-favor","What’s Next?","#whats-next","Epilogue","#epilogue","5. Release the Latest Version of the Project","#5-release-the-latest-version-of-the-project","4. Configure Jest to Strip the Extension from Import Statements","#4-configure-jest-to-strip-the-extension-from-import-statements","3. Import the Extracted Elements into the tweetButton.js File","#3-import-the-extracted-elements-into-the-tweetbuttonjs-file","2. Split the Elements You Want to Extract into Their Separate Modules","#2-split-the-elements-you-want-to-extract-into-their-separate-modules","1. Identify Independent Elements","#1-identify-independent-elements","Modularizing JavaScript Codebase","#modularizing-javascript-codebase","Configure semantic-release to Automatically Publish the Package’s Release Notes","#configure-semantic-release-to-automatically-publish-the-packages-release-notes","Add the Preset Library to Your Release Workflow","#add-the-preset-library-to-your-release-workflow","Automating GitHub Releases","#automating-github-releases","Update an Existing Feature","#update-an-existing-feature","Add a New Feature","#add-a-new-feature","NPM Trusted Publishing Configuration","#npm-trusted-publishing-configuration","4. Notify Developers That the Package Uses Automated Version Management","#4-notify-developers-that-the-package-uses-automated-version-management","3. How to Overwrite semantic-release’s Default Configurations","#3-how-to-overwrite-semantic-releases-default-configurations","2. Define the Release GitHub Action Workflow","#2-define-the-release-github-action-workflow","1. Create a Release GitHub Action Workflow File","#1-create-a-release-github-action-workflow-file","Automating Version Management","#automating-version-management","Example 3: Updating to a Major Version","#example-3-updating-to-a-major-version","Example 2: Updating to a Minor Version","#example-2-updating-to-a-minor-version","Example 1: Updating to a Patch Version","#example-1-updating-to-a-patch-version","Updating Package’s Versions","#updating-packages-versions","6. Testing the Package on the Live Demo Website","#6-testing-the-package-on-the-live-demo-website","5. Deploying Your Project to Vercel’s Server","#5-deploying-your-project-to-vercels-server","4. Signing In or Creating an Account on the Vercel Website","#4-signing-in-or-creating-an-account-on-the-vercel-website","3. Uploading Your Local Git Directory to the Remote Repo","#3-uploading-your-local-git-directory-to-the-remote-repo","2. Setting Up a GitHub Remote Repository for Your Demo Test App","#2-setting-up-a-github-remote-repository-for-your-demo-test-app","1. Staging and Committing Your Changes","#1-staging-and-committing-your-changes","Production Testing of the Published Package","#production-testing-of-the-published-package","3. Running Your Local Server","#3-running-your-local-server","2. Importing the Package","#2-importing-the-package","1. Installing the Package","#1-installing-the-package","Local Testing of the Published Package","#local-testing-of-the-published-package","10. Publish Your Package!","#10-publish-your-package","9. Confirm If Your Package’s Name Is Available","#9-confirm-if-your-packages-name-is-available","8. Log In to NPM via the Terminal","#8-log-in-to-npm-via-the-terminal","7. Sign In or Sign Up on the NPM Website","#7-sign-in-or-sign-up-on-the-npm-website","6. Push Your Local Git Directory to the Remote Repo","#6-push-your-local-git-directory-to-the-remote-repo","5. Stage and Commit Any Recent Changes","#5-stage-and-commit-any-recent-changes","4. Confirm That Your Package Have Passing Tests","#4-confirm-that-your-package-have-passing-tests","3. Confirm the Files NPM Will Publish","#3-confirm-the-files-npm-will-publish","2. Specify the Files You Want to Publish to NPM","#2-specify-the-files-you-want-to-publish-to-npm","1. Search Engine Optimization (SEO)","#1-search-engine-optimization-seo","Publishing Package to NPM","#publishing-package-to-npm","Creating LICENSE","#creating-license","Creating README","#creating-readme","Unlinking Your Package from the Global Folder","#unlinking-your-package-from-the-global-folder","Unlinking Your Package from the Test App","#unlinking-your-package-from-the-test-app","Specifying Parcel as Your Website’s Development Server","#specifying-parcel-as-your-websites-development-server","Installing the Parcel Build Tool","#installing-the-parcel-build-tool","Creating the Demo Website’s Homepage","#creating-the-demo-websites-homepage","Using the Link-Installed Package in the Test App","#using-the-link-installed-package-in-the-test-app","Installing Your Package from Your System’s Global Folder to the Test App","#installing-your-package-from-your-systems-global-folder-to-the-test-app","Specifying the Files Git Should Ignore","#specifying-the-files-git-should-ignore","Initializing a Git Repository","#initializing-a-git-repository","Creating a package.json File","#creating-a-packagejson-file","Creating a Directory for the Demo Website","#creating-a-directory-for-the-demo-website","Link-Install Your Package Globally in Your System","#link-install-your-package-globally-in-your-system","Defining Package’s Entry Point","#defining-packages-entry-point","3. Run the Test","#3-run-the-test","2. Apply CSS Styles to Your Elements","#2-apply-css-styles-to-your-elements","1. Create the Stylesheet","#1-create-the-stylesheet","Styling React Components","#styling-react-components","3. Test the Commitlint GitHub Action Workflow","#3-test-the-commitlint-github-action-workflow","2. Define the Commitlint GitHub Action Workflow","#2-define-the-commitlint-github-action-workflow","1. Create a Commitlint GitHub Action Workflow File","#1-create-a-commitlint-github-action-workflow-file","Setting Up Commitlint GitHub Action","#setting-up-commitlint-github-action","Creating a Hook to Auto-Lint Commit Messages","#creating-a-hook-to-auto-lint-commit-messages","Setting Up Husky","#setting-up-husky","Enforcing the Conventional Commits Format","#enforcing-the-conventional-commits-format","Conventional Commits Message Syntax","#conventional-commits-message-syntax","Commit Message Configuration","#commit-message-configuration","9. Running the Test","#9-running-the-test","8. Developing Your JavaScript Code","#8-developing-your-javascript-code","7. Writing Your Test Case","#7-writing-your-test-case","6. Creating Your Code Files","#6-creating-your-code-files","5. Configuring Jest’s Testing Environment","#5-configuring-jests-testing-environment","4. Configuring Babel to Use the @babel/preset-env Preset","#4-configuring-babel-to-use-the-babelpreset-env-preset","3. Configuring Jest to Support ECMAScript Modules","#3-configuring-jest-to-support-ecmascript-modules","2. Specifying Jest as Your Project’s Test Runner Tool","#2-specifying-jest-as-your-projects-test-runner-tool","1. Installing the Testing Tool","#1-installing-the-testing-tool","Testing JavaScript Code","#testing-javascript-code","8. Uploading Your Local Git Directory to the Remote Repo","#8-uploading-your-local-git-directory-to-the-remote-repo","7. Configuring a GitHub Remote Repository","#7-configuring-a-github-remote-repository","6. Staging and Committing Your Project’s Changes to Git","#6-staging-and-committing-your-projects-changes-to-git","5. Specifying the Files Git Should Ignore","#5-specifying-the-files-git-should-ignore","4. Initializing a Git Repository","#4-initializing-a-git-repository","3. Creating a package.json File","#3-creating-a-packagejson-file","2. Creating a Project Directory","#2-creating-a-project-directory","1. Setting Up Your System","#1-setting-up-your-system","Project Configuration","#project-configuration","Let’s Get It Started!","#lets-get-it-started","Questions and Comments","#questions-and-comments","Prerequisite","#prerequisite","Dependencies","#dependencies","The Roadmap","#the-roadmap","How This Book Can Help You","#how-this-book-can-help-you","Welcome to NPM Package!","#welcome-to-npm-package","Introduction","#introduction",{"_12":13,"_37":38,"_35":36,"_502":503,"_504":505,"_506":507,"_39":40,"_508":509,"_510":511},"parts",[458],"toc",[356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457],"isUnavailableOnline",false,"unavailableMessage",{"_22":23,"_12":346,"_25":-5,"_26":347,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":344,"_25":-5,"_26":345,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":342,"_25":-5,"_26":343,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":340,"_25":-5,"_26":341,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":338,"_25":-5,"_26":339,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":336,"_25":-5,"_26":337,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":334,"_25":-5,"_26":335,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":332,"_25":-5,"_26":333,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":330,"_25":-5,"_26":331,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":328,"_25":-5,"_26":329,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":326,"_25":-5,"_26":327,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":324,"_25":-5,"_26":325,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":322,"_25":-5,"_26":323,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":320,"_25":-5,"_26":321,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":318,"_25":-5,"_26":319,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":316,"_25":-5,"_26":317,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":314,"_25":-5,"_26":315,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":312,"_25":-5,"_26":313,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":310,"_25":-5,"_26":311,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":308,"_25":-5,"_26":309,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":306,"_25":-5,"_26":307,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":304,"_25":-5,"_26":305,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":302,"_25":-5,"_26":303,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":300,"_25":-5,"_26":301,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":298,"_25":-5,"_26":299,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":296,"_25":-5,"_26":297,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":294,"_25":-5,"_26":295,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":292,"_25":-5,"_26":293,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":290,"_25":-5,"_26":291,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":288,"_25":-5,"_26":289,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":286,"_25":-5,"_26":287,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":284,"_25":-5,"_26":285,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":282,"_25":-5,"_26":283,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":280,"_25":-5,"_26":281,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":278,"_25":-5,"_26":279,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":276,"_25":-5,"_26":277,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":274,"_25":-5,"_26":275,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":272,"_25":-5,"_26":273,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":270,"_25":-5,"_26":271,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":268,"_25":-5,"_26":269,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":266,"_25":-5,"_26":267,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":24,"_25":-5,"_26":27,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":264,"_25":-5,"_26":265,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":262,"_25":-5,"_26":263,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":260,"_25":-5,"_26":261,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":258,"_25":-5,"_26":259,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":256,"_25":-5,"_26":257,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":254,"_25":-5,"_26":255,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":252,"_25":-5,"_26":253,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":250,"_25":-5,"_26":251,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":248,"_25":-5,"_26":249,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":246,"_25":-5,"_26":247,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":244,"_25":-5,"_26":245,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":242,"_25":-5,"_26":243,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":240,"_25":-5,"_26":241,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":238,"_25":-5,"_26":239,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":236,"_25":-5,"_26":237,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":234,"_25":-5,"_26":235,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":232,"_25":-5,"_26":233,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":230,"_25":-5,"_26":231,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":228,"_25":-5,"_26":229,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":226,"_25":-5,"_26":227,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":224,"_25":-5,"_26":225,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":222,"_25":-5,"_26":223,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":220,"_25":-5,"_26":221,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":218,"_25":-5,"_26":219,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":216,"_25":-5,"_26":217,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":214,"_25":-5,"_26":215,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":212,"_25":-5,"_26":213,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":210,"_25":-5,"_26":211,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":208,"_25":-5,"_26":209,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":206,"_25":-5,"_26":207,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":204,"_25":-5,"_26":205,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":202,"_25":-5,"_26":203,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":200,"_25":-5,"_26":201,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":198,"_25":-5,"_26":199,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":196,"_25":-5,"_26":197,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":194,"_25":-5,"_26":195,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":192,"_25":-5,"_26":193,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":190,"_25":-5,"_26":191,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":188,"_25":-5,"_26":189,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":186,"_25":-5,"_26":187,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":184,"_25":-5,"_26":185,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":182,"_25":-5,"_26":183,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":180,"_25":-5,"_26":181,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":178,"_25":-5,"_26":179,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":176,"_25":-5,"_26":177,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":174,"_25":-5,"_26":175,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":172,"_25":-5,"_26":173,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":170,"_25":-5,"_26":171,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":168,"_25":-5,"_26":169,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":166,"_25":-5,"_26":167,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":164,"_25":-5,"_26":165,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":162,"_25":-5,"_26":163,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":160,"_25":-5,"_26":161,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":158,"_25":-5,"_26":159,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":156,"_25":-5,"_26":157,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":154,"_25":-5,"_26":155,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":152,"_25":-5,"_26":153,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":23,"_12":150,"_25":-5,"_26":151,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":148,"_25":-5,"_26":149,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_22":145,"_12":146,"_25":-5,"_26":147,"_28":29,"_30":-5,"_31":-5,"_32":-5},{"_12":13,"_25":459,"_28":460,"_461":462},"",0,"chapters",[463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481],{"_22":23,"_12":346,"_26":347,"_28":29,"_482":501,"_32":-5},{"_22":23,"_12":330,"_26":331,"_28":29,"_482":500,"_32":-5},{"_22":23,"_12":312,"_26":313,"_28":29,"_482":499,"_32":-5},{"_22":23,"_12":292,"_26":293,"_28":29,"_482":498,"_32":-5},{"_22":23,"_12":282,"_26":283,"_28":29,"_482":497,"_32":-5},{"_22":23,"_12":274,"_26":275,"_28":29,"_482":496,"_32":-5},{"_22":23,"_12":266,"_26":267,"_28":29,"_482":495,"_32":-5},{"_22":23,"_12":24,"_26":27,"_28":29,"_482":494,"_32":-5},{"_22":23,"_12":240,"_26":241,"_28":29,"_482":493,"_32":-5},{"_22":23,"_12":238,"_26":239,"_28":29,"_482":492,"_32":-5},{"_22":23,"_12":236,"_26":237,"_28":29,"_482":491,"_32":-5},{"_22":23,"_12":214,"_26":215,"_28":29,"_482":490,"_32":-5},{"_22":23,"_12":206,"_26":207,"_28":29,"_482":489,"_32":-5},{"_22":23,"_12":192,"_26":193,"_28":29,"_482":488,"_32":-5},{"_22":23,"_12":184,"_26":185,"_28":29,"_482":487,"_32":-5},{"_22":23,"_12":174,"_26":175,"_28":29,"_482":486,"_32":-5},{"_22":23,"_12":168,"_26":169,"_28":29,"_482":485,"_32":-5},{"_22":23,"_12":162,"_26":163,"_28":29,"_482":484,"_32":-5},{"_22":23,"_12":150,"_26":151,"_28":29,"_482":483,"_32":-5},"subsections",[456,457],[450,451,452,453,454],[447,448],[444,445],[439,440,441,442],[435,436,437],[428,429,430,431,432,433],[424,425,426],[413,414,415,416,417,418,419,420,421,422],[],[],[398,399,400,401,402,403,404,405,406,407,408,409],[],[393,394,395],[389,390,391],[384,385,386,387],[374,375,376,377,378,379,380,381,382],[365,366,367,368,369,370,371,372],[357,358,359,360,361,362,363],"coverFeatured",{"_521":523},"coverFeatured2x",{"_521":522},"authors",[512],"samplePdfUrl","https://s3.amazonaws.com/samples.leanpub.com/creating-npm-package-with-vanilla-javascript-sample.pdf?x-amz-checksum-mode=ENABLED&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=0XBXHW3Q9GGV69BT7E82%2F20260427%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260427T233340Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=4d9294bf61aaecbd556983901ddd5b3efc53a58df7d575083a7dacf6a4bceeda","sampleEpubUrl","https://s3.amazonaws.com/samples.leanpub.com/creating-npm-package-with-vanilla-javascript-sample.epub?x-amz-checksum-mode=ENABLED&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=0XBXHW3Q9GGV69BT7E82%2F20260427%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260427T233340Z&X-Amz-Expires=518400&X-Amz-SignedHeaders=host&X-Amz-Signature=18d12f858a9d0720da6b6553121ef12d84dc47a5772b5b68d34100e19814210f",{"_513":514,"_515":516,"_517":518},"id","Z2lkOi8vbGVhbnB1Yi9TdG9yZTo6UHJvZHVjdEF1dGhvci82ODE3NQ","name","CodeSweetly","user",{"_519":520},"username","codesweetly","url","https://d2sofvawe08yqg.cloudfront.net/creating-npm-package-with-vanilla-javascript/s_featured2x?1744744241&1744744241","https://d2sofvawe08yqg.cloudfront.net/creating-npm-package-with-vanilla-javascript/s_featured?1744744241&1744744241","shoppingCartId","shoppingCart",{"_513":553,"_554":460,"_555":544,"_556":459,"_557":558,"_559":560,"_561":544},"locale","en","readerTheme","light","constants",{"_551":552},"publishers",{"_547":548,"_549":550},"learnerOrganizations",[],"needsLocaleCookieSync","announcements",{"_540":541,"_542":-5},"announcement_store",{"_543":544,"_545":546},"announcement_authors","flag",true,"text","

Kick off your book project in 3 hours! Live workshop on Zoom. You’ll leave with a real book project, progress on your first chapter, and a clear plan to keep going. Saturday, May 2, 2026. Learn more…

\n","companies",[],"universities",[],"paypalClientId","AX53Cwz8jR6rVVzzZiZNWWXl0dGagi-GZrjG-S3Ua14E5nrKMn7DxDQ730O4R8LusLPp49ALn6aRVaEy","no-cart","count","free","updatedAt","paymentGateway","STRIPE","cartItems",[],"loading"]

Defining Package’s Entry Point

Table of Contents

Introduction

Welcome to NPM Package!

How This Book Can Help You

The Roadmap

Dependencies

Prerequisite

Questions and Comments

Let’s Get It Started!

Project Configuration

1. Setting Up Your System

2. Creating a Project Directory

3. Creating a package.json File

4. Initializing a Git Repository

5. Specifying the Files Git Should Ignore

6. Staging and Committing Your Project’s Changes to Git

7. Configuring a GitHub Remote Repository

8. Uploading Your Local Git Directory to the Remote Repo

Testing JavaScript Code

1. Installing the Testing Tool

2. Specifying Jest as Your Project’s Test Runner Tool

3. Configuring Jest to Support ECMAScript Modules

4. Configuring Babel to Use the @babel/preset-env Preset

5. Configuring Jest’s Testing Environment

6. Creating Your Code Files

7. Writing Your Test Case

8. Developing Your JavaScript Code

9. Running the Test

Commit Message Configuration

Conventional Commits Message Syntax

Enforcing the Conventional Commits Format

Setting Up Husky

Creating a Hook to Auto-Lint Commit Messages

Setting Up Commitlint GitHub Action

1. Create a Commitlint GitHub Action Workflow File

2. Define the Commitlint GitHub Action Workflow

3. Test the Commitlint GitHub Action Workflow

Styling React Components

1. Create the Stylesheet

2. Apply CSS Styles to Your Elements

3. Run the Test

Defining Package’s Entry Point

Local Testing of Unpublished Package

Link-Install Your Package Globally in Your System

Creating a Directory for the Demo Website

Creating a package.json File

Initializing a Git Repository

Specifying the Files Git Should Ignore

Installing Your Package from Your System’s Global Folder to the Test App

Using the Link-Installed Package in the Test App

Creating the Demo Website’s Homepage

Installing the Parcel Build Tool

Specifying Parcel as Your Website’s Development Server

Unlinking Your Package from the Test App

Unlinking Your Package from the Global Folder

Creating README

Creating LICENSE

Publishing Package to NPM

1. Search Engine Optimization (SEO)

Description

Keywords

Author

License

Homepage

2. Specify the Files You Want to Publish to NPM

3. Confirm the Files NPM Will Publish

4. Confirm That Your Package Have Passing Tests

5. Stage and Commit Any Recent Changes

6. Push Your Local Git Directory to the Remote Repo

7. Sign In or Sign Up on the NPM Website

8. Log In to NPM via the Terminal

9. Confirm If Your Package’s Name Is Available

1. CLI command

2. URL search

What to do if your chosen package name is currently in use by someone else

10. Publish Your Package!

Local Testing of the Published Package

1. Installing the Package

2. Importing the Package

`generateStarIcons.js`

`showError.js`

3. Import the Extracted Elements into the `tweetButton.js` File