DTS#

Zero-config CLI for TypeScript package development

CJS, ESM, UMD

Treeshaking

Live Playground

Dev/Prod Builds

Zero-config

Project Templates

TypeScript

Rollup

Jest

Prettier

ESLint

VSCode

Despite all the recent hype, setting up a new TypeScript (x React) library can be tough. Between Rollup, Jest, tsconfig, Yarn resolutions, TSLint, and getting VSCode to play nicely....there is just a whole lot of stuff to do (and things to screw up).

DTS is a zero-config CLI that helps you develop, test, and publish modern TypeScript packages with ease--so you can focus on your awesome new library and not waste another afternoon on the configuration.

Quick Start#

With DTS, you can quickly bootstrap a new TypeScript project in seconds, instead of hours. Open up Terminal and enter:

bash
1
npx dts-cli create mylib

You'll be prompted to choose from one of three project templates:

Template	Description
`basic`	A plain TypeScript project setup you can use for any kind of module.
`react`	A React package with necessary development dependencies and `@types` installed. In addition, there is a Vite-powered React playground you can use while you develop.
`react-with-storybook`	Same as the basic React template, but with React Storybook already setup as well.

After you select one, DTS will create a folder with the project template in it and install all dependencies. Once that's done, you're ready-to-rock! TypeScript, Rollup, Jest, ESlint and all other plumbing is already setup with best practices. Just start editing src/index.ts (or src/index.tsx if you chose one of the React templates) and go!

Useful Commands#

Below is a list of commands you will probably find useful:

npm start or yarn start

Runs the project in development/watch mode. Your project will be rebuilt upon changes. DTS has a special logger for your convenience. Error messages are pretty printed and formatted for compatibility VS Code's Problems tab.

Your library will be rebuilt if you make edits.

npm run build or yarn build

Bundles the package to the dist folder. The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

npm test or yarn test

Runs your tests using Jest.

npm run lint or yarn lint

Runs Eslint with Prettier on .ts and .tsx files. If you want to customize eslint you can add an eslint block to your package.json, or you can run yarn lint --write-file and edit the generated .eslintrc.js file.

prepare script

Bundles and packages to the dist folder. Runs automatically when you run either npm publish or yarn publish. The prepare script will run the equivalent of npm run build or yarn build. It will also be run if your module is installed as a git dependency (ie: "mymodule": "github:myuser/mymodule#some-branch") so it can be depended on without checking the transpiled code into git.

Best Practices#

DTS includes best-practices and optimizations for modern NPM packages. These include things like the ability to have different development and production builds, multiple bundle formats, proper lodash-optimizations, treeshaking, and minification to name a few. All of these come out-of-the-box with DTS. While you probably won't need to configure anything, you totally can do so with dts.config.js.

Before you start extending DTS though, you'll want to fully understand what exactly DTS does. In the next section, we'll go over all of these optimizations in finer detail.