如何在 Typescript 文件中导入 Svelte 组件? [英] How do you import a Svelte component in a Typescript file?

问题描述

是否可以在 Typescript 文件中导入 Svelte 组件并让 Rollup 成功编译它?

Is it possible to import a Svelte component in a Typescript file and have Rollup successfully compile it?

以下代码作为 Javascript 文件工作，但转换为 Typescript 时出错，因为 TS 编译器不知道如何处理 .svelte 文件:

The following code works as a Javascript file, but errors when converted to Typescript, because the TS compiler doesn’t know how to handle a .svelte file:

import Component from './Component.svelte';

const foo = () => new Component({ target: document.body });

是否有 rollup-plugin-svelte 和 @rollup/plugin-typescript 的组合来预处理 Svelte 组件，以便 Typescript 编译器可以包括Svelte 代码?

Is there a combination of rollup-plugin-svelte and @rollup/plugin-typescript that will preprocess the Svelte component in such a way that the Typescript compiler can include the Svelte code?

如果更多上下文有帮助，boardgame.io 包括 一个用 Svelte 构建的浏览器内调试组件，它捆绑在一个普通的 JS 客户端和在 React 客户端组件中，我们正在尝试更新 我们的汇总配置正是这种情况.

In case some more context is helpful, boardgame.io includes an in-browser debugging component built with Svelte, which is bundled in both a plain JS client & in a React client component, and we’re trying to update our Rollup config for exactly this scenario.

推荐答案

尝试将 @tsconfig/svelte 添加到您的项目中，然后更新您的 tsconfig.json 文件:

Try adding @tsconfig/svelte to your project, then updating your tsconfig.json file:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}

这篇关于如何在 Typescript 文件中导入 Svelte 组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！