Language-tools: 验证和记录打字稿 + svelte-preprocessor 开箱即用

创建于 2020-06-04 · 14评论 · 资料来源: sveltejs/language-tools

我们认为您可以创建一个 svelte 项目，只需包含 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 于 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 于 2020-06-04

👍3

试过这个并验证！

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 于 2020-06-05

有趣...我什至不需要tsconfig.json所以我就把它省略了。我没有得到这些错误中的任何一个。

dummdidumm 于 2020-06-06

😕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 于 2020-06-06

该模板旨在作为 IDE 开箱即用的概念证明。那时我并不想像tsconfig.json或 Sapper 这样的事情。
我认为现在一般不支持带有 Sapper 的 Typescript - @benmccann你对此了解更多吗？

dummdidumm 于 2020-06-06

👍1

事情已经接近与 Sapper 合作了。主要有两个问题：

Sapper 吞下了与 TypeScript 相关的错误。这在master已修复，但尚未发布。这可能就是为什么您只看到“无法处理编译器选项”而不是更有用的消息的原因
您还不能将 TypeScript 与包含preload模板一起使用。有一个 PR 可以解决这个问题： https :

我做了一个 Sapper 的分支，你可以用它在 TypeScript 中编码，直到上述修复程序合并和发布： https :

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 于 2020-06-08

我自己无法重现该错误。但是看看你的package.json似乎你使用 rollup 1.x 而不是 2.x 。也许将所有依赖项撞到最新版本会为您修复它？

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)

安装了 Svelte VS Code 扩展：

Svelte 3 片段 - v0.4.0
Svelte Beta - v99.0.41
苗条的智能感知 - v0.7.1

安装的其他 VS Code 扩展：

自动关闭标签 - v0.5.7
支架对着色器 - v1.0.61
ESLint - v2.1.5
JavaScript Booster - v0.12.3
材质图标主题 - v4.1.0
NativeScript - v0.11.0
NativeScript 扩展 - v2.11.10
npm - v0.3.12
npm 智能感知 - v1.3.0
路径智能感知 - v2.2.0
PHP Intelephense - v1.4.1
树枝语言 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 于 2020-06-10

@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 于 2020-06-13

👍5 🎉2

非常有趣，似乎这些设置仍然有一些 Vodoo - 很高兴你无论如何都能让它工作！我将前往核心 svelte 存储库讨论在那里创建官方打字稿模板。

dummdidumm 于 2020-06-14

❤3

@AlexandreCantin @elvticc

如果您查看 repo，您会注意到的一件事是/src目录 ( stuff.ts ) 中有一个 Typescript 文件。

我遇到了同样的错误，Typescript 说没有找到来源。我尝试将其更改为main.ts和tsconfig.json如上所述，但这由于exports not found和捆绑代码中自动生成的一些奇怪的 commonjs 模块导出而中断（可能会更改模块风格会解决这个问题）。

什么工作只是在/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 于 2020-06-15

👍4 🚀1

感谢@GavinRay97的调查！我更新了模板。

dummdidumm 于 2020-06-16

❤1

此页面是否有帮助？

0 / 5 - 0 等级

Language-tools: 验证和记录打字稿 + svelte-preprocessor 开箱即用

最有用的评论

所有14条评论

与 javascript 版本的差异

注意事项：

相关问题