Zero-config CLI for TypeScript package development
CJS, ESM, UMD
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).
TSDX 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.
With TSDX, you can quickly bootstrap a new TypeScript project in seconds, instead of hours. Open up Terminal and enter:
npx tsdx create mylib
You'll be prompted to choose from one of three project templates:
|A plain TypeScript project setup you can use for any kind of module.
|A React package with necessary development dependencies and
@types installed. In addition, there is a Parcel-powered React playground you can use while you develop.
|Same as the basic React template, but with React Storybook already setup as well.
After you select one, TSDX 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.tsx if you chose one of the React templates) and go!
Below is a list of commands you will probably find useful:
Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX 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.
Bundles the package to the
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
Runs your tests using Jest.
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
Bundles and packages to the
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.
TSDX 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 TSDX. While you probably won't need to configure anything, you totally can do so with tsdx.config.js.
Before you start extending TSDX though, you'll want to fully understand what exactly TSDX does. In the next section, we'll go over all of these optimizations in finer detail.