Language-tools: सत्यापित करें और दस्तावेज़ टाइपस्क्रिप्ट + svelte-preprocessor बॉक्स से बाहर काम कर रहा है

एक आकर्षण की तरह काम करता है https://github.com/dummdidumm/template

जावास्क्रिप्ट संस्करण में अंतर

• निम्नलिखित 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 ) अभी भी एक जावास्क्रिप्ट फ़ाइल होना बाकी है

यह कोशिश की और सत्यापित किया!

__आपके सभी कार्यों के लिए धन्यवाद!__ ऐसा लगता है कि फ़ाइल 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/

दिलचस्प ... मुझे tsconfig.json की भी आवश्यकता नहीं थी इसलिए मैंने इसे छोड़ दिया। मुझे इनमें से कोई भी त्रुटि नहीं मिली।

मैं इसे सैपर के साथ उपयोग करने की कोशिश कर रहा हूं और अब मुझे यह त्रुटि मिली है।

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

टेम्पलेट का उद्देश्य अवधारणा के प्रमाण के रूप में था कि आईडीई बॉक्स से बाहर काम करता है। उस समय मेरे दिमाग में tsconfig.json या सैपर जैसी बातें नहीं थीं।
सामान्य रूप से सैपर के साथ टाइपस्क्रिप्ट अभी अच्छी तरह से समर्थित नहीं है, मुझे लगता है - @benmccann क्या आप इसके बारे में अधिक जानते हैं?

चीजें सैपर के साथ काम करने के करीब हैं। दो मुख्य मुद्दे हैं:

1. सैपर टाइपस्क्रिप्ट से संबंधित त्रुटियों को निगल जाता है। यह master में तय है, लेकिन अभी तक जारी नहीं किया गया है। यही कारण है कि आप सिर्फ "कंपाइलर विकल्पों को संसाधित नहीं कर सके" और अधिक उपयोगी संदेश नहीं देख सकते हैं
2. आप अभी तक preload टेम्प्लेट वाले टाइपस्क्रिप्ट का उपयोग नहीं कर सकते हैं। एक पीआर लंबित है जो इसे ठीक करेगा: https://github.com/sveltejs/sapper/pull/1222

मैंने सैपर का एक कांटा बनाया है जिसे आप टाइपस्क्रिप्ट में कोड करने के लिए उपयोग कर सकते हैं जब तक कि उपरोक्त सुधार विलय और जारी नहीं हो जाते: https://github.com/sveltejs/sapper/issues/760#issuecomment -634423518

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

मैं स्वयं त्रुटि को पुन: उत्पन्न नहीं कर सकता। लेकिन आपके package.json देखकर ऐसा लगता है कि आप 2.x के बजाय रोलअप 1.x का उपयोग करते हैं। हो सकता है कि सभी निर्भरताओं को नवीनतम संस्करण में उछालने से यह आपके लिए ठीक हो जाए?

@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 कोड एक्सटेंशन इंस्टॉल किए गए:

• Svelte 3 स्निपेट्स - v0.4.0
• स्वेल्ट बीटा - v99.0.41
• स्वेल्ट इंटेलीसेंस - v0.7.1

अन्य वीएस कोड एक्सटेंशन स्थापित:

• ऑटो बंद टैग - v0.5.7
• ब्रैकेट जोड़ी Colorizer - v1.0.61
• ईएसएलिंट - v2.1.5
• जावास्क्रिप्ट बूस्टर - v0.12.3
• सामग्री चिह्न थीम - v4.1.0
• नेटिवस्क्रिप्ट - v0.11.0
• नेटिवस्क्रिप्ट विस्तार - v2.11.10
• एनपीएम - वी0.3.12
• एनपीएम इंटेलिजेंस - v1.3.0
• पथ इंटेलिजेंस - v2.2.0
• पीएचपी इंटेलीफेंस - v1.4.1
• टहनी भाषा 2 - v0.9.1
• वेतुर - 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()
  ]
};

@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 लेकिन यह मेरे लिए काम नहीं करता है: भ्रमित:

बहुत दिलचस्प, ऐसा लगता है कि इन सेटअपों में अभी भी कुछ वोडू हैं - खुशी है कि आपने इसे वैसे भी काम कर लिया है! मैं वहां एक आधिकारिक टाइपस्क्रिप्ट टेम्पलेट बनाने पर चर्चा करने के लिए कोर स्वेल्टे रेपो पर जाऊंगा।

@AlexandreCantin @elvticc

यदि आप रेपो को देखें, तो एक चीज जो आप देखेंगे वह यह है कि /src निर्देशिका ( stuff.ts ) में एक टाइपस्क्रिप्ट फ़ाइल है।

मैं एक ही त्रुटि में चल रहा था, टाइपस्क्रिप्ट कह रहा था कि कोई स्रोत नहीं मिला। जैसा कि ऊपर सुझाव दिया गया है, मैंने इसे main.ts साथ tsconfig.json में बदलने की कोशिश की, लेकिन यह exports not found कारण टूट गया, कुछ अजीब कॉमनज मॉड्यूल निर्यात बंडल कोड में ऑटो-जेनरेट किया गया (शायद बदल रहा है) मॉड्यूल शैली इसे ठीक करेगी)।

काम केवल 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 ! मैंने टेम्पलेट अपडेट किया।