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 Message Syntax
2. Enforcing the Conventional Commits Format
3. Setting Up Husky
4. Creating a Hook to Auto-Lint Commit Messages

Setting Up Commitlint GitHub Action

1. 1. Create a Commitlint GitHub Action Workflow File
2. 2. Define the Commitlint GitHub Action Workflow
3. 3. Test the Commitlint GitHub Action Workflow

Styling a Library’s Elements

1. 1. Create the Stylesheet
2. 2. Apply CSS Styles to Your Elements
3. 3. Run the Test

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. Installing the Parcel Build Tool
10. Specifying Parcel as Your Website’s Development Server
11. Unlinking Your Package from the Test App
12. Unlinking Your Package from the Global Folder

Creating README

Creating LICENSE

Publishing Package to NPM

1. 1. Search Engine Optimization (SEO)
2. 2. Confirm That Your Package Have Passing Tests
3. 3. Stage and Commit Your Project’s Changes to Git
4. 4. Specify the Files You Want to Publish to NPM
5. 5. Confirm the Files NPM Will Publish
6. 6. Stage and Commit Any Recent Changes
7. 7. Push Your Local Git Directory to the Remote Repo
8. 8. Sign In or Sign Up on the NPM Website
9. 9. Log In to NPM via the Terminal
10. 10. Confirm If Your Package’s Name Is Available
11. 11. 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 Creating an Account 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. 1. Create a Release GitHub Action Workflow File
2. 2. Define the Release GitHub Action Workflow
3. 3. How to Overwrite semantic-release’s Default Configurations
4. 4. Notify Developers That the Package Uses Automated Version Management

NPM Trusted Publishing Configuration

1. Add a New Feature
2. Update an Existing Feature

Automating GitHub Releases

1. Add the Preset Library to Your Release Workflow
2. Configure semantic-release to Automatically Publish the Package’s Release Notes

Modularizing JavaScript Codebase

1. 1. Identify Independent Elements
2. 2. Split the Elements You Want to Extract into Their Separate Modules
3. 3. Import the Extracted Elements into the tweetButton.js File
4. 4. Configure Jest to Strip the Extension from Import Statements
5. 5. List the New Modules as Files You Want to Publish on NPM
6. 6. Release the Latest Version of the Project

Epilogue

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