Svelte：导入的 TypeScript 文件无法识别

Question

我正在尝试使用 Rollup 构建带有 Svelte 和 TypeScript 的应用程序，当我尝试构建我的 Svelte 组件时，我似乎无法让它编译我的 .ts 文件，这些文件包含在 .svelte 组件中。

我不断收到此错误：

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/ui/pages/files-page/utils/mapPaths.ts (1:12)
1: import type { PathMapping } from '~/types/path.d';
               ^

这是我的FilesPage.svelte，其中包括mapPaths.ts 文件：

<script lang="ts">
  import FileList from '~/ui/layouts/file-list/FileList.svelte';

  import mapPaths from './utils/mapPaths';

  export let paths: string[] = [];

  $: mappedPaths = mapPaths(paths);
</script>

<FileList paths={mappedPaths} />

还有我的mapPaths.ts 文件：

import type { PathMapping } from '~/types/path.d';

export default (paths: string[]): PathMapping => {
  const mapping = paths.reduce(
    (m, path) => {
      const root = path.replace(/_\d+$/, '');
      m.set(root, (m.get(root) || 0) + 1);
      return m;
    },
    new Map() as Map<string, number>
  );

  return Array.from(mapping.entries());
};

这是我的rollup.config.js：

import typescript from '@rollup/plugin-typescript';
import nodeResolve from '@rollup/plugin-node-resolve';
import alias from '@rollup/plugin-alias';
import commonjs from 'rollup-plugin-commonjs';
import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';

export default {
  input: 'src/web.ts',

  output: {
    sourcemap: false,
    format: 'iife',
    name: 'app',
    file: 'build/web.js'
  },

  plugins: [
    svelte({
      preprocess: sveltePreprocess(),
      emitCss: false
    }),

    alias({
      entries: [
        { find: '~', replacement: 'src' }
      ]
    }),

    nodeResolve({
      dedupe: ['svelte']
    }),

    commonjs(),

    typescript()
  ]
};

我的tsconfig.json：

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules/*"
  ],
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "module": "es2020",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  }
}

我一直在玩插件的顺序，但无济于事。据我所知，它们应该按照推荐的顺序排列（可能alias 除外）。

非常感谢任何帮助，因为我对拒绝工作的构建有点发疯了。

Answer 1

我遇到了同样的问题。这似乎是一个复杂的错误，但这是为我解决的问题。 This comment in the rollup github 说：

现在的快速修复是手动将您的 rootDir 编译器选项设置为 “源”。

所以我在 rollup.config.js 的 typescript 插件里面的 ts 编译器选项中添加了这个标志（当然，我的源目录也称为 src，你可以更改它以适应你的目录结构）：

plugins: [
    ...
    typescript({
      ...
      rootDir: './src',
    }),
    ...
  ],

很遗憾，我不能保证它也适用于您，因为它是一种快速修复。问题seems to be fixed in newer versions of typescript 如果更新也是一种选择。