lib.redirect#

• Type:

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

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

type Redirect = {
  js?: JsRedirect;
  style?: StyleRedirect;
};

• Default:

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

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 products. The redirect configuration is designed to address these issues.

Common scenarios that require redirect:

• Automatically convert compilerOptions.paths in tsconfig.json to correct relative path

  For example, 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'

• Automatically append file suffix

  For ESM products that run in Node.js, you must specify the exact full path for the module import to load correctly. Rslib will automatically add the suffix based on the output file.

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

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 and applied in the rewritten import path of the output file. For TypeScript projects, you only need to 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.

redirect.js.extension#

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

• Type: boolean
• Default: true

When set to true, the file extension will automatically be added to the rewritten import path of the output file, regardless of the original extension or whether it is specified in the import path.

When set to false, the file extension will remain unchanged from the original import path in the rewritten import path of the output file (regardless of whether it is specified or specified as any value).

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, the rules are the same as redirect.js.path.

• Type: boolean

• Default: true

• 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 to 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 the .css file. 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