为 vscode 扩展开发设置 svelte 和 typescript “watch”脚本

Question

我是 typescript、svelte 和 vscode 扩展开发的初学者，这是我的第一个问题????。

我的目标是为我的项目启用自动编译 svelte 和 typescript 文件。

我开始在我的终端中使用“yo code”创建打字稿模板项目，然后我添加了 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 测试会话没有显示。

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 文件用于细长文件

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

是否有任何错误的配置？有人有什么建议吗？

Answer 1

有了这些选项，你想要"rollup-plugin-svelte": "^6.0.0"。升级到 7 时发生了重大变化。请参阅 changelog。