我尝试使用文件的绝对路径导入枚举、对象、函数和精简组件,但编译器找不到它们。
下面是我如何导入的:
<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代码自动完成和错误消息的问题(红色的摇摆线)。
在.svelte文件中指定绝对路径是完美的,但在.ts文件中,typescript会不断警告错误,即使代码编译并工作:
"Cannot find module 'src/lib/objects/outlet' or its corresponding type declarations."
此错误语句出现在文件“src/lib/MainDataStructure”中。
我试过“重启TS服务器”,但没有用。我看过this question,它有很多关于如何解决这个问题的建议,但没有一个对我有用。
这是我当前的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" }]
}
这是我在项目中的目录的图像:
1条答案
按热度按时间js4nwp541#
在Node模块解析下(由
tsconfig/svelte
设置),这些不是绝对文件路径。它们将被解释为相对于Node模块,在本例中为src
。如果要引用本地文件,可能必须首先通过
tsconfig.json
定义路径别名:(If如果您的
baseUrl
是'.'
,则src
文件夹必须与配置处于同一级别。)当使用Vite时,你可能还需要让它的构建系统知道路径Map,例如存在
vite-tsconfig-paths
包,它提供了一个插件。如果你不想要额外的依赖项,或者这不起作用,你可以在
vite.config.js
中自己指定别名:Vite配置步骤对于构建工作很重要,
tsconfig
可能是使编辑器工具工作所必需的(例如VS Code中的代码完成和导航)。注意:SvelteKit有自己的配置来添加其他别名。