Language-tools: Проверка и документирование машинописного текста + стройный препроцессор, готовый из коробки

Созданный на 4 июн. 2020 · 14Комментарии · Источник: sveltejs/language-tools

Мы думаем, что вы можете создать компактный проект и просто включить модули node для svelte-preprocessor, чтобы получить работающую поддержку lang='ts' . Убедитесь, что это работает, и добавьте несколько примечаний 👍

Источник

orta

❤6 👀1

Самый полезный комментарий

@elvticc У меня такая же проблема.

Чтобы это исправить, у меня есть:

переименовал main.js в main.ts
А в rollup.config.json изменилось: input: 'src/main.js' на input: 'src/main.ts'
(Примечание: вам также понадобится tsconfig.json )

Я знаю, dummdidumm сказал entry file (main.js) has still to be a javascript file но у меня это не работает: confused:

AlexandreCantin 13 июн. 2020

👍5 🎉2

Все 14 Комментарий

Работает как шарм https://github.com/dummdidumm/template

Отличия от версии javascript

Добавляются следующие пакеты npm: svelte-preprocess typescript tslib @rollup/plugin-typescript
rollup.config.js расширяется:

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

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

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

Предостережения:

входной файл ( main.js ) все еще должен быть файлом javascript

dummdidumm 4 июн. 2020

👍3

попробовал и проверил!

sw-yx 5 июн. 2020

__Спасибо за вашу работу! __ Похоже, что в шаблоне отсутствует файл tsconfig.json :

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)

Следующее содержимое tsconfig.json все в порядке?

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

Источник: https://codechips.me/how-to-use-typescript-with-svelte/

bgrand-ch 5 июн. 2020

Интересно ... Мне даже не нужен был tsconfig.json поэтому я просто оставил его. Я не получил ни одной из этих ошибок.

dummdidumm 6 июн. 2020

😕2

Я пытался использовать его с сапером, и теперь у меня возникает эта ошибка.

$ 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 6 июн. 2020

Шаблон был задуман как доказательство концепции, что IDE работает "из коробки" с svelte. В то время я не думал о таких вещах, как tsconfig.json или Sapper.
Машинопись с Sapper в целом пока плохо поддерживается, я думаю - @benmccann вы знаете об этом больше?

dummdidumm 6 июн. 2020

👍1

Вещи близки к работе с Sapper. Есть две основные проблемы:

Sapper проглатывает ошибки, связанные с TypeScript. Это исправлено в master , но еще не выпущено. Возможно, именно поэтому вы видите просто «Не удалось обработать параметры компилятора», а не более полезное сообщение.
Вы пока не можете использовать TypeScript с шаблонами, в которых есть preload . Ожидается PR, который исправит это: https://github.com/sveltejs/sapper/pull/1222

Я сделал форк Sapper, который вы можете использовать для кодирования на TypeScript, пока вышеуказанные исправления не будут объединены и выпущены: https://github.com/sveltejs/sapper/issues/760#issuecomment -634423518

benmccann 6 июн. 2020

@dummdidumm Спасибо за быстрый ответ 🙂

К сожалению, проблема не устранена.

Это мой файл 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"
  }
}

и файл 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 8 июн. 2020

Сам не могу воспроизвести ошибку. Но, глядя на ваш package.json кажется, что вы используете rollup 1.x вместо 2.x. Может быть, перенос всех зависимостей до последней версии исправит это за вас?

dummdidumm 9 июн. 2020

👀1 👍1

@dummdidumm Я tsconfig.json файл package-lock.json папку node_modules . Проблема не устранена 🤔

Сообщение об ошибке:

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)

Установленные расширения Svelte VS Code:

Svelte 3 Snippets - v0.4.0
Svelte Beta - версия 99.0.41
Svelte Intellisense - v0.7.1

Другие установленные расширения VS Code:

Автоматическое закрытие тега - v0.5.7
Bracket Pair Colorizer - версия 1.0.61
ESLint - v2.1.5
Ускоритель JavaScript - v0.12.3
Тема значка материала - v4.1.0
NativeScript - v0.11.0
Расширение NativeScript - v2.11.10
npm - v0.3.12
npm Intellisense - v1.3.0
Путь Intellisense - v2.2.0
PHP Intelephense - v1.4.1
Twig Language 2 - v0.9.1
Vetur - v0.24.0

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

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

svelte.config.js файл:

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

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

bgrand-ch 10 июн. 2020

@elvticc У меня такая же проблема.

Чтобы это исправить, у меня есть:

переименовал main.js в main.ts
А в rollup.config.json изменилось: input: 'src/main.js' на input: 'src/main.ts'
(Примечание: вам также понадобится tsconfig.json )

Я знаю, dummdidumm сказал entry file (main.js) has still to be a javascript file но у меня это не работает: confused:

AlexandreCantin 13 июн. 2020

👍5 🎉2

Очень интересно, похоже, что в этих настройках еще есть Vodoo - все равно рад, что у вас все заработало! Я перейду к репозиторию core svelte, чтобы обсудить создание там официального шаблона машинописного текста.

dummdidumm 14 июн. 2020

❤3

@AlexandreCantin @elvticc

Если вы посмотрите на репозиторий, вы заметите, что в каталоге /src ( stuff.ts ) есть файл Typescript.

Я столкнулся с той же ошибкой, Typescript сообщал, что источники не найдены. Я попытался изменить его на main.ts с помощью tsconfig.json как предложено выше, но это сломалось из-за exports not found с каким-то странным экспортом модуля commonjs, автоматически созданным в связанном коде (возможно, изменение стиль модуля исправит это).

Что действительно работает, так это создание empty.ts (или любого файла) внутри /src (без tsconfig.json если нужно), а затем запуск dev .

Изменить: после некоторых экспериментов вот каждая комбинация, которая работает:

main.js , нет tsconfig.json , любой одиночный .ts внутри /src
main.ts , Нет tsconfig.json , добавить ts-ignore в импорт приложения:
- ts // @ts-ignore import App from './App.svelte'
main.ts , с tsconfig.json и любыми из следующих настроек:

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

GavinRay97 15 июн. 2020

👍4 🚀1

Спасибо за расследование @ GavinRay97 ! Обновил шаблон.

dummdidumm 16 июн. 2020

❤1

Была ли эта страница полезной?

0 / 5 - 0 рейтинги

Смежные вопросы

«Не удается найти ни один из модулей: sass, node-sass», хотя установлен `sass`

NickKaramoff · 4Комментарии

Проблема с вводом каждого блока

JAD3N · 5Комментарии

Ошибка при использовании нового синтаксиса CSS в VS Code

koddr · 6Комментарии

Опора слота не найдена на самом элементе слота

brunnerh · 3Комментарии

Отчет о плохой проблеме в VSCode

scippio · 3Комментарии