所以...
我正在尝试使用 Rollup 构建一个带有 Svelte 和 Typescript 的应用程序，当我尝试构建我的 Svelte 组件时，我似乎无法让它编译我的 .ts 文件，这些文件包含在 {{1 }} 组件。
我不断收到此错误：
.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/*"
]
}
}
}
）。
非常感谢任何帮助，因为我对拒绝工作的构建有点疯狂。
答案 0 :(得分：4)
我遇到了同样的问题。这似乎是一个复杂的错误，但这是为我解决的问题。 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 如果更新也是一种选择。