Language-tools: 箱から出して動作するtypescript + svelte-preprocessorを確認して文書化します

作成日 2020年06月04日  ·  14コメント  ·  ソース: sveltejs/language-tools

svelteプロジェクトを作成し、svelte-preprocessorのノードモジュールを含めるだけで、 lang='ts'サポートを機能させることができると思います。 それが機能することを確認し、いくつかのメモを追加します👍

picture orta
❤6 👀1

最も参考になるコメント

@elvticc同じ問題があります。

それを修正するために、私は持っています：

  1. main.js名前をmain.ts
  2. そして、 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：

picture AlexandreCantin 2020年06月13日
👍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 picture dummdidumm 2020年06月04日
👍3

これを試して検証しました！

sw-yx picture sw-yx 2020年06月05日

__すべての作業に感謝します！__ファイル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 ：

bgrand-ch picture bgrand-ch 2020年06月05日

おもしろい... tsconfig.jsonも必要なかったので、

dummdidumm picture dummdidumm 2020年06月06日
😕2

sapperで使用しようとすると、このエラーが発生しました。

$ 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 picture hellpirat 2020年06月06日

このテンプレートは、IDEが箱から出してすぐに機能するという概念実証として意図されていました。 当時、 tsconfig.jsonやSapperのようなものは私の頭にありませんでした。
Sapperを使用したTypescriptは、@ benmccannそれについてもっと知っていますか？

dummdidumm picture dummdidumm 2020年06月06日
👍1

物事はSapperとの連携に近づいています。 2つの主要な問題があります：

  1. SapperはTypeScriptに関連するエラーを飲み込みます。 これはmasterで修正されていますが、まだリリースされていません。 そのため、「コンパイラオプションを処理できませんでした」と表示され、より役立つメッセージは表示されない可能性があります。
  2. まだpreloadれているテンプレートでTypeScriptを使用することはできません。 これを修正する保留中のPRがあります： //github.com/sveltejs/sapper/pull/1222

上記の修正がマージされてリリースされるまで、TypeScriptでコーディングするために使用できるSapperのフォークを作成しました： https ：

benmccann picture benmccann 2020年06月06日

@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 picture bgrand-ch 2020年06月08日

エラーを自分で再現することはできません。 しかし、 package.json見ると、2.xではなくロールアップ1.xを使用しているようです。 たぶん、すべての依存関係を最新バージョンにぶつけると、それが修正されますか？

dummdidumm picture dummdidumm 2020年06月09日
👀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)

インストールされているSvelteVS Code拡張機能：

  • Svelte3スニペット-v0.4.0
  • Svelteベータ版-v99.0.41
  • SvelteIntellisense-v0.7.1

インストールされているその他のVSCode拡張機能：

  • 自動クローズタグ-v0.5.7
  • ブラケットペアカラーライザー-v1.0.61
  • ESLint-v2.1.5
  • JavaScriptブースター-v0.12.3
  • マテリアルアイコンテーマ-v4.1.0
  • NativeScript-v0.11.0
  • NativeScript Extend-v2.11.10
  • npm-v0.3.12
  • npmIntellisense-v1.3.0
  • パスIntellisense-v2.2.0
  • PHPIntelephense-v1.4.1
  • Twig言語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 picture bgrand-ch 2020年06月10日

@elvticc同じ問題があります。

それを修正するために、私は持っています：

  1. main.js名前をmain.ts
  2. そして、 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 picture AlexandreCantin 2020年06月13日
👍5 🎉2

非常に興味深いですが、これらの設定にはまだVodooがいくつかあるようです-とにかく動作してよかったです！ コアのsvelteリポジトリに移動して、そこで公式のtypescriptテンプレートを作成する方法について説明します。

dummdidumm picture dummdidumm 2020年06月14日
❤3

@AlexandreCantin @elvticc

リポジトリを見ると、 /srcディレクトリ（ stuff.ts ）にTypescriptファイルがあることに気付くでしょう。

私は同じエラーに遭遇していました、Typescriptはソースが見つからないと言っていました。 上記のようにtsconfig.json main.ts変更しようとしましたが、バンドルされたコードで自動生成された奇妙なcommonjsモジュールのエクスポートでexports not foundが原因で壊れました（おそらく変更されます）モジュールスタイルでこれが修正されます）。

動作するのは、 /src内にempty.ts （または任意のファイル）を作成し（必要に応じて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 picture GavinRay97 2020年06月15日
👍4 🚀1

調査してくれてありがとう@ GavinRay97 ！ テンプレートを更新しました。

dummdidumm picture dummdidumm 2020年06月16日
❤1
このページは役に立ちましたか？
0 / 5 - 0 評価

関連する問題

JAD3N picture JAD3N  ·  5コメント
shirakaba picture shirakaba  ·  4コメント
scippio picture scippio  ·  3コメント
Kingwl picture Kingwl  ·  6コメント
brunnerh picture brunnerh  ·  3コメント