在 svelte 中设置 tsconfig 路径

Question

使用 Svelte 和 typescript，我想使用路径进行组件导入。

我有以下 tsconfig.json

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "main": "src/main.ts",
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
  "compilerOptions": {
    "baseUrl": "./",
    "module": "es2020",
    "target": "es2020",
    "paths": {
      "@src/*": ["src/*"],
      "@environments/*": ["src/environments/*"]
    }
  }
}

现在当我做

<script lang="ts">
  import Home from '@src/home/Home.svelte'
</script>

<style>
  main {
    width: 100%;
    height: 100%;
    position: relative;
  }
</style>

<main>
  <Home/>
</main>

home 指向一些细长的内部文件 =>

而不是我的 Home.svelte

如果我这样做，它会起作用，我不import Home from './home/Home.svelte' 知道为什么。

Answer 1

svelte 模板使用rollupjs作为捆绑器。它用于递归地解析所有文件并将其转换（编译为 Svelte）为.js每个浏览器都可以理解的单个文件。

因此，当您想在您的文件中使用别名时，import您需要告诉捆绑程序如何处理它。您需要在rollup.config.js文件中声明所有别名，就像在tsconfig.json.

要声明它们，您需要安装一个名为@rollup/plugin-alias 的外部包，并像以下中那样使用它rollup.config.js：

import alias from '@rollup/plugin-alias';
import path from 'path'

const projectRootDir = path.resolve(__dirname);


export default {
    ...
    plugins: [
        ...
        alias({
            entries: [
                { 
                    find: '@src',
                    replacement: path.resolve(projectRootDir, 'src')
                }
            ]
        }),
        ...
    ],
};

现在 rollupjs 能够解析包含@src别名的所有路径。

检查此存储库以获取工作示例。