Language-tools: Verifikasi dan dokumentasikan TypeScript + preprocessor langsing yang bekerja di luar kotak

Bekerja seperti pesona https://github.com/dummdidumm/template

Perbedaan dengan versi javascript

• Paket npm berikut ditambahkan: svelte-preprocess typescript tslib @rollup/plugin-typescript
• rollup.config.js ditingkatkan:

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

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

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

Peringatan:

• file entri ( main.js ) masih berupa file javascript

mencoba ini dan diverifikasi!

__Terima kasih atas semua pekerjaan Anda!__ Tampaknya file tsconfig.json tidak ada di template:

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)

Konten tsconfig.json boleh?

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

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

Menarik ... Saya bahkan tidak membutuhkan tsconfig.json jadi saya tinggalkan saja. Saya tidak mendapatkan salah satu dari kesalahan itu.

Saya mencoba menggunakannya dengan pencari ranjau dan sekarang saya mendapatkan kesalahan ini.

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

Template dimaksudkan sebagai bukti konsep bahwa IDE bekerja di luar kotak dengan langsing. Hal-hal seperti tsconfig.json atau Sapper tidak ada dalam pikiranku saat itu.
TypeScript dengan Sapper secara umum tidak didukung dengan baik sekarang saya pikir - @benmccann apakah Anda tahu lebih banyak tentang itu?

Hal-hal yang dekat untuk bekerja dengan Sapper. Ada dua masalah utama:

1. Sapper menelan kesalahan yang terkait dengan TypeScript. Ini diperbaiki di master , tetapi belum dirilis. Itu bisa jadi mengapa Anda hanya melihat "Tidak dapat memproses opsi kompiler" dan bukan pesan yang lebih bermanfaat
2. Anda belum dapat menggunakan TypeScript dengan template dengan preload di dalamnya. Ada PR tertunda yang akan memperbaikinya: https://github.com/sveltejs/sapper/pull/1222

Saya membuat garpu Sapper yang dapat Anda gunakan untuk membuat kode di TypeScript hingga perbaikan di atas digabungkan dan dirilis: https://github.com/sveltejs/sapper/issues/760#issuecomment -634423518

@dummdidumm Terima kasih atas tanggapan cepat Anda

Sayangnya, masalah terus berlanjut.

Ini adalah file 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"
  }
}

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

Saya tidak dapat mereproduksi kesalahan sendiri. Tetapi melihat package.json Anda sepertinya Anda menggunakan rollup 1.x alih-alih 2.x . Mungkin menabrak semua dependensi ke versi terbaru memperbaikinya untuk Anda?

@dummdidumm Saya menabrak semua dependensi ke versi terbaru mereka. Saya menghapus file tsconfig.json kustom saya, file package-lock.json dan folder node_modules . Masalah tetap ada

Pesan eror:

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)

Ekstensi Svelte VS Code diinstal:

• Cuplikan Svelte 3 - v0.4.0
• Beta Langsing - v99.0.41
• Intellisense langsing - v0.7.1

Ekstensi Kode VS lain yang diinstal:

• Tag Tutup Otomatis - v0.5.7
• Pewarna Pasangan Braket - v1.0.61
• ESLint - v2.1.5
• Penguat JavaScript - v0.12.3
• Tema Ikon Bahan - v4.1.0
• NativeScript - v0.11.0
• Perpanjangan NativeScript - v2.11.10
• npm - v0.3.12
• npm Intellisense - v1.3.0
• Jalur Intellisense - v2.2.0
• PHP Intelephense - v1.4.1
• Twig Language 2 - v0.9.1
• Kecepatan - v0.24.0

package.json berkas:

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

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

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

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

@elvticc Saya punya masalah yang sama.

Untuk memperbaikinya, saya punya:

1. ganti nama main.js menjadi main.ts
2. Dan di rollup.config.json , diubah : input: 'src/main.js' menjadi input: 'src/main.ts'
   (Catatan: Anda harus memiliki tsconfig.json juga)

Saya tahu, dummdidumm mengatakan entry file (main.js) has still to be a javascript file tetapi tidak berhasil untuk saya :confused:

Sangat menarik, sepertinya masih ada beberapa Vodoo untuk pengaturan ini - senang Anda berhasil melakukannya! Saya akan menuju ke core svelte repo untuk membahas pembuatan template TypeScript resmi di sana.

@AlexandreCantin @elvticc

Jika Anda melihat repo, salah satu hal yang akan Anda perhatikan adalah ada file TypeScript di direktori /src ( stuff.ts ).

Saya mengalami kesalahan yang sama, TypeScript mengatakan tidak ada sumber yang ditemukan. Saya mencoba mengubahnya menjadi main.ts dengan tsconfig.json seperti yang disarankan di atas, tetapi ini rusak karena exports not found dengan beberapa ekspor modul commonjs aneh yang dihasilkan secara otomatis dalam kode yang dibundel (mungkin berubah gaya modul akan memperbaikinya).

Apa yang berhasil hanyalah membuat empty.ts (atau file apa pun) di dalam /src (tanpa tsconfig.json jika diinginkan) dan kemudian menjalankan dev .

Sunting: Setelah beberapa eksperimen, inilah setiap kombinasi yang berfungsi:

• main.js , Tidak ada tsconfig.json , satu pun .ts di dalam /src
• main.ts , Tidak tsconfig.json , tambahkan ts-ignore ke Impor aplikasi:
  
  
  
  • ts // @ts-ignore import App from './App.svelte'
  
  
• main.ts , dengan tsconfig.json , dan pengaturan dengan salah satu dari berikut ini:

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

Terima kasih atas penyelidikannya @GavinRay97 ! Saya memperbarui template.