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-project-builder

v3.3.4

Published

A powerful TypeScript project builder supporting multiple output formats, automatic cleaning, and customizable plugins.

Downloads

264

Readme

ts-project-builder

npm version npm downloads License

A powerful TypeScript project builder supporting multiple output formats, automatic cleaning, and customizable plugins.

Features

  • 🛠️ Primarily operated through the CLI with various configurable flags and parameters
  • 📦 Supports multiple output formats, including CommonJS, ESM, UMD, and more
  • 🔧 Built-in support for TypeScript, JSON, and CommonJS modules
  • 🧹 Automatically cleans output directories
  • 💨 Minification support with esbuild
  • 📂 Preserves module structure if required
  • 🚀 Easy configuration through a config file
  • 📜 Customizable Rollup plugins for input and output
  • 🔄 Merges or replaces configurations for flexible build setups

Environment Requirements

  • Node.js version 18.12 or higher

Installation

Add dependency (example using pnpm).

pnpm add -D ts-project-builder

You can also use yarn, npm, or bun to add the dependency.

That's it! You're ready to use this package for your project. Check out the usage instructions below ✨.

Usage

Use the -h flag to view usage and all available flags:

ts-project-builder -h # package.json script
npx ts-project-builder -h # terminal

Here is the most basic usage, using ./src/index.ts as the entry point:

ts-project-builder ./src/index.ts

By default, it will generate files in both CJS and ESM formats. The output directory is ./dist, with file extensions cjs and mjs respectively.

The input path supports Glob Patterns. Before building, the paths will be processed using glob. Please use quotation marks when specifying the paths.

You can also specify multiple inputs simultaneously and designate the output formats:

# amd, cjs, esm
ts-project-builder ./src/cli.ts ./src/index.ts -f amd,cjs,esm

# cjs
ts-project-builder './src/**/*.ts' -f cjs

[!IMPORTANT] Ensure that input parameters are specified before any other flags to avoid incorrect parsing.

By default, different formats will generate files with different extensions, as shown in the table below:

| Format | Extension | | -------- | --------- | | amd | amd.js | | cjs | cjs | | commonjs | cjs | | es | mjs | | esm | mjs | | iife | iife.js | | module | mjs | | system | system.js | | systemjs | system.js | | umd | umd.js |

This builder includes the following Rollup input plugins (listed in execution order):

For more flags and usage details, please refer to flags.

Flags

--clean

Clean the target directory or files before output.

If the flag is used without any value, all formats will be enabled. If specific formats are provided, only the specified formats will be enabled.

# All formats will clean the target directory or files before output
ts-project-builder ./src/index.ts --clean

# Only the CJS format will clean the target directory or files before output
ts-project-builder ./src/index.ts --clean cjs

[!IMPORTANT] An error will be thrown if the path to be cleaned is not under the directory where the builder is running. To force cleaning, please use this flag.

-c, --config

The path to the config file. Only .mjs files are accepted.

Default: ./ts-project-builder.config.mjs

--dirs

The output directory paths. Refer to the Rollup documentation for more details.

Default: ./dist

You can specify different output paths for different formats, separated by commas and designated using the <format>=[path] method. If there is no <format>= and only a path is provided, that path will be used as the common value for all formats.

# All formats are output to ./dist
ts-project-builder ./src/index.ts --dirs ./dist

# CJS output to ./cjs, others output to ./dist
ts-project-builder ./src/index.ts --dirs cjs=./cjs

# ESM output to ./dist, others output to ./output
ts-project-builder ./src/index.ts --dirs ./output,esm=./dist

--exts

The output file extensions.

If not set, or if the corresponding format is not specified, the default file extension from the table above will be used.

The priority is: specified value > specified common value > table value.

The configuration method is the same as for the --dirs flag.

# CJS uses cjs, others use js
ts-project-builder ./src/index.ts --exts cjs=cjs,js

# ESM uses js, others use the corresponding values from the table
ts-project-builder ./src/index.ts --exts esm=js

--files

The output file paths. Refer to the Rollup documentation for more details.

If this flag is set, it will override the --dirs flag.

The configuration method is the same as for the --dirs flag.

# CJS output to ./cjs.cjs, others output to the ./dist directory
ts-project-builder ./src/index.ts --files cjs=./cjs.cjs

# CJS output to ./cjs/index.cjs, ESM output to the ./esm directory, others output to the ./dist directory
ts-project-builder ./src/index.ts --dirs cjs=./cjs-dist,esm=./esm --files cjs=./cjs/index.cjs

--force-clean

Force clean the target directory or files before output. Must be used together with the --clean flag.

The configuration method is the same as for the --clean flag.

[!CAUTION] Use this flag with caution.

-f, --formats

The output formats. Can accept multiple formats, but duplicates will only be considered once.

Default: cjs,esm

-m, --minify

Minify the code using the minify feature provided by rollup-plugin-esbuild before the final output.

The configuration method is the same as for the --clean flag.

--preserve-modules

Refer to the Rollup documentation for more details.

The configuration method is the same as for the --clean flag.

--preserve-modules-roots

Refer to the Rollup documentation for more details.

Default: ./src

The configuration method is the same as for the --dirs flag.

Config File

If you need to pass options to built-in plugins, modify the output of specific formats, or use other options, you can use a config file.

By default, the build process will attempt to read the ./ts-project-builder.config.mjs file. You can use the -c flag to specify the config file path.

After creating the file, fill in the following code:

import { defineConfig } from 'ts-project-builder';

export default defineConfig({});

For detailed config instructions, please refer to the Config interface in this file.

Direct Import Usage

You can also directly import the Builder class in your code, create a builder instance, and execute the builder.build method.

import { Builder } from 'ts-project-builder';

const builder = new Builder({
    inputs: ['./src/index.ts'],
    output: {
        formats: new Set([
            'cjs',
            'esm'
        ])
    }
});

await builder.build();

License

MIT License