redirect 是 bundleless 模式 的特定配置。该配置在 bundle 模式下不会生效,因为所有产物文件都被打包成一个文件,不需要进行文件导入路径的重定向。
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;
};const defaultRedirect = {
js: {
path: true,
extension: true,
},
style: {
path: true,
extension: true,
},
asset: {
path: true,
extension: true,
},
dts: {
path: true,
extension: false,
},
};配置产物文件中导入路径的重定向。
在 bundleless 模式下,通常需要使用别名或自动添加 ESM 产物的后缀。redirect 配置旨在解决这些问题。
控制 JavaScript 产物文件导入路径的重定向。
当 output.externals 被配置且请求被匹配时,redirect.js.path 和 redirect.js.extension 都不会生效,最终重写的请求路径将完全由 output.externals 控制。
是否自动重定向 JavaScript 产物文件的导入路径。
booleantrue当设置为 true 时,resolve.alias 和 resolve.aliasStrategy 将生效并应用于产物文件的重写导入路径。对于 TypeScript 项目,在 tsconfig.json 文件中配置 compilerOptions.paths 即可。
当设置为 false 时,导入路径将不受 resolve.alias、resolve.aliasStrategy 和 tsconfig.json 的影响。
在 tsconfig.json 中将 compilerOptions.paths 设置为 { "@/*": ["src/*"] } 时,产物文件将被重定向到正确的相对路径:
import { foo } from '@/foo'; // './src/bar.ts' 的源码 ↓
import { foo } from './foo.js'; // './dist/bar.js' 预期生成的代码
import { foo } from '@/foo'; // './src/utils/index.ts' 的源码 ↓
import { foo } from '../foo.js'; // './dist/utils/index.js' 预期生成的代码是否根据 JavaScript 产物文件自动重定向文件扩展名到导入路径。
booleantrue当设置为 true 时,无论原始扩展名或导入路径中是否指定,文件扩展名都将自动添加到产物文件的重写导入路径中。
当设置为 false 时,文件扩展名将保持原始导入路径不变(无论是否指定或指定为任意值)。
JavaScript 产物文件的扩展名与 autoExtension 配置有关。
对于在 Node.js 中运行的 ESM 产物,必须要指定模块导入路径的完整扩展名才能正确加载。Rslib 将根据实际的 JavaScript 产物文件自动添加对应的文件扩展名。
import { foo } from './foo'; // './src/bar.ts' 的源码 ↓
import { foo } from './foo.mjs'; // './dist/bar.mjs' 预期生成的代码
import { foo } from './foo.ts'; // './src/utils/index.ts' 的源码 ↓
import { foo } from './foo.mjs'; // './dist/utils/index.mjs' 预期生成的代码控制样式产物文件导入路径的重定向。
是否自动重定向样式产物文件的导入路径。
booleantrue当设置为 true 时,相关重定向规则与 redirect.js.path 相同。
当设置为 false 时,将保持原始导入路径不变。
导入普通样式文件时:
import '@/foo.css'; // './src/bar.ts' 的源码 ↓
import './foo.css'; // './dist/bar.js' 预期生成的代码
import '@/foo.css'; // './src/utils/index.ts' 的源码 ↓
import '../foo.css'; // './dist/utils/index.js' 预期生成的代码导入 CSS Modules 时:
import styles from '@/foo.css'; // './src/bar.ts' 的源码 ↓
import styles from './foo.css'; // './dist/bar.js' 预期生成的代码
import styles from '@/foo.css'; // './src/utils/index.ts' 的源码 ↓
import styles from '../foo.css'; // './dist/utils/index.js' 预期生成的代码是否根据样式产物文件自动重定向文件扩展名到导入路径。
booleantrue当设置为 true 时:
.css。当设置为 false 时,文件扩展名将保持原始导入路径。
默认情况下,当从 .less 文件导入时:
import './index.less'; // 源码 ↓
import './index.css'; // 预期生成的代码
import styles from './index.module.less'; // 源码 ↓
import styles from './index.module.mjs'; // 预期生成的代码控制资源文件导入路径的重定向。
是否自动重定向资源文件的导入路径。
booleantrue当设置为 true 时,相关重定向规则与 redirect.js.path 相同。
当设置为 false 时,将保持原始导入路径不变。
import url from '@/assets/logo.svg'; // './src/foo.ts' 的源码 ↓
import url from './assets/logo.svg'; // './dist/foo.js' 预期生成的代码是否根据资源产物文件自动重定向文件扩展名到导入路径。
booleantrue当设置为 true 时,导入资源文件的路径将被重写到对应的 JavaScript 产物文件。
当设置为 false 时,文件扩展名将保持原始导入路径。
import url from './assets/logo.svg'; // './src/foo.ts' 的源码 ↓
import url from './assets/logo.mjs'; // './dist/foo.mjs' 预期生成的代码在 JavaScript 文件中引用静态资源的方式及对应的产物结构,请查看 引用静态资源。
控制 TypeScript 类型文件中导入路径的重定向。
是否自动重定向 TypeScript 类型文件中的导入路径。
booleantrue当设置为 true 时,Rslib 会根据 tsconfig.json 文件中配置的 compilerOptions.paths,将类型声明产物文件中的导入路径重定向为对应的相对路径。
当设置为 false 时,将保持原始导入路径不变。
在 tsconfig.json 中将 compilerOptions.paths 设置为 { "@/*": ["src/*"] } 时,类型声明产物文件将被重定向到正确的相对路径:
import { foo } from '@/foo'; // './src/bar.ts' 的源码 ↓
import { foo } from './foo'; // './dist/bar.d.ts' 预期生成的代码
import { foo } from '@/foo'; // './src/utils/index.ts' 的源码 ↓
import { foo } from '../foo'; // './dist/utils/index.d.ts' 预期生成的代码是否根据 TypeScript 类型文件自动重定向文件扩展名到导入路径。
booleanfalse当设置为 true 时,类型声明文件中的引入路径会被重定向到对应的可以解析到相应类型声明文件的 JavaScript 文件扩展名。
当设置为 false 时,文件扩展名将保持原始导入路径不变(无论是否指定或指定为任意值)。
TypeScript 类型文件的扩展名与 dts.autoExtension 配置有关。
对于 .d.mts 类型文件,在一些场景下需要指定模块导入路径的完整扩展名才能正确加载。
import { foo } from './foo'; // './src/bar.ts' 的源码 ↓
import { foo } from './foo.mjs'; // './dist/bar.d.mts' 预期生成的代码
import { foo } from './foo.ts'; // './src/bar.ts' 的源码 ↓
import { foo } from './foo.mjs'; // './dist/bar.d.mts' 预期生成的代码