Language-tools: تحقق من وتوثيق النص المكتوب + svelte-preprocessor يعمل خارج منطقة الجزاء

تم إنشاؤها على ٤ يونيو ٢٠٢٠ · 14تعليقات · مصدر: sveltejs/language-tools

نعتقد أنه يمكنك إنشاء مشروع رشيق وتضمين فقط وحدات العقدة للمعالج svelte للحصول على دعم 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 لكنه لا يعمل بالنسبة لي: مرتبك:

AlexandreCantin في ١٣ يونيو ٢٠٢٠

👍5 🎉2

ال 14 كومينتر

يعمل مثل السحر 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 ) لا يزال ملف جافا سكريبت

dummdidumm في ٤ يونيو ٢٠٢٠

👍3

حاولت هذا وتحقق!

sw-yx في ٥ يونيو ٢٠٢٠

__ شكرًا على كل عملك! __ يبدو أن الملف 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 في ٥ يونيو ٢٠٢٠

مثير للاهتمام ... لم أكن بحاجة حتى إلى tsconfig.json لذلك تركته للتو. لم أحصل على أي من هذه الأخطاء.

dummdidumm في ٦ يونيو ٢٠٢٠

😕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 في ٦ يونيو ٢٠٢٠

كان القصد من النموذج أن يكون بمثابة إثبات لمفهوم أن IDE يعمل خارج الصندوق مع رشاقة. أشياء مثل tsconfig.json أو Sapper لم تكن في ذهني في ذلك الوقت.
لا يتم دعم الطباعة باستخدام Sapper بشكل عام بشكل جيد في الوقت الحالي على ما أعتقد -benmccann هل تعرف المزيد عن ذلك؟

dummdidumm في ٦ يونيو ٢٠٢٠

👍1

الأشياء قريبة من العمل مع سابر. هناك مشكلتان رئيسيتان:

يبتلع Sapper الأخطاء المتعلقة بـ TypeScript. تم إصلاح هذا في master ، ولكن لم يتم إصداره بعد. قد يكون هذا هو السبب في أنك ترى فقط "لا يمكن معالجة خيارات المترجم" وليس رسالة مفيدة أكثر
لا يمكنك استخدام TypeScript مع القوالب التي تحتوي على preload فيها حتى الآن. هناك علاقات عامة معلقة من شأنها إصلاح هذا: https://github.com/sveltejs/sapper/pull/1222

لقد صنعت شوكة من Sapper يمكنك استخدامها للتشفير في TypeScript حتى يتم دمج الإصلاحات المذكورة أعلاه وإصدارها: https://github.com/sveltejs/sapper/issues/760#issuecomment -634423518

benmccann في ٦ يونيو ٢٠٢٠

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 في ٨ يونيو ٢٠٢٠

لا يمكنني إعادة إنتاج الخطأ بنفسي. ولكن بالنظر إلى package.json الخاص بك ، يبدو أنك تستخدم تراكم 1.x بدلاً من 2.x. ربما يؤدي دفع جميع التبعيات إلى أحدث إصدار إلى إصلاحه من أجلك؟

dummdidumm في ٩ يونيو ٢٠٢٠

👀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 - v0.4.0
Svelte Beta - الإصدار 99.0.41
Svelte Intellisense - v0.7.1

تم تثبيت ملحقات VS Code الأخرى:

علامة الإغلاق التلقائي - v0.5.7
قوس تلوين زوج - v1.0.61
ESLint - v2.1.5
مُعزز جافا سكريبت - v0.12.3
موضوع أيقونة المواد - v4.1.0
الأصلي - v0.11.0
تمديد NativeScript - v2.11.10
npm - v0.3.12
npm Intellisense - v1.3.0
Path Intellisense - الإصدار 2.2.0
PHP Intelephense - v1.4.1
لغة الغصين 2 - الإصدار 0.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()
  ]
};

bgrand-ch في ١٠ يونيو ٢٠٢٠

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 لكنه لا يعمل بالنسبة لي: مرتبك:

AlexandreCantin في ١٣ يونيو ٢٠٢٠

👍5 🎉2

مثير للاهتمام للغاية ، يبدو أنه لا يزال هناك بعض Vodoo لهذه الإعدادات - سعيد لأنك عملت على أي حال! سوف أتوجه إلى المستودع الأساسي svelte repo لمناقشة إنشاء قالب مطبوع رسمي هناك.

dummdidumm في ١٤ يونيو ٢٠٢٠

❤3

تضمين التغريدة

إذا نظرت إلى الريبو ، فإن أحد الأشياء التي ستلاحظها هو أن هناك ملفًا منقوشًا في الدليل /src ( stuff.ts ).

كنت أواجه نفس الخطأ ، ويقول "تم العثور على مصادر". لقد حاولت تغييره إلى main.ts مع tsconfig.json كما هو مقترح أعلاه ، ولكن هذا تعطل بسبب exports not found مع بعض تصدير وحدة Commonjs الغريبة التي تم إنشاؤها تلقائيًا في الكود المجمع (ربما يتغير نمط الوحدة من شأنه إصلاح هذا).

ما يعمل هو مجرد إنشاء empty.ts (أو أي ملف) داخل /src (بدون tsconfig.json إذا كان مطلوبًا) ثم تشغيل dev .

تعديل: بعد إجراء بعض التجارب ، إليك كل مجموعة تعمل:

main.js ، لا tsconfig.json ، أي مفردة .ts داخل /src
main.ts ، No 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 في ١٥ يونيو ٢٠٢٠

👍4 🚀1

شكرا على التحقيق @ GavinRay97 ! لقد قمت بتحديث النموذج.

dummdidumm في ١٦ يونيو ٢٠٢٠

❤1

هل كانت هذه الصفحة مفيدة؟

0 / 5 - 0 التقييمات

القضايا ذات الصلة

دعم استيراد مكونات Svelte بدون تمديد

matthewmueller · 5تعليقات

"تصدير دعونا" في علامات البرنامج النصي js العادية يكسر تمييز بناء الجملة

canadaduane · 5تعليقات

يظهر الأخطاء

matthewmueller · 3تعليقات

يؤدي تمكين ميزة الرموز الدلالية في الملفات الكبيرة إلى بطء خادم اللغة بشكل غير معتاد

shirakaba · 4تعليقات

خطأ كتابي - الكائن غير معروف عند استدعاء: "حدث" لمكون المكتبة الخارجية التابع وهو JS

MDoder97 · 3تعليقات