Customization#

Rollup#

DTS uses Rollup under the hood. The defaults are solid for most packages (Formik uses the defaults!). However, if you do wish to alter the rollup configuration, you can do so by creating a file called dts.config.js (or dts.config.ts) at the root of your project like so:

dts.config.js

js
1
// Not transpiled with TypeScript or Babel, so use plain Es6/Node.js!
2
/**
3
 * @type {import('dts-cli').DtsConfig}
4
 */
5
module.exports = {
6
  // This function will run for each entry/format/env combination
7
  rollup(config, options) {
8
    return config; // always return a config.
9
  },
10
};

or

js
1
const defineConfig = require('dts-cli').defineConfig;
2

3
module.exports = defineConfig({
4
  // This function will run for each entry/format/env combination
5
  rollup: (config, options) => {
6
    return config; // always return a config.
7
  },
8
});

dts.config.ts

typescript
1
import { defineConfig } from 'dts-cli';
2

3
export default defineConfig({
4
  rollup: (config, options) => {
5
    return config; // always return a config.
6
  },
7
});

The options object contains the following:

tsx
1
export interface DtsOptions {
2
  // path to file
3
  input: string;
4
  // Name of package
5
  name: string;
6
  // JS target
7
  target: 'node' | 'browser';
8
  // Module format
9
  format: 'cjs' | 'umd' | 'esm' | 'system';
10
  // Environment
11
  env: 'development' | 'production';
12
  // Path to tsconfig file
13
  tsconfig?: string;
14
  // Is error extraction running?
15
  extractErrors?: boolean;
16
  // Is minifying?
17
  minify?: boolean;
18
  // Is this the very first rollup config (and thus should one-off metadata be extracted)?
19
  writeMeta?: boolean;
20
  // Only transpile, do not type check (makes compilation faster)
21
  transpileOnly?: boolean;
22
}

Example: Adding Postcss#

js
1
const postcss = require('rollup-plugin-postcss');
2
const autoprefixer = require('autoprefixer');
3
const cssnano = require('cssnano');
4

5
module.exports = {
6
  rollup(config, options) {
7
    config.plugins.push(
8
      postcss({
9
        plugins: [
10
          autoprefixer(),
11
          cssnano({
12
            preset: 'default',
13
          }),
14
        ],
15
        inject: false,
16
        // only write out CSS for the first bundle (avoids pointless extra files):
17
        extract: !!options.writeMeta,
18
      })
19
    );
20
    return config;
21
  },
22
};

Babel#

You can add your own .babelrc to the root of your project and DTS will merge it with its own Babel transforms (which are mostly for optimization), putting any new presets and plugins at the end of its list.

Jest#

You can add your own jest.config.js to the root of your project and DTS will shallow merge it with its own Jest config.

ESLint#

You can add your own .eslintrc.js to the root of your project and DTS will deep merge it with its own ESLint config.