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.
TSDX comes with the "battery-pack included" and is part of a complete TypeScript breakfast:
- Bundles your code with Rollup and outputs multiple module formats (CJS, UMD & ESM) plus development and production builds
- Comes with treeshaking, ready-to-rock lodash optimizations, and minification/compression
- Live reload / watch-mode
- Works with React
- Human readable error messages (and in VSCode-friendly format)
- Bundle size snapshots
- Jest test runner setup with sensible defaults via
- Zero-config, single dependency
npx tsdx create mylib cd mylib yarn start
That's it. You don't need to worry about setting up Typescript or Rollup or Jest or other plumbing. Just start editing
src/index.ts and go!
Below is a list of commands you will probably find useful.
npm start or
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.
npm run build or
Bundles the package to the
The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).
npm test or
Runs the test watcher (Jest) in an interactive mode. By default, runs tests related to files changed since the last commit.
TSDX is ripped out of Formik's build tooling. TSDX is very similar to @developit/microbundle, but that is because Formik's Rollup configuration and Microbundle's internals have converged around similar plugins over the last year or so.
Comparison to Microbundle
- TSDX includes out-of-the-box test running via Jest
- TSDX includes a bootstrap command and default package template
- TSDX is 100% TypeScript focused. While yes, TSDX does use Babel to run a few optimizations (related to treeshaking and lodash), it does not support custom babel configurations.
- TSDX outputs distinct development and production builds (like React does) for CJS and UMD builds. This means you can include rich error messages and other dev-friendly goodies without sacrificing final bundle size.
DescriptionRebuilds on any changeUsage$ tsdx watch [options]Options-i, --entry Entry module--target Specify your target environment--name Specify name exposed in UMD builds--format Specify module format-h, --help Displays this messageExamples$ tsdx watch --entry src/foo.tsx$ tsdx watch --target node$ tsdx watch --name Foo$ tsdx watch --format cjs,es
DescriptionBuild your project once and exitUsage$ tsdx build [options]Options-i, --entry Entry module--target Specify your target environment--name Specify name exposed in UMD builds--format Specify module format-h, --help Displays this messageExamples$ tsdx build --entry src/foo.tsx$ tsdx build --target node$ tsdx build --name Foo$ tsdx build --format cjs,es
This runs Jest v24.x in watch mode. See https://jestjs.io for options. If you are using the React template, jest uses the flag
--env=jsdom by default.