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 说：

Quick fix for now is to manually set your rootDir compiler option to "src".

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

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

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

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

Svelte: imported TypeScript files not recognized

rollup

typescript

svelte-3