typescript Svelte:按绝对路径导入不起作用

ffx8fchx  于 2023-04-22  发布在  TypeScript
关注(0)|答案(1)|浏览(152)

我尝试使用文件的绝对路径导入枚举、对象、函数和精简组件,但编译器找不到它们。
下面是我如何导入的:

<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" }]
}

这是我在项目中的目录的图像:

js4nwp54

js4nwp541#

在Node模块解析下(由tsconfig/svelte设置),这些不是绝对文件路径。它们将被解释为相对于Node模块,在本例中为src
如果要引用本地文件,可能必须首先通过tsconfig.json定义路径别名:

{
    "compilerOptions": {
        "paths": {
            "src/*": [
                "src/*"
            ],
        },
        // ...
}

(If如果您的baseUrl'.',则src文件夹必须与配置处于同一级别。)
当使用Vite时,你可能还需要让它的构建系统知道路径Map,例如存在vite-tsconfig-paths包,它提供了一个插件。
如果你不想要额外的依赖项,或者这不起作用,你可以在vite.config.js中自己指定别名:

// ...
import path from 'path';

export default defineConfig({
    // ...
    resolve: {
        alias: {
            src: path.resolve('src/'),
        },
    }
});

Vite配置步骤对于构建工作很重要,tsconfig可能是使编辑器工具工作所必需的(例如VS Code中的代码完成和导航)。
注意:SvelteKit有自己的配置来添加其他别名。

相关问题