使用Rollup构建Svelte+TypeScript WebView时遇解析错误求助

背景概述 #

• 开发带WebView的VS Code扩展
• WebView采用Svelte/TypeScript开发，扩展本体采用TypeScript开发
• 项目结构特殊：用esbuild构建扩展，用Rollup构建WebView，两者使用独立的tsconfig.json

问题现象 #

执行WebView的Rollup构建时，持续触发解析错误：

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)

相关上下文 #

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,
    },
};

已尝试的解决方法 #

• 修改tsconfig的rootDir/baseUrl配置
• 修改rollup.config.js中sveltePreprocessor的TypeScript相关参数
• 修改rollup.config.js中typescript插件的参数
• 更新至最新版本的依赖包

目前仍未找到解决方法，急需技术支持

内容的提问来源于stack exchange，提问作者Walter Svenddal