Language-tools: Verifique e documente o texto digitado + pré-processador svelte funcionando fora da caixa

Criado em 4 jun. 2020 · 14Comentários · Fonte: sveltejs/language-tools

Achamos que você pode fazer um projeto svelte e apenas incluir os módulos de nó para o pré-processador svelte para fazer o suporte lang='ts' funcionar. Verifique se funciona e adicione algumas notas 👍

Fonte

orta

❤6 👀1

Comentários muito úteis

@elvticc Estou com o mesmo problema.

Para consertar, eu tenho:

renomeado main.js para main.ts
E em rollup.config.json , mudou: input: 'src/main.js' para input: 'src/main.ts'
(Observação: você também precisa ter tsconfig.json )

Eu sei, dummdidumm disse entry file (main.js) has still to be a javascript file mas não funciona para mim: confused:

AlexandreCantin em 13 jun. 2020

👍5 🎉2

Todos 14 comentários

Funciona perfeitamente https://github.com/dummdidumm/template

Diferenças para a versão javascript

Os seguintes pacotes npm são adicionados: svelte-preprocess typescript tslib @rollup/plugin-typescript
rollup.config.js foi aprimorado:

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

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

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

Ressalvas:

arquivo de entrada ( main.js ) ainda deve ser um arquivo javascript

dummdidumm em 4 jun. 2020

👍3

tentei isso e verifiquei!

sw-yx em 5 jun. 2020

__Obrigado por todo o seu trabalho! __ Parece que o arquivo tsconfig.json está faltando no modelo:

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)

O conteúdo de tsconfig.json seguir está correto?

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

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

bgrand-ch em 5 jun. 2020

Interessante ... Eu nem precisava de tsconfig.json então simplesmente deixei de fora. Eu não recebi nenhum desses erros.

dummdidumm em 6 jun. 2020

😕2

Estou tentando usar com o sapper e agora recebo esse erro.

$ 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 em 6 jun. 2020

O modelo foi concebido como uma prova de conceito de que o IDE funciona fora da caixa com esbelto. Coisas como tsconfig.json ou Sapper não estavam em minha mente naquele momento.
O texto datilografado com o Sapper em geral não é bem suportado agora, eu acho -

dummdidumm em 6 jun. 2020

👍1

As coisas estão perto de trabalhar com o Sapper. Existem dois problemas principais:

O Sapper engole erros relacionados ao TypeScript. Isso foi corrigido em master , mas ainda não foi lançado. Pode ser por isso que você acabou de ver "Não foi possível processar as opções do compilador" e não uma mensagem mais útil
Você não pode usar o TypeScript com modelos com preload ainda. Há um PR pendente que corrige isso: https://github.com/sveltejs/sapper/pull/1222

Fiz um fork do Sapper que você pode usar para codificar no TypeScript até que as correções acima sejam mescladas e lançadas: https://github.com/sveltejs/sapper/issues/760#issuecomment -634423518

benmccann em 6 jun. 2020

@dummdidumm Obrigado pela sua resposta rápida 🙂

Infelizmente, o problema persiste.

Este é meu arquivo 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"
  }
}

e o arquivo 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 em 8 jun. 2020

Não posso reproduzir o erro sozinho. Mas olhando para o seu package.json , parece que você usa o rollup 1.x em vez de 2.x. Talvez empurrar todas as dependências para a versão mais recente conserte isso para você?

dummdidumm em 9 jun. 2020

👀1 👍1

@dummdidumm Eu tsconfig.json , o arquivo package-lock.json e a pasta node_modules . O problema persiste 🤔

Mensagem de erro:

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)

Extensões Svelte VS Code instaladas:

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

Outras extensões do VS Code instaladas:

Tag de fechamento automático - v0.5.7
Bracket Pair Colorizer - v1.0.61
ESLint - v2.1.5
JavaScript Booster - v0.12.3
Tema do ícone de material - v4.1.0
NativeScript - v0.11.0
NativeScript Extend - v2.11.10
npm - v0.3.12
npm Intellisense - v1.3.0
Path Intellisense - v2.2.0
PHP Intelephense - v1.4.1
Twig Language 2 - v0.9.1
Vetur - v0.24.0

package.json arquivo:

{
  "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 arquivo:

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 arquivo:

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

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

bgrand-ch em 10 jun. 2020

@elvticc Estou com o mesmo problema.

Para consertar, eu tenho:

renomeado main.js para main.ts
E em rollup.config.json , mudou: input: 'src/main.js' para input: 'src/main.ts'
(Observação: você também precisa ter tsconfig.json )

Eu sei, dummdidumm disse entry file (main.js) has still to be a javascript file mas não funciona para mim: confused:

AlexandreCantin em 13 jun. 2020

👍5 🎉2

Muito interessante, parece que ainda há algum Vodoo nessas configurações - que bom que você conseguiu! Vou passar para o repositório svelte central para discutir a criação de um modelo de texto digitado oficial lá.

dummdidumm em 14 jun. 2020

❤3

@AlexandreCantin @elvticc

Se você olhar o repo, uma das coisas que você notará é que há um arquivo Typescript no diretório /src ( stuff.ts ).

Eu estava encontrando o mesmo erro, Texto digitado dizendo que nenhuma fonte foi encontrada. Tentei alterá-lo para main.ts com tsconfig.json como sugerido acima, mas quebrou devido a exports not found com uma exportação de módulo commonjs estranha gerada automaticamente no código do pacote (talvez mudando o estilo do módulo resolveria isso).

O que funciona é apenas criar um empty.ts (ou qualquer arquivo) dentro de /src (sem um tsconfig.json se desejado) e então executar dev .

Editar: depois de alguma experimentação, aqui estão todas as combinações que funcionam:

main.js , Não tsconfig.json , qualquer .ts único dentro de /src
main.ts , Não tsconfig.json , adicione ts-ignore à importação do aplicativo:
- ts // @ts-ignore import App from './App.svelte'
main.ts , com tsconfig.json e configurações com qualquer um dos seguintes:

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

GavinRay97 em 15 jun. 2020

👍4 🚀1

Obrigado pela investigação @ GavinRay97 ! Eu atualizei o modelo.

dummdidumm em 16 jun. 2020

❤1

Esta página foi útil?

0 / 5 - 0 avaliações

Questões relacionadas

Erro de escrita de tipo - o objeto é desconhecido ao chamar: "evento" para o componente filho da biblioteca externa que é JS

MDoder97 · 3Comentários

Relatório de problema ruim em VSCode

scippio · 3Comentários

Aguarde então sem variável

PatrickG · 3Comentários

Cada problema de digitação de bloco

JAD3N · 5Comentários

Suporte de slot não encontrado no próprio elemento de slot

brunnerh · 3Comentários