typescript - 在 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.svelte

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

标签： typescriptsvelte

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别名的路径。

检查此 repo以获取工作示例。