Language-tools: Verifizieren und dokumentieren Sie Typoskript + Svelte-Präprozessor, der sofort einsatzbereit ist

Funktioniert wie ein Zauber https://github.com/dummdidumm/template

Unterschiede zur Javascript-Version

• Folgende npm-Pakete werden hinzugefügt: svelte-preprocess typescript tslib @rollup/plugin-typescript
• rollup.config.js wird verbessert:

// ...
import sveltePreprocess from 'svelte-preprocess';
import typescript from '@rollup/plugin-typescript';

// ...
  plugins: [
    svelte({
      // ...
      preprocess: sveltePreprocess(), // <--
    }),

    // ...
    commonjs(),
    typescript(), // <-- added below commonjs
    // ...

Vorbehalte:

• Eintragsdatei ( main.js ) muss noch eine Javascript-Datei sein

probiert und verifiziert!

__Danke für all Ihre Arbeit!__ Es scheint, dass die Datei tsconfig.json in der Vorlage fehlt:

rollup v1.32.1
bundles src/main.js → public/build/bundle.js...
(!) Plugin typescript: @rollup/plugin-typescript TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '[]'.
[!] (plugin typescript) Error: @rollup/plugin-typescript: Couldn't process compiler options
Error: @rollup/plugin-typescript: Couldn't process compiler options
  at error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:5400:30)

Der folgende Inhalt von tsconfig.json ist in Ordnung?

{
  "include": ["src/**/*"],
  "exclude": ["node_modules/*"],
  "compilerOptions": {
    "target": "es2017",
    "types": ["svelte"],
    "moduleResolution": "node"
  }
}

rollup v1.32.1
bundles src/main.js → public/build/bundle.js...
(!) Plugin typescript: @rollup/plugin-typescript TS18003: No inputs were found in config file '/Users/bgd/Documents/Projects/Essential modules/tsconfig.json'. Specified 'include' paths were '["src/**/*"]' and 'exclude' paths were '["node_modules/*"]'.
[!] (plugin typescript) Error: @rollup/plugin-typescript: Couldn't process compiler options
Error: @rollup/plugin-typescript: Couldn't process compiler options
    at error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at emitParsedOptionsErrors (/Users/bgd/Documents/Projects/Essential modules/node_modules/@rollup/plugin-typescript/dist/index.js:310:17)
    at Object.buildStart (/Users/bgd/Documents/Projects/Essential modules/node_modules/@rollup/plugin-typescript/dist/index.js:469:13)
    at /Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/node-entry.js:13117:25
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 2)

Quelle: https://codechips.me/how-to-use-typescript-with-svelte/

Interessant ... Ich brauchte nicht einmal ein tsconfig.json also habe ich es einfach weggelassen. Ich habe keinen dieser Fehler bekommen.

Ich habe versucht, es mit Sapper zu verwenden, und jetzt habe ich diesen Fehler.

$ sapper dev
✗ server
@rollup/plugin-typescript: Couldn't process compiler options
✗ client
@rollup/plugin-typescript: Couldn't process compiler options
internal/modules/cjs/loader.js:584
    throw err;

export const preprocess = sveltePreprocess({
  postcss: true,
  style: sass(),
})

 plugins: [ 
    ...
    ...
    svelte({
        dev,
        hydratable: true,
        emitCss: true,
        preprocess,
      }),

     ...
    ....
     commonjs(),
      typescript(),

Das Template war als Proof of Concept gedacht, dass die IDE out of the box mit Svelte funktioniert. Dinge wie tsconfig.json oder Sapper kamen mir damals nicht in den Sinn.
Typoskript mit Sapper wird im Allgemeinen derzeit nicht gut unterstützt, denke ich -

Die Zusammenarbeit mit Sapper steht kurz bevor. Es gibt zwei Hauptprobleme:

1. Sapper schluckt Fehler im Zusammenhang mit TypeScript. Dies ist in master behoben, aber noch nicht freigegeben. Das könnte der Grund sein, warum Sie nur "Compileroptionen konnten nicht verarbeitet werden" sehen und keine hilfreichere Meldung
2. Sie können TypeScript noch nicht mit Vorlagen verwenden, die preload . Es ist eine PR ausstehend, die dies beheben würde: https://github.com/sveltejs/sapper/pull/1222

Ich habe eine Abzweigung von Sapper erstellt, mit der Sie in TypeScript codieren können, bis die oben genannten Fixes zusammengeführt und veröffentlicht werden: https://github.com/sveltejs/sapper/issues/760#issuecomment -634423518

@dummdidumm Danke für deine schnelle Antwort 🙂

Leider besteht das Problem weiterhin.

Dies ist meine package.json Datei:

{
  "name": "svelte-app",
  "version": "0.0.1",
  "scripts": {
    "build": "npm install && rollup -c",
    "dev": "npm install && rollup -c -w",
    "start": "sirv public --single",
    "lint": "eslint . --ext .js,.svelte; exit 0",
    "lint-report": "eslint . --ext .js,.svelte -o ./.eslint-report.html -f html; exit 0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "11.0.2",
    "@rollup/plugin-node-resolve": "^7.0.0",
    "@rollup/plugin-typescript": "^4.1.2",
    "eslint": "^7.0.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-svelte3": "^2.7.3",
    "rollup": "^1.20.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.0.0",
    "svelte-preprocess": "^3.8.0",
    "tslib": "^2.0.0",
    "typescript": "^3.9.5"
  },
  "dependencies": {
    "page": "^1.11.6",
    "sirv-cli": "^0.4.4"
  }
}

und die rollup.config.js Datei:

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import autoPreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";

const production = !process.env.ROLLUP_WATCH;

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.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("public/build/bundle.css");
      },
      preprocess: autoPreprocess()
    }),

    // 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(),

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

function serve () {
  let started = false;

  return {
    writeBundle () {
      if (!started) {
        started = true;

        require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
          stdio: ["ignore", "inherit", "inherit"],
          shell: true
        });
      }
    }
  };
}

Ich kann den Fehler selbst nicht reproduzieren. Aber wenn man sich Ihr package.json ansieht, scheint es, dass Sie Rollup 1.x anstelle von 2.x verwenden. Vielleicht behebt es das Problem, alle Abhängigkeiten auf die neueste Version zu aktualisieren?

@dummdidumm Ich habe alle Abhängigkeiten auf ihre neueste Version gestoßen. Ich habe meine benutzerdefinierte tsconfig.json Datei, die package-lock.json Datei und den node_modules Ordner gelöscht. Das Problem besteht weiterhin

Fehlermeldung:

rollup v2.15.0
bundles src/main.js → public/build/bundle.js...
(!) Plugin typescript: @rollup/plugin-typescript TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '[]'.
[!] (plugin typescript) Error: @rollup/plugin-typescript: Couldn't process compiler options
Error: @rollup/plugin-typescript: Couldn't process compiler options
    at error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:213:30)
    at throwPluginError (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:17117:12)
    at Object.error (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:17911:24)
    at emitParsedOptionsErrors (/Users/bgd/Documents/Projects/Essential modules/node_modules/@rollup/plugin-typescript/dist/index.js:310:17)
    at Object.buildStart (/Users/bgd/Documents/Projects/Essential modules/node_modules/@rollup/plugin-typescript/dist/index.js:469:13)
    at /Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:18109:25
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Promise.all (index 2)
    at Object.rollupInternal (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/rollup.js:19099:9)
    at Task.run (/Users/bgd/Documents/Projects/Essential modules/node_modules/rollup/dist/shared/watch.js:715:28)

Installierte Svelte VS Code-Erweiterungen:

• Svelte 3 Snippets - v0.4.0
• Svelte Beta - v99.0.41
• Svelte Intellisense - v0.7.1

Andere installierte VS Code-Erweiterungen:

• Tags für automatisches Schließen - v0.5.7
• Bracket-Paar-Colorizer - v1.0.61
• ESLint - v2.1.5
• JavaScript-Booster - v0.12.3
• Material-Icon-Theme - v4.1.0
• NativeScript - v0.11.0
• NativeScript Extend - v2.11.10
• npm - v0.3.12
• npm Intellisense - v1.3.0
• Pfad Intellisense - v2.2.0
• PHP Intelepense - v1.4.1
• Zweigsprache 2 - v0.9.1
• Vetur - v0.24.0

package.json Datei:

{
  "name": "svelte-app",
  "version": "0.0.1",
  "scripts": {
    "build": "npm install && rollup -c",
    "dev": "npm install && rollup -c -w",
    "start": "sirv public --single",
    "lint": "eslint . --ext .js,.svelte; exit 0",
    "lint-report": "eslint . --ext .js,.svelte -o ./.eslint-report.html -f html; exit 0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^13.0.0",
    "@rollup/plugin-node-resolve": "^8.0.1",
    "@rollup/plugin-typescript": "^4.1.2",
    "eslint": "^7.2.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.21.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-svelte3": "^2.7.3",
    "rollup": "^2.15.0",
    "rollup-plugin-livereload": "^1.3.0",
    "rollup-plugin-svelte": "^5.2.2",
    "rollup-plugin-terser": "^6.1.0",
    "svelte": "^3.23.1",
    "svelte-preprocess": "^3.9.7",
    "tslib": "^2.0.0",
    "typescript": "^3.9.5"
  },
  "dependencies": {
    "page": "^1.11.6",
    "sirv-cli": "^0.4.6"
  }
}

rollup.config.js Datei:

import svelte from "rollup-plugin-svelte";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import livereload from "rollup-plugin-livereload";
import { terser } from "rollup-plugin-terser";
import autoPreprocess from "svelte-preprocess";
import typescript from "@rollup/plugin-typescript";

const production = !process.env.ROLLUP_WATCH;

export default {
  input: "src/main.js",
  output: {
    sourcemap: true,
    format: "iife",
    name: "app",
    file: "public/build/bundle.js"
  },
  plugins: [
    svelte({
      dev: !production,
      css: css => {
        css.write("public/build/bundle.css");
      },
      preprocess: autoPreprocess()
    }),
    resolve({
      browser: true,
      dedupe: ["svelte"]
    }),
    commonjs(),
    typescript(),
    !production && serve(),
    !production && livereload("public"),
    production && terser()
  ],
  watch: {
    clearScreen: false
  }
};

function serve () {
  let started = false;

  return {
    writeBundle () {
      if (!started) {
        started = true;

        require("child_process").spawn("npm", ["run", "start", "--", "--dev"], {
          stdio: ["ignore", "inherit", "inherit"],
          shell: true
        });
      }
    }
  };
}

svelte.config.js Datei:

const autoPreprocess = require("svelte-preprocess");

module.exports = {
  preprocess: [
    autoPreprocess()
  ]
};

@elvticc Ich habe das gleiche Problem.

Um es zu beheben, habe ich:

1. main.js in main.ts
2. Und in rollup.config.json geändert: input: 'src/main.js' in input: 'src/main.ts'
   (Hinweis: Sie müssen auch ein tsconfig.json haben)

Ich weiß, dummdidumm hat entry file (main.js) has still to be a javascript file gesagt, aber bei mir funktioniert es nicht :confused:

Sehr interessant, es scheint, als ob diese Setups noch etwas Vodoo haben - schön, dass es trotzdem funktioniert! Ich werde zum Core-Svelte-Repo gehen, um die Erstellung einer offiziellen Typoskript-Vorlage dort zu besprechen.

@AlexandreCantin @elvticc

Wenn Sie sich das Repository ansehen, werden Sie unter anderem feststellen, dass sich im Verzeichnis /src ( stuff.ts ) eine Typescript-Datei befindet.

Ich bin auf den gleichen Fehler gestoßen, Typescript sagt, dass keine Quellen gefunden wurden. Ich habe versucht, es in main.ts mit einem tsconfig.json ändern, wie oben vorgeschlagen, aber dies brach aufgrund von exports not found mit einem seltsamen Commonjs-Modulexport, der im gebündelten Code automatisch generiert wurde (vielleicht ändern sich der Modulstil würde dies beheben).

Was funktioniert, ist einfach ein empty.ts (oder eine beliebige Datei) innerhalb von /src (ohne tsconfig.json falls gewünscht) zu erstellen und dann dev .

Bearbeiten: Nach einigem Experimentieren ist hier jede Kombination, die funktioniert:

• main.js , Nein tsconfig.json , jedes einzelne .ts innerhalb von /src
• main.ts , Nein tsconfig.json , ts-ignore zum App-Import hinzufügen:
  
  
  
  • ts // @ts-ignore import App from './App.svelte'
  
  
• main.ts , mit tsconfig.json und Einstellungen mit einer der folgenden Optionen:

{
  "compilerOptions": {
    "target": "ES2015 (or greater)",
    "module": "ES2015, ES2020, or ESNEXT"
  }
}

Danke für die Untersuchung @GavinRay97 ! Ich habe die Vorlage aktualisiert.