Creating NPM Package with Vanilla JavaScript

Introduction

1. Welcome to NPM Package!
2. How This Book Can Help You
3. The Roadmap
4. Dependencies
5. Prerequisite
6. Questions and Comments
7. Let’s Get It Started!

Project Configuration

1. 1. Setting Up Your System
2. 2. Creating a Project Directory
3. 3. Creating a package.json File
4. 4. Initializing a Git Repository
5. 5. Specifying the Files Git Should Ignore
6. 6. Staging and Committing Your Project’s Changes to Git
7. 7. Configuring a GitHub Remote Repository
8. 8. Uploading Your Local Git Directory to the Remote Repo

Testing JavaScript Code

1. 1. Installing the Testing Tool
2. 2. Specifying Jest as Your Project’s Test Runner Tool
3. 3. Configuring Jest to Support ECMAScript Modules
4. 4. Configuring Babel to Use the @babel/preset-env Preset
5. 5. Configuring Jest’s Testing Environment
6. 6. Creating Your Code Files
7. 7. Writing Your Test Case
8. 8. Developing Your JavaScript Code
9. 9. Running the Test

Commit Message Configuration

1. Conventional Commits Messages Syntax
2. Enforcing the Conventional Commits Format
3. Setting Up Husky
4. Creating a Hook to Auto-Lint Commit Messages

Setting Up GitHub Action

1. 1. Creating a GitHub Action Workflow File
2. 2. Defining the GitHub Action Workflow
3. 3. Testing the GitHub Action Workflow

Defining Package’s Entry Point

Local Testing of Unpublished Package

1. Link-Install Your Package Globally in Your System
2. Creating a Directory for the Demo Website
3. Creating a package.json File
4. Initializing a Git Repository
5. Specifying the Files Git Should Ignore
6. Installing Your Package from Your System’s Global Folder to the Test App
7. Using the Link-Installed Package in the Test App
8. Creating the Demo Website’s Homepage
9. Styling the Demo Website’s Elements
10. Installing the Parcel Build Tool
11. Specifying Parcel as Your Website’s Development Server
12. Unlinking Your Package from the Test App
13. Unlinking Your Package from the Global Folder

Creating README

Creating LICENSE

Publishing Package to NPM

1. 1. Search Engine Optimization (SEO)
2. 2. Specify the Files You Want to Publish to NPM
3. 3. Confirm the Files NPM Will Publish
4. 4. Confirm That You Have Passing Tests
5. 5. Stage and Commit Any Recent Changes
6. 6. Push Your Local Git Directory to the Remote Repo
7. 7. Sign In or Sign Up on the NPM Website
8. 8. Log In to NPM via the Terminal
9. 9. Confirm If Your Package’s Name Is Available
10. 10. Publish Your Package!

Local Testing of the Published Package

1. 1. Installing the Package
2. 2. Importing the Package
3. 3. Running Your Local Server

Production Testing of the Published Package

1. 1. Staging and Committing Your Changes
2. 2. Setting Up a GitHub Remote Repository for Your Demo Test App
3. 3. Uploading Your Local Git Directory to the Remote Repo
4. 4. Signing In or Signing Up on the Vercel Website
5. 5. Deploying Your Project to Vercel’s Server
6. 6. Testing the Package on the Live Demo Website

Updating Package’s Versions

1. Example 1: Updating to a Patch Version
2. Example 2: Updating to a Minor Version
3. Example 3: Updating to a Major Version

Automating Version Management

1. How to Release Your Package’s Latest Version
2. How to Overwrite Release-It’s Default Configurations
3. How Release-It Determines Your Package’s Latest Version
4. How to Provide Release-It with a Recommended Version

Automating Changelog Management

Automating GitHub Releases

1. 1. Getting a GitHub Personal Access Token
2. 2. Copying the Generated Token
3. 3. Creating a GitHub Environment Variable
4. 4. Telling Release-It Your GitHub Token’s Name
5. 5. Making the GitHub Secret Available Locally in Your Project
6. 6. Preventing Git from Monitoring the Environment File
7. 7. Installing the Plugin for Loading the .env File
8. 8. Loading the .env File While Releasing Your Project’s Latest Version
9. 9. Staging and Committing Your Changes

Epilogue

1. What’s Next?
2. One Last Favor