Language-tools: Vérifiez et documentez le dactylographe + le préprocesseur svelte fonctionnant hors de la boîte

Créé le 4 juin 2020 · 14Commentaires · Source: sveltejs/language-tools

Nous pensons que vous pouvez créer un projet svelte et simplement inclure les modules de nœuds pour le préprocesseur svelte pour que le support de lang='ts' fonctionne. Vérifiez que cela fonctionne et ajoutez quelques notes 👍

Source

orta

❤6 👀1

Commentaire le plus utile

@elvticc J'ai le même problème.

Pour y remédier, j'ai :

renommé main.js en main.ts
Et dans rollup.config.json , changé : input: 'src/main.js' en input: 'src/main.ts'
(Remarque : Vous devez également avoir un tsconfig.json )

Je sais, dummdidumm a dit entry file (main.js) has still to be a javascript file mais ça ne marche pas pour moi :confused:

AlexandreCantin le 13 juin 2020

👍5 🎉2

Tous les 14 commentaires

Fonctionne comme un charme https://github.com/dummdidumm/template

Différences avec la version javascript

Les packages npm suivants sont ajoutés : svelte-preprocess typescript tslib @rollup/plugin-typescript
rollup.config.js est amélioré :

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

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

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

Avertissements :

le fichier d'entrée ( main.js ) doit toujours être un fichier javascript

dummdidumm le 4 juin 2020

👍3

essayé et vérifié !

sw-yx le 5 juin 2020

__Merci pour tout votre travail !__ Il semble que le fichier tsconfig.json soit manquant dans le modèle :

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)

Le contenu tsconfig.json est-il OK ?

{
  "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)

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

bgrand-ch le 5 juin 2020

Intéressant... Je n'avais même pas besoin d'un tsconfig.json alors je l'ai laissé de côté. Je n'ai eu aucune de ces erreurs.

dummdidumm le 6 juin 2020

😕2

J'essaie de l'utiliser avec le sapeur et maintenant j'ai cette erreur.

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

hellpirat le 6 juin 2020

Le modèle a été conçu comme une preuve de concept que l'IDE fonctionne hors de la boîte avec svelte. Des choses comme tsconfig.json ou Sapeur n'étaient pas dans mon esprit à ce moment-là.
Le texte dactylographié avec Sapper en général n'est pas bien pris en charge en ce moment, je pense - @benmccann en savez-vous plus à ce sujet ?

dummdidumm le 6 juin 2020

👍1

Les choses sont proches de travailler avec Sapper. Il y a deux problèmes principaux :

Sapper avale les erreurs liées à TypeScript. Ceci est corrigé dans master , mais pas encore publié. Cela pourrait être la raison pour laquelle vous voyez simplement "Impossible de traiter les options du compilateur" et pas un message plus utile
Vous ne pouvez pas encore utiliser TypeScript avec des modèles contenant preload . Il y a un PR en attente qui résoudrait ce problème : https://github.com/sveltejs/sapper/pull/1222

J'ai créé un fork de Sapper que vous pouvez utiliser pour coder dans TypeScript jusqu'à ce que les correctifs ci-dessus soient fusionnés et publiés : https://github.com/sveltejs/sapper/issues/760#issuecomment -634423518

benmccann le 6 juin 2020

@dummdidumm Merci pour votre réponse rapide

Malheureusement, le problème persiste.

Voici mon fichier package.json :

{
  "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"
  }
}

et le fichier rollup.config.js :

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

bgrand-ch le 8 juin 2020

Je ne peux pas reproduire l'erreur moi-même. Mais en regardant votre package.json il semble que vous utilisiez le rollup 1.x au lieu de 2.x . Peut-être que le fait de remplacer toutes les dépendances par la dernière version le résout pour vous ?

dummdidumm le 9 juin 2020

👀1 👍1

@dummdidumm J'ai tsconfig.json , le fichier package-lock.json et le dossier node_modules . Le problème persiste

Message d'erreur:

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)

Extensions Svelte VS Code installées :

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

Autres extensions VS Code installées :

Balise de fermeture automatique - v0.5.7
Coloriseur de paires de supports - v1.0.61
ESLint - v2.1.5
Booster JavaScript - v0.12.3
Thème d'icônes matérielles - v4.1.0
NativeScript - v0.11.0
Extension NativeScript - v2.11.10
npm - v0.3.12
npm Intellisense - v1.3.0
Chemin Intellisense - v2.2.0
PHP Intelephense - v1.4.1
Twig Language 2 - v0.9.1
Vétur - v0.24.0

Fichier package.json :

{
  "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"
  }
}

Fichier rollup.config.js :

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

Fichier svelte.config.js :

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

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

bgrand-ch le 10 juin 2020

@elvticc J'ai le même problème.

Pour y remédier, j'ai :

renommé main.js en main.ts
Et dans rollup.config.json , changé : input: 'src/main.js' en input: 'src/main.ts'
(Remarque : Vous devez également avoir un tsconfig.json )

Je sais, dummdidumm a dit entry file (main.js) has still to be a javascript file mais ça ne marche pas pour moi :confused:

AlexandreCantin le 13 juin 2020

👍5 🎉2

Très intéressant, il semble qu'il y ait encore du Vodoo dans ces configurations - content que cela fonctionne de toute façon ! Je vais me diriger vers le référentiel svelte de base pour discuter de la création d'un modèle de script dactylographié officiel là-bas.

dummdidumm le 14 juin 2020

❤3

@AlexandreCantin @elvticc

Si vous regardez le dépôt, l'une des choses que vous remarquerez est qu'il y a un fichier Typescript dans le répertoire /src ( stuff.ts ).

Je rencontrais la même erreur, Typescript disant aucune source trouvée. J'ai essayé de le changer en main.ts avec un tsconfig.json comme suggéré ci-dessus, mais cela s'est cassé à cause de exports not found avec une exportation de module commonjs étrange générée automatiquement dans le code fourni (peut-être en changeant le style du module résoudrait cela).

Ce qui fonctionne, c'est simplement de créer un empty.ts (ou n'importe quel fichier) à l'intérieur de /src (sans tsconfig.json si vous le souhaitez), puis d'exécuter dev .

Edit : Après quelques expérimentations, voici toutes les combinaisons qui fonctionnent :

main.js , Non tsconfig.json , tout simple .ts intérieur de /src
main.ts , Non tsconfig.json , ajoutez ts-ignore à l'importation de l'application :
- ts // @ts-ignore import App from './App.svelte'
main.ts , avec tsconfig.json , et les paramètres avec l'un des éléments suivants :

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

GavinRay97 le 15 juin 2020

👍4 🚀1

Merci pour l'enquête @GavinRay97 ! J'ai mis à jour le modèle.

dummdidumm le 16 juin 2020

❤1

Cette page vous a été utile?

0 / 5 - 0 notes

Questions connexes

Prise en charge de l'importation de composants Svelte sans extension

matthewmueller · 5Commentaires

Erreur lors de l'utilisation de la nouvelle syntaxe CSS dans VS Code

koddr · 6Commentaires

Chaque problème de frappe de bloc

JAD3N · 5Commentaires

Liste des fonctionnalités ou feuille de route

Kingwl · 6Commentaires

Erreur dactylographiée - L'objet est inconnu lors de l'appel à : "event" pour le composant enfant de la bibliothèque externe JS

MDoder97 · 3Commentaires