在 svelte 中设置 tsconfig 路径

使用 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.svelte

如果我这样做就有效import Home from './home/Home.svelte'我不明白为什么。

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

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

要声明它们，您需要安装一个名为的外部包@rollup/插件别名 https://github.com/rollup/plugins/tree/master/packages/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 alias.

Check 这个仓库 https://github.com/johannchopin/dummy-svelte-project-with-alias-example一个工作示例。