svelte + rollup + typescript + tsconfig 路径：使扩展名为 .svelte 的文件可通过绝对路径导入

Question

有没有人知道如何使这项工作的秘密知识？我正在尝试使用 tsconfig 路径从相对导入迁移到绝对导入，并且在解析 *.svelte 文件时遇到问题。

tsconfig.json:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "lib": [
      "dom",
      "es2020"
    ],
    "paths": { //❗
      "~/*": [
        "src/*"
      ]
    },
    "strict": true,
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules/*",
    "public/*"
  ]
}

rollup.config.js:

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
// ...
plugins: [
  // ...
  resolve({
    browser: true,
    dedupe: ["svelte"],
  }),
  commonjs(),
  typescript({
    sourceMap: !production,
    inlineSources: !production,
  }),
  // ...
],
...

src/App.svelte:

<script lang="ts">
  import Test from '~/Test.svelte'; //❗
  //import Test from './Test.svelte'; // works without issues
</script>

<Test />

汇总输出：

$ rollup -c -w
rollup v2.44.0
bundles src/main.ts → public\build\bundle.js...
LiveReload enabled on port 35730
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
~/Test.svelte (imported by src\App.svelte)
(!) Missing global variable name
Use output.globals to specify browser global variable names corresponding to external modules
~/Test.svelte (guessing 'Test')
created public\build\bundle.js in 845ms
...

运行时错误：

Uncaught ReferenceError: Test is not defined
    at bundle.js:367:3

测试项目（克隆，

yarn

和

yarn run serve

）： https://github.com/earshinov/bug-svelte-rollup-typescript-paths

我去的最深的是这里： https://github.com/microsoft/TypeScript/blob/v4.2.3/src/compiler/moduleNameResolver.ts#L1062。 TypeScript 在模块扩展方面做了一些奇怪的事情，所以这可能就是问题所在。

类似问题：

• 在 svelte 中设置 tsconfig 路径 - 这是 3 年前的，最好的答案是在 rollup config 中单独配置别名。

  @rollup/plugin-typescript

  声称正确配置模块分辨率，因此使用别名听起来像是一个丑陋的解决方法。