Distinguishing Between Source Code and Distribution Code

https://leanpub.com/creating-npm-package-with-typescript",{"_463":464,"_43":44,"_47":48,"_45":46,"_65":66,"_465":466,"_576":461},"previewContent","

\nIntroduction\n
- \nWelcome to Creating NPM Package with TypeScript!\n
- \nWhy This Book Will Help You\n
- \nWhat You’ll Build\n
- \nUse the Right Tools\n
- \nWhat You Should Know First\n
- \nGot Questions?\n
- \nLet’s Begin!\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
- \n9. Installing TypeScript\n
- \n10. Configuring the TypeScript Compiler\n
\n
\nTesting Package’s Code\n
- \n1. Installing the Testing Tool\n
- \n2. Specifying Jest as Your Project’s Test Runner Tool\n
- \n3. Configuring Jest to Test TypeScript Code\n
- \n4. Configuring Jest to Compile TypeScript Files\n
- \n5. Setting Up Jest’s Testing Environment\n
- \n6. Creating Your Code Files\n
- \n7. Writing Your Test Case\n
- \n8. Developing the Package’s 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
\nCompiling TypeScript to JavaScript\n
- \nHow to Compile Both ECMAScript and CommonJS Modules\n
\n
\nDistinguishing Between Source Code and Distribution Code\n
\nSpecifying Items to Compile\n
\nDefining Package’s Entry Point\n
\nSpecifying Package’s Declaration File\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 TypeScript\n
- \nConfiguring TypeScript\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
- \nStyling the Demo Website’s Elements\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. Compile Any Pending Code\n
- \n6. Stage and Commit Any Recent Changes\n
- \n7. Push Your Local Git Directory to the Remote Repo\n
- \n8. Sign In or Sign Up on the NPM Website\n
- \n9. Log In to NPM via the Terminal\n
- \n10. Confirm If Your Package’s Name Is Available\n
- \n11. Publish Your Package!\n
\n
\nLocal Testing of the Published Package\n
- \n1. Install the Package\n
- \n2. Import the Package\n
- \n3. Run Your Local Server\n
\n
\nProduction Testing of the Published Package\n
- \n1. Stage and Commit Your Changes\n
- \n2. Set Up a GitHub Remote Repository for Your Demo Test App\n
- \n3. Upload Your Local Git Directory to the Remote Repo\n
- \n4. Sign In or Create an Account on the Vercel Website\n
- \n5. Deploy Your Project to Vercel\n
- \n6. Test the Package on the Live Demo Website\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
- \n1. Create a Release GitHub Action Workflow File\n
- \n2. Define the Release GitHub Action Workflow\n
- \n3. How to Overwrite semantic-release’s Default Configurations\n
- \n4. Notify Developers That the Package Uses Automated 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 TypeScript Codebase\n
- \n1. Identify Independent Elements\n
- \n2. Split the Elements You Want to Extract into Their Separate Modules\n
- \n3. Import the Extracted Elements into the tweetButton.ts File\n
- \n4. Configure Jest to Strip the Extension from Import Statements\n
- \n5. Release the Latest Version of the Project\n
\n
\nEpilogue\n
- \nWhat’s Next?\n
- \nOne Last Favor\n
\n

Introduction

Welcome to Creating NPM Package with TypeScript!

If you’ve ever installed a JavaScript library using npm install, you’ve used a package from the NPM registry (a global database where developers publish and share reusable code).

This book is your step-by-step guide to joining them.

No matter what you call it—a package, library, plugin, framework, or tool—an NPM package is basically a project folder with a package.json file. This file explains what the package does, what it needs, and how others can use it.

Publishing your own NPM packages is more than a technical milestone. It allows you to:

\nShare your work with the world\n
\nContribute to the open-source community\n
\nShowcase your ability to ship production-ready tools\n
\n
\nStrengthen your skills in areas like:\n
\n
\n
- \nCommunication\n
- \nCollaboration\n
- \nOrganization\n
- \nDocumentation\n
- \nProblem-solving\n
\n
\n

By the end of this book, you’ll be able to build, test, and publish a TypeScript-based NPM package with confidence, using modern tools and workflows.

Why This Book Will Help You

The most effective way to master package publishing is to build as you learn, rather than only reading about it.

That’s why this book is hands-on and project-based. You’ll write code as you learn each concept. By the end, you’ll have a working, polished NPM package and the real-world experience to create more.

So open your code editor, such as VS Code, follow along, and build with me. This book is more than a tutorial. It’s a launchpad.

Let’s break free from tutorial hell and start shipping real things.

What You’ll Build

In this book, you’ll build a Tweet Button package. It’s a simple but scalable project that covers all the key parts of package development.

If the project sounds niche, don’t worry. The techniques you’ll learn apply to any kind of NPM package. Consider this project your sandbox. Feel free to build on it or branch out into your own ideas.

Use the Right Tools

To avoid unexpected issues, it is advisable to use the exact versions of dependencies specified in this book. This approach allows you to focus on learning rather than troubleshooting problems caused by newer releases.

Once you’ve completed the book, feel free to upgrade and experiment. And if something breaks? That’s your next learning opportunity.

What You Should Know First

You will benefit most from this book if you are already comfortable with:

\nJavaScript fundamentals\n
\nBasic TypeScript syntax\n
\nGit and GitHub basics\n

If these tools sound completely new, consider reviewing them first. But if you’ve ever committed code or written a .ts file, you’re ready.

Got Questions?

If you get stuck, have feedback, or just want to say hi, feel free to reach out! You can email me at contact@codesweetly.com or message me on Twitter (@oluwatobiss). I’d love to hear from you.

Let’s Begin!

Are you ready to build your first or next TypeScript-powered NPM package?

Let’s start by setting up your project the right way in the next chapter.

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 tutorial 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. The Syntax to Change to a Different Directory

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 create an account if you do not have one.\n
\nAfter signing in, create a new GitHub repository. You may use thank-you-tweet-button-001 or another name of your choice.\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 pushing (uploading) 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 the .git directory of your local main branch to the remote origin branch on GitHub.

\n\n\n\n

$\"An$

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

The next step is to set up the project with TypeScript. So, let’s do that now.

9. Installing TypeScript

Install TypeScript as a dev-dependency:

Figure 13. Command Line

1 npm i -D typescript@5.9.3\n

\n\n

The command above tells NPM to install typescript as your package’s dev-dependency.

\n\n\n\n

$\"An$

\nThe typescript package is a library containing TypeScript’s core functionality for type-checking and compiling your TypeScript and JavaScript code to the standard JavaScript version for any browser.\n
\ni is the shorthand notation for install.\n
\nThe -D flag is the shorthand notation for --save-dev.\n
\nWe installed typescript as dev-dependencies because you only need it for your package’s development and testing purposes. Users do not need it in production.\n

So, now that you’ve installed TypeScript, we can configure the TypeScript compiler.

10. Configuring the TypeScript Compiler

Developers use a tsconfig.json file to specify a project’s root directory and the options the compiler needs to compile the project’s files.

\n\n\n\n

$\"An$

TypeScript treats the folder containing tsconfig.json as your project’s root.

tsconfig.json is the default TypeScript configuration file name, but you may use custom names such as tsconfig.custom.json or codesweetly-type-config.json. This is useful in NPM package development when different configurations are needed for build, test, or IDE purposes.

Navigate to your package’s root directory and create a root configuration file along with four custom configuration files:

Figure 14. Command Line

1 touch tsconfig.json tsconfig.base.json tsconfig.test.json tsconfig.cjs.json tsconfig.esm.json\n

\n\n

\ntsconfig.base.json: A base configuration file having universal compiler options that other TypeScript configuration files can inherit through the extends property.\n
\ntsconfig.json: The project’s root configuration file for IDE tools like VSCode to use to provide IntelliSense and error checking while you work.\n
\ntsconfig.test.json: The configuration file containing the compiler options for test libraries, like Jest, to use during tests.\n
\ntsconfig.cjs.json: Used to configure TypeScript to output CommonJS (CJS) Module compilations.\n
\ntsconfig.esm.json: Used to configure TypeScript to output ECMAScript Module (ESM) compilations.\n

Open the newly created files and add the following configurations:

`tsconfig.base.json`

Figure 15. tsconfig.base.json

 1 {\n 2   \"compilerOptions\": {\n 3     \"target\": \"es2018\",\n 4     \"rewriteRelativeImportExtensions\": true,\n 5     \"allowSyntheticDefaultImports\": true,\n 6     \"esModuleInterop\": true,\n 7     \"forceConsistentCasingInFileNames\": true,\n 8     \"noEmitOnError\": true,\n 9     \"noImplicitReturns\": true,\n10     \"noUnusedLocals\": true,\n11     \"noUnusedParameters\": true,\n12     \"removeComments\": true,\n13     \"skipLibCheck\": true,\n14     \"strict\": true\n15   }\n16 }\n

\n\n

\ncompilerOptions: specifies how TypeScript should compile the project.\n
\ntarget tells TypeScript the JavaScript version you want to compile your code into.\n
\nrewriteRelativeImportExtensions: rewrites TypeScript file extensions such as .ts, .tsx, .mts, and .cts in relative import paths to their JavaScript equivalent extensions in output files.\n
\nallowSyntheticDefaultImports tells TypeScript to allow you to declare default imports like import feature from \"package\" rather than import * as feature from \"package\" when the module you are importing does not have a default export.\n
\nesModuleInterop tells TypeScript to make its compiled code interoperable (compatible) between CommonJS and ES Modules codebases by creating namespace objects for all imports.\n
\nforceConsistentCasingInFileNames tells TypeScript to throw an error when a program tries to reference a file with a casing different from the file’s name. For instance, referencing a codesweetly.ts file with ./CodeSweetly.ts will throw an error.\n
\nnoEmitOnError specifies that TypeScript should not emit any compiled code if errors exist in the TypeScript project.\n
\nnoImplicitReturns tells TypeScript to issue an error if a function’s code path does not return a value.\n
\nnoUnusedLocals tells TypeScript to issue an error if a codebase contains unused local variables.\n
\nnoUnusedParameters tells TypeScript to issue an error if a function has unused parameters.\n
\nremoveComments tells TypeScript to remove all comments when transpiling TypeScript files to JavaScript.\n
\nskipLibCheck specifies that TypeScript should not type-check declaration (.d.ts) files.\n
\nstrict tells TypeScript to use “strict mode” to type-check your codebase.\n

`tsconfig.json`

Figure 16. tsconfig.json

1 {\n2   \"extends\": \"./tsconfig.base.json\",\n3   \"compilerOptions\": {\n4     \"module\": \"nodenext\",\n5     \"moduleResolution\": \"nodenext\",\n6     \"noEmit\": true\n7   }\n8 }\n

\n\n

\nextends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.\n
\nmodule: specifies that TypeScript should use the file’s extension or the type field in the nearest package.json file to determine the syntax of the compiled file (.mts or modules for ESM output and .cts or commonjs for CJS output).\n
\nmoduleResolution: tells TypeScript to use the latest Node.js module resolution strategy to resolve (locate) the modules you import into your TypeScript files.\n
\nnoEmit: tells TypeScript not to output any file. It should only type check and report errors.\n

`tsconfig.test.json`

Figure 17. tsconfig.test.json

1 {\n2   \"extends\": \"./tsconfig.base.json\",\n3   \"compilerOptions\": {\n4     \"module\": \"commonjs\",\n5     \"moduleResolution\": \"node10\",\n6     \"noEmit\": true,\n7     \"isolatedModules\": true\n8   }\n9 }\n

\n\n

\nextends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.\n
\nmodule: specifies that TypeScript should use the CommonJS module syntax in the compiled file.\n
\nmoduleResolution: tells TypeScript to use the standard (loose) Node.js module resolution strategy of versions greater than 10 to resolve (locate) the modules you import into your TypeScript files. This lets the resolver find files automatically, even when the imports lack file extensions.\n
\nnoEmit: tells TypeScript not to output any file. It should only type check and report errors.\n
\nisolatedModules: tells TypeScript to transpile each file at a time rather than perform cross-file analysis. This prevents program-wide module resolution conflicts by ensuring TypeScript just transpiles the file and leaves Jest to resolve the module import statements.\n

`tsconfig.cjs.json`

Figure 18. tsconfig.cjs.json

1 {\n2   \"extends\": \"./tsconfig.base.json\",\n3   \"compilerOptions\": {\n4     \"module\": \"commonjs\",\n5     \"moduleResolution\": \"node10\",\n6     \"outDir\": \"dist/cjs\",\n7     \"declaration\": false\n8   }\n9 }\n

\n\n

\nextends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.\n
\nmodule: specifies that TypeScript should use the CommonJS module syntax in the compiled file.\n
\nmoduleResolution: tells TypeScript to use the standard (loose) Node.js module resolution strategy of versions greater than 10 to resolve (locate) the modules you import into your TypeScript files. This lets the resolver find files automatically, even when the imports lack file extensions.\n
\noutDir: tells TypeScript to emit its CommonJS transpiled files into the dist/cjs folder.\n
\ndeclaration: prevents TypeScript from generating d.ts type declaration files.\n

`tsconfig.esm.json`

Figure 19. tsconfig.esm.json

 1 {\n 2   \"extends\": \"./tsconfig.base.json\",\n 3   \"compilerOptions\": {\n 4     \"module\": \"es2020\",\n 5     \"moduleResolution\": \"bundler\",\n 6     \"outDir\": \"dist/esm\",\n 7     \"declaration\": true,\n 8     \"declarationDir\": \"dist/esm\"\n 9   }\n10 }\n

\n\n

\nextends: informs TypeScript to inherit the configurations in the ./tsconfig.base.json file.\n
\nmodule: specifies that TypeScript should use the ES2020 module syntax in the compiled file.\n
\nmoduleResolution: tells TypeScript to use the bundler-compatible module resolution strategy to resolve (locate) the modules you import into your TypeScript files. The bundler mode is best for frontend libraries that bundlers like Vite, Webpack, and Rollup will consume.\n
\noutDir: tells TypeScript to emit its ECMAScript Module (ESM) transpiled files into the dist/esm folder.\n
\ndeclaration: tells TypeScript to generate d.ts type declaration files from your package’s TypeScript and JavaScript files.\n
\ndeclarationDir: tells TypeScript to emit its d.ts type declaration files into the dist/esm folder.\n

Stage and commit your changes:

Figure 20. Command Line

1 git add -A && git commit -m \"Configure the typescript compiler\"\n

\n\n

After configuring the TypeScript compiler, continue to the next chapter to learn how to write a test case for your component.

Testing Package’s 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-typescript.\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-typescript.\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-typescript.\n

3. Configuring Jest to Test TypeScript 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-typescript.\n

4. Configuring Jest to Compile TypeScript 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-typescript.\n

5. Setting Up 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-typescript.\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-typescript.\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-typescript.\n

8. Developing the Package’s 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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\n

Compiling TypeScript to JavaScript

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

How to Compile Both ECMAScript and CommonJS 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-typescript.\n

Distinguishing Between Source Code and Distribution 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-typescript.\n

Specifying Items to Compile

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-typescript.\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-typescript.\n

Specifying Package’s Declaration 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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\n

Installing TypeScript

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

Configuring TypeScript

This content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-typescript.\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-typescript.\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-typescript.\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-typescript.\n

Styling the Demo Website’s 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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\n

5. Compile Any Pending 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-typescript.\n

6. 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-typescript.\n

7. 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-typescript.\nThis content is not available in the sample book. The book can be purchased on Leanpub at https://leanpub.com/creating-npm-package-with-typescript.\n

9. 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-typescript.\n

10. 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-typescript.\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-typescript.\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-typescript.\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-typescript.\n

11. 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-typescript.\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-typescript.\n

1. Install 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-typescript.\n

2. Import 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-typescript.\n

3. Run 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-typescript.\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-typescript.\n

1. Stage and Commit 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-typescript.\n

2. Set 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-typescript.\n

3. Upload Your Local Git Directory to the Remote Repo

5. Deploy Your Project to Vercel

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

6. Test 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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\n

Modularizing TypeScript 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-typescript.\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-typescript.\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-typescript.\n

`generateStarIcons.ts`

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

`showError.ts`

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

3. Import the Extracted Elements into the `tweetButton.ts` 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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\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-typescript.\n\n

\n\n","tocStructure",[467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500,501,502,503,504,505,506,507,508,509,510,511,512,513,514,515,516,517,518,519,520,521,522,523,524,525,526,527,528,529,530,531,532,533,534,535,536,537,538,539,540,541,542,543,544,545,546,547,548,549,550,551,552,553,554,555,556,557,558,559,560,561,562,563,564,565,566,567,568,569,570,571,572,573,574,575],{"_75":76,"_43":77,"_70":-5,"_78":79,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":85,"_70":-5,"_78":86,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":91,"_70":-5,"_78":92,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":94,"_70":-5,"_78":95,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":97,"_70":-5,"_78":98,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":100,"_70":-5,"_78":101,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":103,"_70":-5,"_78":104,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":106,"_70":-5,"_78":107,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":109,"_70":-5,"_78":110,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":113,"_70":-5,"_78":114,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":116,"_70":-5,"_78":117,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":119,"_70":-5,"_78":120,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":122,"_70":-5,"_78":123,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":125,"_70":-5,"_78":126,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":128,"_70":-5,"_78":129,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":131,"_70":-5,"_78":132,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":134,"_70":-5,"_78":135,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":137,"_70":-5,"_78":138,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":140,"_70":-5,"_78":141,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":143,"_70":-5,"_78":144,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":147,"_70":-5,"_78":148,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":150,"_70":-5,"_78":151,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":153,"_70":-5,"_78":154,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":156,"_70":-5,"_78":157,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":159,"_70":-5,"_78":160,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":162,"_70":-5,"_78":163,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":165,"_70":-5,"_78":166,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":168,"_70":-5,"_78":169,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":171,"_70":-5,"_78":172,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":174,"_70":-5,"_78":175,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":178,"_70":-5,"_78":179,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":181,"_70":-5,"_78":182,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":184,"_70":-5,"_78":185,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":187,"_70":-5,"_78":188,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":190,"_70":-5,"_78":191,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":194,"_70":-5,"_78":195,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":197,"_70":-5,"_78":198,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":200,"_70":-5,"_78":201,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":203,"_70":-5,"_78":204,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":207,"_70":-5,"_78":208,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":210,"_70":-5,"_78":211,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":214,"_70":-5,"_78":215,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":218,"_70":-5,"_78":219,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":222,"_70":-5,"_78":223,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":226,"_70":-5,"_78":227,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":230,"_70":-5,"_78":231,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":233,"_70":-5,"_78":234,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":236,"_70":-5,"_78":237,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":239,"_70":-5,"_78":240,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":242,"_70":-5,"_78":243,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":245,"_70":-5,"_78":246,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":248,"_70":-5,"_78":249,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":251,"_70":-5,"_78":252,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":254,"_70":-5,"_78":255,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":257,"_70":-5,"_78":258,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":260,"_70":-5,"_78":261,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":263,"_70":-5,"_78":264,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":266,"_70":-5,"_78":267,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":269,"_70":-5,"_78":270,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":272,"_70":-5,"_78":273,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":275,"_70":-5,"_78":276,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":279,"_70":-5,"_78":280,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":283,"_70":-5,"_78":284,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":287,"_70":-5,"_78":288,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":290,"_70":-5,"_78":291,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":293,"_70":-5,"_78":294,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":296,"_70":-5,"_78":297,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":299,"_70":-5,"_78":300,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":302,"_70":-5,"_78":303,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":305,"_70":-5,"_78":306,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":308,"_70":-5,"_78":309,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":311,"_70":-5,"_78":312,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":314,"_70":-5,"_78":315,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":317,"_70":-5,"_78":318,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":320,"_70":-5,"_78":321,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":324,"_70":-5,"_78":325,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":327,"_70":-5,"_78":328,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":330,"_70":-5,"_78":331,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":333,"_70":-5,"_78":334,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":337,"_70":-5,"_78":338,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":340,"_70":-5,"_78":341,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":343,"_70":-5,"_78":344,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":346,"_70":-5,"_78":347,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":349,"_70":-5,"_78":350,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":352,"_70":-5,"_78":353,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":355,"_70":-5,"_78":356,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":359,"_70":-5,"_78":360,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":362,"_70":-5,"_78":363,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":365,"_70":-5,"_78":366,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":368,"_70":-5,"_78":369,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":372,"_70":-5,"_78":373,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":375,"_70":-5,"_78":376,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":378,"_70":-5,"_78":379,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":381,"_70":-5,"_78":382,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":384,"_70":-5,"_78":385,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":388,"_70":-5,"_78":389,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":391,"_70":-5,"_78":392,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":394,"_70":-5,"_78":395,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":398,"_70":-5,"_78":399,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":401,"_70":-5,"_78":402,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":404,"_70":-5,"_78":405,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":408,"_70":-5,"_78":409,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":411,"_70":-5,"_78":412,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":414,"_70":-5,"_78":415,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":417,"_70":-5,"_78":418,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":420,"_70":-5,"_78":421,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":76,"_43":423,"_70":-5,"_78":424,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":427,"_70":-5,"_78":428,"_71":80,"_87":-5,"_88":-5,"_89":-5},{"_75":84,"_43":430,"_70":-5,"_78":431,"_71":80,"_87":-5,"_88":-5,"_89":-5},"publicChapterContent","nextChapter","sections",[],"routes/_store+/_layout","routes/_store+/_readers+/_layout","actionData","errors"]

Distinguishing Between Source Code and Distribution Code

Table of Contents

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

tsconfig.base.json

tsconfig.json

tsconfig.test.json

tsconfig.cjs.json

tsconfig.esm.json

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)

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. Compile Any Pending Code

`tsconfig.base.json`

`tsconfig.json`

`tsconfig.test.json`

`tsconfig.cjs.json`

`tsconfig.esm.json`

`generateStarIcons.ts`

`showError.ts`

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