在 Vite.js 项目中使用 `compilerOptions.baseUrl` ？

Question

我正在尝试从 Create React App 迁移到 Vite.js，但我遇到了导入别名问题。

在 Create React App 中，我有一个设置为 的jsconfig.json文件，这样如果我它会自动转换为指向 的相对导入。compilerOptions.baseUrlsrcimport Comp from 'components/MyComponentsrc/components/MyComponent

我不明白如何使用 Vite.js 和 esbuild 实现相同的目的？

Answer 1

根据评论，使用配置选项root并vite设置别名不是一个选项。

\n

这里提出的解决方案是动态构建别名。

\n

假设文件夹层次结构如下：

\n

root_project\n\xe2\x94\x82   README.md\n\xe2\x94\x82   package.json    \n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80resources\n\xe2\x94\x82   \xe2\x94\x82   index.html\n\xe2\x94\x82   |   app.js\n\xe2\x94\x82   |___components\n|   |   |\n|   |   |___ HelloWorld.svelte\n|   |\n\xe2\x94\x82   \xe2\x94\x82___assets\n|   |   |\n|   |   |___css\n|   |   |   |\n|   |   |   |___app.scss\n|   |   |   \n|   |___config\n|   |   |\n|   |   |___index.ts\n\xe2\x94\x82   |\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80node_modules\n\n

\n

在vite.config.js

\n

root_project\n\xe2\x94\x82   README.md\n\xe2\x94\x82   package.json    \n\xe2\x94\x82\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80resources\n\xe2\x94\x82   \xe2\x94\x82   index.html\n\xe2\x94\x82   |   app.js\n\xe2\x94\x82   |___components\n|   |   |\n|   |   |___ HelloWorld.svelte\n|   |\n\xe2\x94\x82   \xe2\x94\x82___assets\n|   |   |\n|   |   |___css\n|   |   |   |\n|   |   |   |___app.scss\n|   |   |   \n|   |___config\n|   |   |\n|   |   |___index.ts\n\xe2\x94\x82   |\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80node_modules\n\n

\n

现在，您可以在不更改导入指令的情况下包含组件：

\n

import { defineConfig } from \'vite\'\nimport path from \'path\'\nimport { readdirSync } from \'fs\'\n\nconst absolutePathAliases: { [key: string]: string } = {};\n// Root resources folder\nconst srcPath = path.resolve(\'./resources/\');\n// Ajust the regex here to include .vue, .js, .jsx, etc.. files from the resources/ folder\nconst srcRootContent = readdirSync(srcPath, { withFileTypes: true }).map((dirent) => dirent.name.replace(/(\\.ts){1}(x?)/, \'\'));\n\nsrcRootContent.forEach((directory) => {\n  absolutePathAliases[directory] = path.join(srcPath, directory);\n});\n\nexport default defineConfig({\n  root: \'resources\',\n  resolve: {\n    alias: {\n      ...absolutePathAliases\n    }\n  },\n\n  build: {\n    rollupOptions: {\n      input: \'/main.ts\'\n    }\n  }\n});\n\n

\n

您还可以直接包含resources文件夹中的文件：

\n

import HelloWorld from \'components/HelloWorld.svelte\'\n

\n

resources对于全局库下的资产和其他文件也是如此：

\n

import { foo } from \'config\'\n

\n

更多信息：vite 官方文档

\n