npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ts-npm-package-boilerplate-2024

v0.0.1

Published

TS NPM Package Boilerplate for 2024

Downloads

4

Readme

TS NPM Package Boilerplate (2024)

This TypeScript NPM package boilerplate is designed to kickstart the development of TypeScript libraries for Node.js and the browser. It features a modern build setup with TypeScript, leveraging tsup for bundling and @changesets/cli for version management. The package exports a simple function as an example to demonstrate the setup.

Features

  • TypeScript for type safety.
  • Biome for linting and formatting.
  • Dual package output (CommonJS and ESM) for compatibility.
  • Type definitions for TypeScript projects.
  • Automated build and release scripts.

Prerequisites

  • Node.js v22.5.1 (ensure you have this version by using .nvmrc)
  • pnpm (Follow pnpm installation guide if you haven't installed it)
  • Biome for linting and formatting

Reuse

Step 1: Clone the Boilerplate Repository

First, clone the existing repository simonorzel26/npm-package-boilerplate-2024 to your local machine. This step involves copying all the files from the original repository.

git clone https://github.com/simonorzel26/npm-package-boilerplate-2024.git <your-new-repository-name>
cd <your-new-repository-name>

Step 2: Remove the Existing Git History

Since you're creating a new project, you'll likely want to start with a clean history:

rm -rf .git

This command removes the .git directory which contains all the git history of the original repository.

Step 3: Initialize a New Repository

Now, initialize a new git repository:

git init
git add .
git commit -m "Initial commit based on npm-package-boilerplate-2024"

Step 4: Create a New Repository on GitHub

Go to GitHub and create a new repository named <your-new-repository-name>. Do not initialize it with a README, .gitignore, or license since you are importing an existing project.

Step 5: Push to GitHub

Link your local repository to the GitHub repository and push the changes:

git remote add origin https://github.com/<your-username>/<your-new-repository-name>.git
git branch -M main
git push -u origin main

Replace <your-username> with your GitHub username.

Installation

To use this boilerplate for your project, clone the repository and install the dependencies.

pnpm install

Usage

After installation, you can start using the boilerplate to build your TypeScript library. Here's how to import and use the example function exported by this package:

import { foo } from 'your-package-name';

console.log(foo('Hello, world!'));

Development

This package includes several scripts to help with development:

  • pnpm run build: Compiles the TypeScript source code and generates both CommonJS and ESM modules along with type definitions.
  • pnpm run lint: Runs TypeScript compiler checks without emitting code to ensure type safety.
  • pnpm run release: Bundles the package and publishes it to NPM with version management.

Adding New Functions

To add a new function, create a .ts file in the src directory. For example:

// src/newFunction.ts
export const newFunction = (): void => {
  // Implementation here
};

Then, export it from index.ts:

// src/index.ts
export * from './newFunction';

Contributing

Contributions are welcome! Please submit a pull request or create an issue for any features, bug fixes, or improvements.

License

This project is open-sourced under the MIT License. See the LICENSE file for more details.

Author

Simon Orzel