為 vscode 擴展開發設置 svelte 和 typescript “watch”腳本

Question

我是 typescript、svelte 和 vscode 擴展開發的初學者，這是我的第一個問題。

我的目標是為我的項目啟用 svelte 和 typescript 文件的自動編譯。

我開始在我的終端中使用“yo code”創建 typescript 模板項目，然后我添加了 rollup.conifg.js 文件，以使用他自己的 tsconfig.json 文件處理我的 /webviews 子文件夾中的文件。

我首先在 package.json 中設置腳本來運行編譯 svelte 文件。 一切正常，除了警告

> rollup -c && tsc -p ./

[rollup-plugin-svelte] Unknown "dev" option. Please use "compilerOptions" for any Svelte compiler configuration.
[rollup-plugin-svelte] Unknown "css" option. Please use "compilerOptions" for any Svelte compiler configuration.

webviews/pages/HelloWorld.ts → out/compiled/HelloWorld.js...
(!) Plugin typescript: @rollup/plugin-typescript: Typescript 'sourceMap' compiler option must be set to generate source maps.
created out/compiled/HelloWorld.js in 1.9s

在這種情況下，我在 package.json 文件中的腳本設置如下

"scripts":
    {
        "vscode:prepublish": "npm run compile",
        "compile": "rollup -c && tsc -p ./",
        "lint": "eslint src --ext ts",
        "watch": "tsc -watch -p ./",
        "pretest": "npm run compile && npm run lint",
        "test": "node ./out/test/runTest.js"
    }

所以我想將“watch”腳本設置為自動等待文件更改（ts 和 svelte 文件）。 我編輯了 package.json 文件中的腳本部分，如下所示：

"scripts":
    {
        "vscode:prepublish": "npm run compile",
        "compile": "rollup -c && tsc -p ./",
        "lint": "eslint src --ext ts",
        "watch": "concurrently \"rollup -c -w\" \"tsc -watch -p ./\"",
        "pretest": "npm run compile && npm run lint",
        "test": "node ./out/test/runTest.js"
    }

“Task-watch”終端向我顯示這兩個腳本工作正常，但通常會啟動的“其他”vscode 測試 session 沒有出現。

12:18:24 AM - Starting compilation in watch mode...
[1] 
[0] [rollup-plugin-svelte] Unknown "dev" option. Please use "compilerOptions" for any Svelte compiler configuration.
[0] [rollup-plugin-svelte] Unknown "css" option. Please use "compilerOptions" for any Svelte compiler configuration.
[0] rollup v2.35.1
[0] bundles webviews/pages/HelloWorld.ts → out/compiled/HelloWorld.js...
[0] created out/compiled/HelloWorld.js in 2.8s
[1] 
[1] 12:18:28 AM - Found 0 errors. Watching for file changes.

實際上我的 rollup.config.js 文件是

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import { terser } from "rollup-plugin-terser";
import sveltePreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";
import path from "path";
import fs from "fs";

const production = !process.env.ROLLUP_WATCH;

export default fs
  .readdirSync(path.join(__dirname, "webviews", "pages"))
  .map((input) => {
    const name = input.split(".")[0];
    return {
      input: "webviews/pages/" + input,
      output: {
        sourcemap: true,
        format: "iife",
        name: "app",
        file: "out/compiled/" + name + ".js",
      },
      plugins: [
        svelte({
          // enable run-time checks when not in production
          dev: !production,
          // we'll extract any component CSS out into
          // a separate file - better for performance
          css: (css) => {
            css.write(name + ".css");
          },
          preprocess: sveltePreprocess(),
        }),

        // 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
        resolve({
          browser: true,
          dedupe: ["svelte"],
        }),
        commonjs(),
        typescript({
          tsconfig: "webviews/tsconfig.json",
          sourceMap: !production,
          inlineSources: !production,
        }),

        // In dev mode, call `npm run start` once
        // the bundle has been generated
        // !production && serve(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        // !production && livereload("public"),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser(),
      ],
      watch: {
        clearScreen: false,
      },
    };
  });

所以我的 tsconfig.json 文件在根文件夾中

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "outDir": "out",
        "lib": [
            "es6"
        ],
        "sourceMap": true,
        "rootDir": "src",
        "strict": true   /* enable all strict type-checking options */
        /* Additional Checks */
        // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
        // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
        // "noUnusedParameters": true,  /* Report errors on unused parameters. */
    },
    "exclude": [
        "node_modules",
        ".vscode-test",
        "webviews"
    ]
}

和我的“webviews”文件夾中的 tsconfig.js 文件，用於 svelte 文件

{
    "extends": "@tsconfig/svelte/tsconfig.json",
    "include": ["./**/*", ],
    "exclude": ["../node_modules/*"],
    "compilerOptions": {"strict": true, }
}

有沒有錯誤的配置？ 有人有什么建議嗎？

Answer 1

使用這些選項，您需要"rollup-plugin-svelte": "^6.0.0" 。 升級到 7 時發生了重大更改。請參閱更改日志。