Creating NPM Package with Vanilla JavaScript

Creating NPM Package with Vanilla JavaScript

CodeSweetly
This is a sample of the book's content.Buy on Leanpub

Table of Contents

Creating NPM Package with Vanilla JavaScript

  • 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)
    • 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
    • 10. Publish Your Package!
  • Local Testing of the Published Package
    • 1. Installing the Package
    • 2. Importing the Package
    • 3. Running Your Local Server
  • Production Testing of the Published Package
    • 1. Staging and Committing Your Changes
    • 2. Setting Up a GitHub Remote Repository for Your Demo Test App
    • 3. Uploading Your Local Git Directory to the Remote Repo
    • 4. Signing In or Creating an Account on the Vercel Website
    • 5. Deploying Your Project to Vercel’s Server
    • 6. Testing the Package on the Live Demo Website
  • Updating Package’s Versions
    • Example 1: Updating to a Patch Version
    • Example 2: Updating to a Minor Version
    • Example 3: Updating to a Major Version
  • Automating Version Management
    • 1. Create a Release GitHub Action Workflow File
    • 2. Define the Release GitHub Action Workflow
    • 3. How to Overwrite semantic-release’s Default Configurations
    • 4. Notify Developers That the Package Uses Automated Version Management
  • NPM Trusted Publishing Configuration
    • Add a New Feature
    • Update an Existing Feature
  • Automating GitHub Releases
    • Add the Preset Library to Your Release Workflow
    • Configure semantic-release to Automatically Publish the Package’s Release Notes
  • Modularizing JavaScript Codebase
    • 1. Identify Independent Elements
    • 2. Split the Elements You Want to Extract into Their Separate Modules
    • 3. Import the Extracted Elements into the tweetButton.js File
    • 4. Configure Jest to Strip the Extension from Import Statements
    • 5. Release the Latest Version of the Project
  • Epilogue
    • What’s Next?
    • One Last Favor
Creating NPM Package with Vanilla JavaScript/Commit Message Configuration

Commit Message Configuration

https://leanpub.com/creating-npm-package-with-vanilla-javascript

Conventional Commits Message Syntax

https://leanpub.com/creating-npm-package-with-vanilla-javascript

Enforcing the Conventional Commits Format

https://leanpub.com/creating-npm-package-with-vanilla-javascript

Setting Up Husky

https://leanpub.com/creating-npm-package-with-vanilla-javascript

Creating a Hook to Auto-Lint Commit Messages

https://leanpub.com/creating-npm-package-with-vanilla-javascript

Up next

Setting Up Commitlint GitHub Action

In this chapter

  • Commit Message Configuration
  • Conventional Commits Message Syntax
  • Enforcing the Conventional Commits Format
  • Setting Up Husky
  • Creating a Hook to Auto-Lint Commit Messages