tsconfig
的paths
选项和vite.config.js
的resolve.alias
选项主要目的是相似的,即它们都能指定别名路径,使得你能从任何代码文件中,通过简短、易记和绝对的路径来引入其他模块。
但两者还是有以下主要差异:
- 适用环境:
tsconfig.json
的baseUrl
和paths
配置主要应用于 Typescript 编译环境,帮助 Typescript 转译器理解模块路径别名。vite.config.js
的resolve.alias
配置被 Vite 用来在 javascript bundling 阶段(或开发服务器中)处理模块路径别名。
- 关于运行时:
- Typescript 只是 javascript 的一个超集,所以它会被编译成纯 javascript 以在浏览器或 Node.js 中运行。在这个过程中,Typescript 编译器并不会去解析
paths
配置中的别名路径,这会导致运行时可能出现“找不到模块”之类的错误。为解决这个问题,我们在打包时应使用vite config.js
或 webpack 等工具的别名路径配置。 - 然而,
vite.config.js
的resolve.alias
在完整构建阶段将别名路径解析成实际路径,因此不存在这个问题。 你可以看到运行时浏览器或 Node.js 能够准确找到模块。
- Typescript 只是 javascript 的一个超集,所以它会被编译成纯 javascript 以在浏览器或 Node.js 中运行。在这个过程中,Typescript 编译器并不会去解析
所以,总结一下,tsconfig
的paths
用在编译阶段,帮助 TypeScript 理解模块别名路径;而vite.config.js
的resolve.alias
用在打包阶段,转化和解析别名路径以确保在运行时可以正确找到模块。
一般情况下,你需要在你的项目中同时配置tsconfig.json
中的paths
选项和vite.config.js
(或其他 bundler 如 webpack)中的alias
选项,两者是需要结合使用的。
这可以确保你在编码时获得正确的类型检查和自动补全能力(由tsconfig.json
中的paths
提供),同时在运行时能正确找到和加载模块(由vite.config.js
中的alias
提供)。