Att inkludera en Typescript-fil från en Svelte-komponent med Rollup visar ett parseringsfel
Kort bakgrund
- Jag vill skapa en Visual Studio Code-tillägg som har webvyer
- Jag ville använda Svelte/Typescript för att göra webbvyerna, Typescript för att göra själva tillägget
- Detta har lett mig till en ovanlig projektstruktur, där jag använder esbuild för att bygga tillägget, rollup för att bygga webvyer och använder separata tsconfig.json för webvyer jämfört med tillägget
Vad är fel?
Jag får hela tiden ett parsningfel när jag försöker göra webview-rollup-byggnaden:
src/webviews/pages/LogViewerPage.ts → out/compiled/LogViewerPage.js...
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/core/LogData/LogData.ts (1:12)
1: import type { ILogData } from "./ILogData";
^
2:
3: export class LogData implements ILogData {
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
at error (C:\...\node_modules\rollup\dist\shared\rollup.js:198:30)
at Module.error (C:\...\node_modules\rollup\dist\shared\rollup.js:12560:16)
at Module.tryParse (C:\...\node_modules\rollup\dist\shared\rollup.js:12937:25)
at Module.setSource (C:\...\node_modules\rollup\dist\shared\rollup.js:12842:24)
at ModuleLoader.addModuleSource (C:\...\node_modules\rollup\dist\shared\rollup.js:22291:20)
Sammanhang?
Exempel på repo här: https://github.com/svew/svelte-typescript-headache/tree/master
src/core/LogData/LogData.ts:
import type { ILogData } from "./ILogData";
export class LogData implements ILogData {
private _name: string;
constructor (name: string) {
this._name = name;
}
get name(): string {
return this._name;
}
}
src/webviews/components/LogViewer.svelte:
<script lang="ts">
import { onMount } from 'svelte';
import { LogData } from "@core/LogData";
let logData: LogData | undefined;
onMount(() => {
logData = new LogData("MyLogData");
});
</script>
<body>
{#if logData}
<p>{logData.name}</p>
{/if}
</body>
src/webviews/tsconfig.json:
{
"extends": "@tsconfig/svelte/tsconfig.json",
"include": [
"./**/*",
],
"exclude": [
"node_modules/*",
],
"compilerOptions": {
"strict": true,
"rootDir": "../",
"baseUrl": "../",
"paths": {
"@core/*": [
"./core/*",
],
"@webviews/*": [
"./webviews/*",
],
},
"types": [
"node",
"svelte",
],
}
}
rollup.config.js:
import svelte from 'rollup-plugin-svelte';
import nodeResolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import typescript from "@rollup/plugin-typescript";
import css from 'rollup-plugin-css-only';
import sveltePreprocess from "svelte-preprocess";
const production = process.argv.includes("prod");
const plugins = [
svelte({
//include: 'src/webviews/**/*.svelte',
compilerOptions: {
// enable run-time checks when not in production
dev: !production,
},
preprocess: sveltePreprocess(),
}),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
typescript({
tsconfig: "src/webviews/tsconfig.json",
sourceMap: !production,
inlineSources: !production,
}),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
nodeResolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
];
const pageName = "LogViewerPage";
export default {
//input: "src/extension.ts",
input: "src/webviews/pages/" + pageName + ".ts",
output: {
sourcemap: true,
format: "iife",
name: "app",
file: "out/compiled/" + pageName + ".js",
},
plugins: plugins,
watch: {
clearScreen: false,
},
};
Vad jag har försökt:
- Modifierar tsoncifg rootDir/baseUrl
- Modifiering av sveltePreprocessor-argumenten i rollup.config.js, särskilt TypeScript-argumenten
- Ändra argumenten för TypeScript-plugins i rollup.config.js
- Uppdaterar till de senaste paketen
Väldigt förbryllad över hur man ska fixa detta