Creating NPM Package with TypeScript

Creating NPM Package with TypeScript

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

Table of Contents

Creating NPM Package with TypeScript

  • Introduction
    • Welcome to Creating NPM Package with TypeScript!
    • Why This Book Will Help You
    • What You’ll Build
    • Use the Right Tools
    • What You Should Know First
    • Got Questions?
    • Let’s Begin!
  • 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
    • 9. Installing TypeScript
    • 10. Configuring the TypeScript Compiler
  • Testing Package’s Code
    • 1. Installing the Testing Tool
    • 2. Specifying Jest as Your Project’s Test Runner Tool
    • 3. Configuring Jest to Test TypeScript Code
    • 4. Configuring Jest to Compile TypeScript Files
    • 5. Setting Up Jest’s Testing Environment
    • 6. Creating Your Code Files
    • 7. Writing Your Test Case
    • 8. Developing the Package’s 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
  • Compiling TypeScript to JavaScript
    • How to Compile Both ECMAScript and CommonJS Modules
  • Distinguishing Between Source Code and Distribution Code
  • Specifying Items to Compile
  • Defining Package’s Entry Point
  • Specifying Package’s Declaration File
  • 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 TypeScript
    • Configuring TypeScript
    • 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
    • Styling the Demo Website’s Elements
    • 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. Compile Any Pending Code
    • 6. Stage and Commit Any Recent Changes
    • 7. Push Your Local Git Directory to the Remote Repo
    • 8. Sign In or Sign Up on the NPM Website
    • 9. Log In to NPM via the Terminal
    • 10. Confirm If Your Package’s Name Is Available
    • 11. Publish Your Package!
  • Local Testing of the Published Package
    • 1. Install the Package
    • 2. Import the Package
    • 3. Run Your Local Server
  • Production Testing of the Published Package
    • 1. Stage and Commit Your Changes
    • 2. Set Up a GitHub Remote Repository for Your Demo Test App
    • 3. Upload Your Local Git Directory to the Remote Repo
    • 4. Sign In or Create an Account on the Vercel Website
    • 5. Deploy Your Project to Vercel
    • 6. Test 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 TypeScript 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.ts 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 TypeScript/overview

Creating NPM Package with TypeScript

course_overview

Learn how to build, test & publish TypeScript 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!

count_chapters
begin_reading
download
p_implied_book_part_name

Creating NPM Package with TypeScript22 chapters

Begin ›
  1. Introduction

  2. Project Configuration

  3. Testing Package’s Code

  4. Commit Message Configuration

  5. Setting Up Commitlint GitHub Action

  6. Compiling TypeScript to JavaScript

  7. Distinguishing Between Source Code and Distribution Code

  8. Specifying Items to Compile

  9. Defining Package’s Entry Point

  10. Specifying Package’s Declaration File

  11. Local Testing of Unpublished Package

  12. Creating README

  13. Creating LICENSE

  14. Publishing Package to NPM

  15. Local Testing of the Published Package

  16. Production Testing of the Published Package

  17. Updating Package’s Versions

  18. Automating Version Management

  19. NPM Trusted Publishing Configuration

  20. Automating GitHub Releases

  21. Modularizing TypeScript Codebase

  22. Epilogue