我试图使用绝对路径导入枚举、对象、函数和Svelte组件,但编译器找不到它们。
这是我导入它们的方式:
<script lang=ts>
import { MyEnum } from "src/lib/enums";
... code ...
<script/>
VS Code编译器对路径不会进行投诉。
运行应用程序时,在窗口中收到以下错误消息:
[plugin:vite:import-analysis] Failed to resolve import "src/lib/enums" from "src\lib\GUI\ObjectOnBoard.svelte". Does the file exist?
35 |
36 | const { Object: Object_1 } = globals;
37 | import { MyEnum } from "src/lib/enums";
| ^
我进行了一些研究,发现我的配置文件可能存在问题,但是我不知道如何配置这些文件以使引用工作。这些是我项目中的配置文件(我认为相关的文件?):
vite.config.ts:
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [svelte()],
})
svelte.config.js:
import sveltePreprocess from 'svelte-preprocess'
export default {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: sveltePreprocess(),
}
tsconfig.json:
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"resolveJsonModule": true,
"baseUrl": ".",
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in `.svelte` files.
*/
"allowJs": true,
"checkJs": true,
"isolatedModules": true,
},
"include": ["src/**/*.d.ts", "src/**/*.{svelte,ts,js}"],
"references": [{ "path": "./tsconfig.node.json" }]
}
下面给出的答案适用于编译代码,现在它实际上正在运行,这很棒!但是关于VS Code自动完成和错误消息(红色波浪线),仍然存在一些问题。
在.svelte文件内指定绝对路径无可挑剔,但在.ts文件中,即使代码编译成功并正常工作,typescript仍然会发出警告。
"Cannot find module 'src/lib/objects/outlet' or its corresponding type declarations."
这个错误出现在“src/lib/MainDataStructure”文件中。
我尝试了“重新启动TS服务器”,但没有帮助。我查看了这个问题,里面有很多解决方法,但都对我没用。
这是我的当前tsconfig.json文件:
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
"moduleResolution": "node",
"target": "esnext",
"useDefineForClassFields": true,
"module": "esnext",
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
/**
* Typecheck JS in `.svelte` and `.js` files by default.
* Disable checkJs if you'd like to use dynamic types in JS.
* Note that setting allowJs false does not prevent the use
* of JS in `.svelte` files.
*/
"allowJs": true,
"checkJs": true,
"isolatedModules": true,
"baseUrl": ".",
"paths": {
"src/*": [
"src/*"
],
}
},
"include": ["src/**/*.d.ts", "src/**/*.{svelte,ts,js}"],
"references": [{ "path": "./tsconfig.node.json" }]
}
这是我项目目录的图片:
vite.config.js
,它会从'vite'
进行导入。但是实际上并没有这样的文件夹 => 默认情况下,导入会在node_modules
中查找模块(除非以.
开头)。这种查找机制称为“模块解析”,而在 Node 中搜索node_modules
就是这种机制。 - H.B.baseUrl
选项指定了使用path
选项和其他导入时所使用的路径相对于哪个文件夹。 - H.B.