Language-tools: Verifique y documente mecanografiado + preprocesador esbelto funcionando desde el primer momento

Creado en 4 jun. 2020 · 14Comentarios · Fuente: sveltejs/language-tools

Creemos que puede hacer un proyecto esbelto y solo incluir los módulos de nodo para el preprocesador svelte para que funcione el soporte de lang='ts' . Verifica que funciona y agrega algunas notas 👍

Fuente

orta

❤6 👀1

Comentario más útil

@elvticc Tengo el mismo problema.

Para solucionarlo, tengo:

renombrado main.js a main.ts
Y en rollup.config.json , cambió: input: 'src/main.js' a input: 'src/main.ts'
(Nota: también debe tener un tsconfig.json )

Lo sé, dummdidumm dijo entry file (main.js) has still to be a javascript file pero no me funciona: confuso:

AlexandreCantin en 13 jun. 2020

👍5 🎉2

Todos 14 comentarios

Funciona como un encanto https://github.com/dummdidumm/template

Diferencias con la versión de javascript

Se agregan los siguientes paquetes npm: svelte-preprocess typescript tslib @rollup/plugin-typescript
rollup.config.js está mejorado:

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

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

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

Advertencias:

el archivo de entrada ( main.js ) aún debe ser un archivo javascript

dummdidumm en 4 jun. 2020

👍3

¡Probé esto y verifiqué!

sw-yx en 5 jun. 2020

__¡Gracias por todo su trabajo! __ Parece que falta el archivo tsconfig.json en la plantilla:

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)

El siguiente contenido de tsconfig.json está bien?

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

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

bgrand-ch en 5 jun. 2020

Interesante ... Ni siquiera necesitaba un tsconfig.json así que lo dejé fuera. No obtuve ninguno de esos errores.

dummdidumm en 6 jun. 2020

😕2

Intento usarlo con zapador y ahora recibí este error.

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

La plantilla fue pensada como una prueba de concepto de que el IDE funciona desde el primer momento con esbelto. Cosas como tsconfig.json o Sapper no estaban en mi mente en ese momento.
Mecanografiado con Sapper en general no se admite bien en este momento, creo - @benmccann , ¿sabes más sobre eso?

dummdidumm en 6 jun. 2020

👍1

Las cosas están cerca de trabajar con Sapper. Hay dos problemas principales:

Sapper ingiere errores relacionados con TypeScript. Esto está arreglado en master , pero aún no se ha publicado. Esa podría ser la razón por la que solo ve "No se pudieron procesar las opciones del compilador" y no un mensaje más útil
No puede usar TypeScript con plantillas con preload en ellas todavía. Hay un PR pendiente que solucionaría esto: https://github.com/sveltejs/sapper/pull/1222

Hice una bifurcación de Sapper que puede usar para codificar en TypeScript hasta que las correcciones anteriores se fusionen y se publiquen: https://github.com/sveltejs/sapper/issues/760#issuecomment -634423518

benmccann en 6 jun. 2020

@dummdidumm Gracias por su rápida respuesta 🙂

Desafortunadamente, el problema persiste.

Este es mi archivo 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"
  }
}

y el archivo 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 en 8 jun. 2020

No puedo reproducir el error yo mismo. Pero mirando su package.json parece que usa el paquete acumulativo 1.x en lugar de 2.x. ¿Tal vez al agregar todas las dependencias a la última versión se solucione?

dummdidumm en 9 jun. 2020

👀1 👍1

@dummdidumm Cambié todas las dependencias a su última versión. Eliminé mi archivo tsconfig.json , el archivo package-lock.json y la carpeta node_modules . El problema persiste 🤔

Mensaje de error:

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)

Extensiones de Svelte VS Code instaladas:

Fragmentos de Svelte 3 - v0.4.0
Svelte Beta - v99.0.41
Intellisense esbelto - v0.7.1

Otras extensiones de VS Code instaladas:

Etiqueta de cierre automático - v0.5.7
Colorizador de par de soportes - v1.0.61
ESLint - v2.1.5
Amplificador de JavaScript - v0.12.3
Tema de icono 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 archivo:

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

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

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

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

bgrand-ch en 10 jun. 2020

@elvticc Tengo el mismo problema.

Para solucionarlo, tengo:

renombrado main.js a main.ts
Y en rollup.config.json , cambió: input: 'src/main.js' a input: 'src/main.ts'
(Nota: también debe tener un tsconfig.json )

Lo sé, dummdidumm dijo entry file (main.js) has still to be a javascript file pero no me funciona: confuso:

AlexandreCantin en 13 jun. 2020

👍5 🎉2

Muy interesante, parece que todavía hay algo de Vodoo en estas configuraciones, ¡me alegro de que lo hayas hecho funcionar de todos modos! Me dirigiré al repositorio esbelto principal para discutir la creación de una plantilla oficial de mecanografiado allí.

dummdidumm en 14 jun. 2020

❤3

@AlexandreCantin @elvticc

Si observa el repositorio, una de las cosas que notará es que hay un archivo de TypeScript en el directorio /src ( stuff.ts ).

Me estaba encontrando con el mismo error, Typecript diciendo que no se encontraron fuentes. Intenté cambiarlo a main.ts con tsconfig.json como se sugirió anteriormente, pero esto se rompió debido a exports not found con algunas exportaciones de módulos commonjs extrañas generadas automáticamente en el código incluido (tal vez cambiando el estilo del módulo arreglaría esto).

Lo que sí funciona es simplemente crear un empty.ts (o cualquier archivo) dentro de /src (sin un tsconfig.json si se desea) y luego ejecutar dev .

Editar: Después de un poco de experimentación, aquí están todas las combinaciones que funcionan:

main.js , No tsconfig.json , cualquier .ts dentro de /src
main.ts , No tsconfig.json , agregue ts-ignore a la importación de la aplicación:
- ts // @ts-ignore import App from './App.svelte'
main.ts , con tsconfig.json , y configuraciones con cualquiera de los siguientes:

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

GavinRay97 en 15 jun. 2020

👍4 🚀1

¡Gracias por la investigación @ GavinRay97 ! Actualicé la plantilla.

dummdidumm en 16 jun. 2020

❤1

¿Fue útil esta página

0 / 5 - 0 calificaciones

Temas relacionados

`export let` in plain js script tags rompe el resaltado de sintaxis

canadaduane · 5Comentarios

muestra errores

matthewmueller · 3Comentarios

Habilitar la función de tokens semánticos en archivos grandes hace que el servidor de idiomas sea inusualmente lento

shirakaba · 4Comentarios

Cada problema de escritura de bloque

JAD3N · 5Comentarios

El resaltado de sintaxis es incorrecto cuando el componente anterior se cierra automáticamente

arxpoetica · 3Comentarios