#lib.redirect

• Type:

type JsRedirect = {
  path?: boolean;
  extension?: boolean;
};

type StyleRedirect = {
  path?: boolean;
  extension?: boolean;
};

type AssetRedirect = {
  path?: boolean;
  extension?: boolean;
};

type DtsRedirect = {
  path?: boolean;
  extension?: boolean;
};

type Redirect = {
  js?: JsRedirect;
  style?: StyleRedirect;
  asset?: AssetRedirect;
  dts?: DtsRedirect;
};

• Default:

const defaultRedirect = {
  js: {
    path: true,
    extension: true,
  },
  style: {
    path: true,
    extension: true,
  },
  asset: {
    path: true,
    extension: true,
  },
  dts: {
    path: true,
    extension: false,
  },
};

Configure the redirect for import paths in output files.

In bundleless mode, there are often needs such as using aliases or automatically appending suffixes for ESM outputs. The redirect configuration is designed to address these issues.

#redirect.js

Controls the redirect of the import paths of output JavaScript files.

#redirect.js.path

Whether to automatically redirect the import paths of JavaScript output files.

• Type: boolean
• Default: true

When set to true, resolve.alias and resolve.aliasStrategy will take effect in the output file, and the import path of the output file will be rewritten. For TypeScript projects, just configure compilerOptions.paths in the tsconfig.json file.

When set to false, the import path will not be effected by resolve.alias, resolve.aliasStrategy and tsconfig.json.

• Example:

When set compilerOptions.paths to { "@/*": ["src/*"] } in tsconfig.json, the output file will be redirected to the correct relative path:

import { foo } from '@/foo'; // source code of './src/bar.ts' ↓
import { foo } from './foo.js'; // expected output of './dist/bar.js'

import { foo } from '@/foo'; // source code of './src/utils/index.ts' ↓
import { foo } from '../foo.js'; // expected output './dist/utils/index.js'

#redirect.js.extension

Whether to automatically redirect the file extension of import paths based on the JavaScript output files.

• Type: boolean
• Default: true

When set to true, the file extension of import paths in JavaScript output files that can be resolved correctly will be automatically completed or replaced.

When set to false, import paths will retain their original file extensions.

• Example:

For ESM outputs running in Node.js, the full extension to the module import path must be specified to load correctly. Rslib will automatically add corresponding file extensions based on the actual output JavaScript file.

import { foo } from './foo'; // source code of './src/bar.ts' ↓
import { foo } from './foo.mjs'; // expected output of './dist/bar.mjs'

import { foo } from './foo.ts'; // source code of './src/utils/index.ts' ↓
import { foo } from './foo.mjs'; // expected output './dist/utils/index.mjs'

#redirect.style

Controls the redirect of the import paths of output style files.

#redirect.style.path

Whether to automatically redirect the import paths of style output files.

• Type: boolean
• Default: true

When set to true, the relevant redirect rules are the same as redirect.js.path.

When set to false, the original import path will remain unchanged.

• Example:

When importing normal style files:

import '@/foo.css'; // source code of './src/bar.ts' ↓
import './foo.css'; // expected output of './dist/bar.js'

import '@/foo.css'; // source code of './src/utils/index.ts' ↓
import '../foo.css'; // expected output of './dist/utils/index.js'

When importing CSS Modules files:

import styles from '@/foo.css'; // source code of './src/bar.ts' ↓
import styles from './foo.css'; // expected output of './dist/bar.js'

import styles from '@/foo.css'; // source code of './src/utils/index.ts' ↓
import styles from '../foo.css'; // expected output of './dist/utils/index.js'

#redirect.style.extension

Whether to automatically redirect the file extension of import paths based on the style output files.

• Type: boolean
• Default: true

When set to true:

• When importing a normal style file, the path will be rewritten to .css.
• When importing CSS Modules, the path will be rewritten to the corresponding JavaScript output file.

When set to false, the file extension will remain unchanged from the original import path.

• Example:

When importing from a .less file:

import './index.less'; // source code ↓
import './index.css'; // expected output

import styles from './index.module.less'; // source code ↓
import styles from './index.module.mjs'; // expected output

#redirect.asset

Controls the redirect of the import paths of output asset files.

#redirect.asset.path

Whether to automatically redirect the import paths of asset output files.

• Type: boolean
• Default: true

When set to true, the relevant redirect rules are the same as redirect.js.path.

When set to false, the original import path will remain unchanged.

• Example:

import url from '@/assets/logo.svg'; // source code of './src/foo.ts' ↓
import url from './assets/logo.svg'; // expected output of './dist/foo.js'

#redirect.asset.extension

Whether to automatically redirect the file extension of import paths based on the asset output files.

• Type: boolean
• Default: true

When set to true, the paths of imported asset files will be redirected to the corresponding JavaScript output file.

When set to false, the file extension will remain unchanged from the original import path.

• Example:

import url from './assets/logo.svg'; // source code of './src/foo.ts' ↓
import url from './assets/logo.mjs'; // expected output of './dist/foo.mjs'

#redirect.dts

Controls the redirect of the import paths of output TypeScript declaration files.

#redirect.dts.path

Whether to automatically redirect the import paths of TypeScript declaration output files.

• Type: boolean
• Default: true

When set to true, Rslib will redirect the import path in the declaration output file to the corresponding relative path based on the compilerOptions.paths configured in tsconfig.json.

When set to false, the original import path will remain unchanged.

• Example:

When compilerOptions.paths is set to { "@/*": ["src/*"] } in tsconfig.json, the declaration output file will be redirected to the correct relative path:

import { foo } from '@/foo'; // source code of './src/bar.ts' ↓
import { foo } from './foo'; // expected output of './dist/bar.d.ts'

import { foo } from '@/foo'; // source code of './src/utils/index.ts' ↓
import { foo } from '../foo'; // expected output './dist/utils/index.d.ts'

#redirect.dts.extension

Whether to automatically redirect the file extension of import paths based on the TypeScript declaration output files.

• Type: boolean
• Default: false

When set to true, the file extension of the import path in the declaration file will be automatically completed or replaced with the corresponding JavaScript file extension that can be resolved to the corresponding declaration file.

When set to false, import paths will retain their original file extensions.

• Example:

When loading a module with moduleResolution: 'nodenext', the import path needs to include the full file extension. Rslib will automatically add the corresponding file extension based on the actual JavaScript output file.

import { foo } from './foo'; // source code of './src/bar.ts' ↓
import { foo } from './foo.mjs'; // expected output of './dist/bar.d.mts'

import { foo } from './foo.ts'; // source code of './src/bar.ts' ↓
import { foo } from './foo.mjs'; // expected output of './dist/bar.d.mts'