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 🙏

© 2025 – Pkg Stats / Ryan Hefner

presetter-preset-cjs

v7.1.0

Published

An opinionated presetter preset for an commonjs package

Downloads

395

Readme

Logo

🏄🏻 A collection of opinionated configurations for a typescript project for presetter

•   Quick Start   •   Project Structure   •   Customization   •   Scripts   •

npm build maintainability coverage security dependencies license

presetter-preset-cjs is an opinionated extension of presetter-preset-essentials but loaded with tools to help you to develop an common js application with ease. As the same as presetter-preset-esm, it's designed to help you get started with a typescript project in a fraction of time you usually take via presetter.

With presetter-preset-cjs, it provides everything bundled from presetter-preset-essentials, plus the ease of writing an commonjs application.

Quick Start

To kickstart a CommonJS application, set the following in your package.json and follow the guide below.

{
  "type": "commonjs",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",
  "scripts": {
    "prepare": "run prepare",
    "build": "run build",
    "clean": "run clean",
    "test": "run test",
    "watch": "run watch",
    "coverage": "run coverage"
  }
}

FULL DOCUMENTATION IS AVAILABLE HERE

1. Bootstrap your project with presetter-preset-cjs

On your project root, create a presetter.config.ts file with the following content:

// presetter.config.ts
export { default } from 'presetter-preset-cjs';

or if customization is needed. For example, you can extend the configuration with more presets:

// presetter.config.ts

import { preset } from 'presetter';
import cjs from 'presetter-preset-cjs';
import other from 'other-preset';

export default preset('project name', {
  extends: [cjs, other],
  override: {
    // override the configuration here
  },
});

Then, install your project as usual with npm install or any package manager you prefer.

2. Develop and run life cycle scripts provided by the preset

At this point, all development packages specified in the preset are installed, and now you can try to run some example life cycle scripts (e.g. run prepare).

Demo

Project Structure

After installation, your project file structure should resemble the following, or include more configuration files if you also installed other presets.

Implement your business logic under source and prepare tests under spec.

TIPS You can always change the source directory to other (e.g. src) by setting the source variable in presetter.config.ts. See the customization section below for more details.

(root)
 ├─ .git
 ├─ .husky
 ├─ .lintstagedrc.json
 ├─ .npmignore
 ├─ .prettierrc.json
 ├─ presetter.config.ts
 ├─ node_modules
 ├─ source
 │   ├─ <folders>
 │   ├─ index.ts
 │   ├─ (auxiliary).ts
 ├─ spec
 │   ├─ *.spec.ts
 ├─ package.json
 ├─ eslint.config.ts
 ├─ tsconfig.json
 ├─ tsconfig.build.json
 └─ vitest.config.ts

Customization

By default, this preset exports a handy configuration for a typescript project. You can further customize (either extending or replacing) the configuration by specifying the changes in the config file presetter.config.ts.

Script Template Summary

  • run build: Transpile source code from typescript and replace any mapped paths
  • run clean: Clean up any previously transpiled code
  • run develop -- <file path>: Create a service that run the specified file whenever the source has changed
  • run test: Run all tests
  • run watch: Rerun all tests whenever the source has change
  • run coverage: Run all test with coverage report
  • run release: Bump the version and automatically generate a change log
  • run release -- --prerelease <tag>: Release with a prerelease tag