Language-tools: 支持导入 Svelte 组件,无需扩展

创建于 2020-09-23  ·  5评论  ·  资料来源: sveltejs/language-tools

您的功能请求是否与问题有关?

我有一些包含许多子组件的复杂组件。 子组件是私有的,它们组合在一起构成一个大组件。

下面是一个例子:

form/
  input.svelte
  textarea.svelte
  index.svelte
  radio.svelte
  checkbox.svelte

描述您想要的解决方案

我希望能够将form/解析form/index.svelte而不是明确地编写form/index.svelte

我认为这个插件默认情况下应该遵循 node.js 样式的解析,用于具有.svelte扩展名的文件。

form/             => form/index.svelte
form/input        => form/input.svelte (or form/input/index.svelte)
form/input.svelte => form/input.svelte
enhancement

最有用的评论

如果您想了解 Rich 对此的感受: https :

我也同意。 仅仅因为您可以在没有扩展名的情况下解析文件,并不意味着您应该使用.

所有5条评论

我反对这一点,因为您将不再区分哪个文件是 Svelte 文件,哪个文件是普通文件。 如果您在同一个文件夹中有index.jsindex.svelte发生什么? 应该进口什么? 这将是一个突破性的变化。 据我所知,捆绑器也不支持它。

对于你的具体情况,我建议添加一个index.js ,内容如下:

export { default as Index } from './index.svelte';
// ... you can add your other Svelte files here as well

然后像这样导入

<script>
   import { Index } from './form';
</script>

感谢您的答复。 我想再次确认我们是否在同一页面上,因为我不认为这个问题很有争议。

我要求能够像解析任何 Javascript、Typescript、JSX 或 TSX 文件一样解析 Svelte 文件。

以同样的方式,您不需要在 Typescript 或 React 项目中添加扩展:

import A from "./a.ts"
// you can just do
import A from "./a"

VSCode 打字稿解析器遵循 Node.js 解析规则。 当我们谈论设计 Node 的分辨率规则时,您的观点非常有效。 我同意你的更多限制。

但是鉴于这艘船已经航行,是什么让.svelte扩展名与.ts.tsx.jsx扩展名有什么不同?

跳过扩展在历史上是 Node 解析机制的一个特性。 我猜 Npm 的 Isaac Z. Schlueter 当时参与了讨论,此后对此表示遗憾。 他在对他的帖子的评论中遭到了不理解。 请放心,这肯定是一个非常有争议的话题。

标准 ESM 导入在跳过扩展的意义上没有任何意义,这是默认情况下 Svelte(和 Rollup)倾向于对齐的方向。

话虽如此,这纯粹是您使用的捆绑器的问题。 如果我没记错的话,Webpack .svelte扩展名默认是可选的。 在 Rollup 中,它是node-resolve插件的一个

话虽如此,这纯粹是您使用的捆绑器的问题。 如果我没记错的话,Webpack .svelte扩展名默认是可选的。 在 Rollup 中,它是node-resolve插件的一个

有趣的是,我不知道 webpack 插件中默认扩展是可选的。

支持这将意味着改变在语言服务器中完成模块解析的方式,以及其他可能的事情。 此外,它需要是一个设置,以便人们可以声明他们是否想要这种行为 - 毕竟,如果他们想要在没有.svelte情况下编写 Svelte 导入,他们可能还需要更改他们的构建配置。

我将重新打开,以便其他人可以对此进行权衡。

如果您想了解 Rich 对此的感受: https :

我也同意。 仅仅因为您可以在没有扩展名的情况下解析文件,并不意味着您应该使用.

此页面是否有帮助?
0 / 5 - 0 等级