如何使用’sveltekit-autoimport’自动导入’svelte/transition’?

huangapple go评论64阅读模式
英文:

How to auto import 'svelte/transition' with 'sveltekit-autoimport'?

问题

我尝试使用 sveltekit-autoimport 版本 1.6.10 自动导入 svelte/transition 模块。

vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import autoImport from 'sveltekit-autoimport'

export default defineConfig({
  plugins: [
    autoImport({
      components: ['./src/components'],
      module: {
        svelte: ['onMount', 'createEventDispatcher'],
        'svelte/transition': ['fly'],
        'svelte-apollo': ['mutation'],
      },
    }),
    svelte()
  ]
})

一切都运作正常,除了:'svelte/transition': ['fly']

我也尝试了不同的组合和 mapping 替代 module 但无法使其工作。

autoImport({
  mapping: {
    fly: `import { fly } from 'svelte/transition'`
  }
})

非常感谢任何帮助 如何使用’sveltekit-autoimport’自动导入’svelte/transition’?

英文:

I'm trying to use sveltekit-autoimport version 1.6.10 to auto import svelte/transition module.

Inside vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import autoImport from 'sveltekit-autoimport'

export default defineConfig({
  plugins: [
    autoImport({
      components: ['./src/components'],
      module: {
        svelte: ['onMount', 'createEventDispatcher'],
        'svelte/transition': ['fly'],
        'svelte-apollo': ['mutation'],
      },
    }),
    svelte()
  ]
})

Everything is working fine, except: 'svelte/transition': ['fly']

I also tried using different combinations and mapping instead of module but couldn't make it work.

autoImport({
  mapping: {
    fly: `import { fly } from 'svelte/transition'`
  }
})

Any help will be really appreciated 如何使用’sveltekit-autoimport’自动导入’svelte/transition’?

答案1

得分: 0

此错误已在版本1.7.0中解决

您现在可以像以下方式一样无问题地使用它:

<script>
  let visible = true
</script>

<label>
  <input type="checkbox" bind:checked={visible}>
  可见
</label>

{#if visible}
  <p in:fly={{ y: 200 }} out:fly={{ y: 200 }}>
    飞入和飞出
  </p>
{/if}

不要忘记在vite.config.js中的module内首先添加它

autoImport({
  module: {
    'svelte/transition': ['fly']
  }
})
英文:

This bug has been resolved in version 1.7.0

You can use it now without problems as follows:

&lt;script&gt;
  let visible = true
&lt;/script&gt;


&lt;label&gt;
  &lt;input type=&quot;checkbox&quot; bind:checked={visible}&gt;
  visible
&lt;/label&gt;

{#if visible}
  &lt;p in:fly={{ y: 200 }} out:fly={{ y: 200 }}&gt;
    Fly in and out
  &lt;/p&gt;
{/if}

Don't forget to add it first in module inside vite.config.js

autoImport({
  module: {
    &#39;svelte/transition&#39;: [&#39;fly&#39;]
  }
})

huangapple
  • 本文由 发表于 2023年3月4日 02:34:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/75630705.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定