在 Svelte 4 和 vite 项目中创建自定义元素的正确配置是什么？

Question

完成以下步骤后

1. 通过

   npm create vite@latest

创建 Svelte 项目

├── @sveltejs/[email protected]
├── [email protected]
└── [email protected]

2. 将

   App.svelte

   更改为

<svelte:options customElement="my-element" />

<script>
    export let character = '!'
</script>

<h1>my-element{character}</h1>

<style>
    h1 {
        color: teal;
    }
</style>

3. 将

   main.js

   更改为

import App from './App.svelte'
export default App

4. 添加编译器选项

   vite.config

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [svelte({
        compilerOptions: {
            customElement: true,
        }
    })],
})

5. 跑步

   npm run build

dist

目录包含以下文件

dist
│   index.html
│   vite.svg
└───assets
    │   index-22b2453f.js

虽然似乎可以从生成的

.js

文件中导入和使用自定义元素，但我想知道为什么它不仅仅是一个

bundle.js

文件，如这个答案

中经常描述的那样

需要什么配置才能使用给定的“静态”名称生成一个

.js

文件，而不需要可以从中导入自定义元素的哈希值？

Answer 1

我希望我正确理解你的问题，要生成单个“静态”包，请在

build.rollupOptions

中使用

vite.config.js

。您可以在那里找到更多信息。

根据您的示例，在步骤 #4 中，vite 的配置将如下所示：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    svelte({
      compilerOptions: {
        customElement: true,
      },
    }),
  ],
  build: {
    target: "esnext",
    rollupOptions: {
      input: {
        index: "./src/main.js",
      },
      // single
      output: {
        format: "umd",
        chunkFileNames: `[name].[hash].js`,
        entryFileNames: "my-element.umd.js", // <--
        dir: "dist",
      },
    },
  },
});

然后您可以将文件添加到

index.html

中（文件位于

public

文件夹中）:

<script type="module" src="my-element.umd.js" defer></script>

或者从 Svelte 组件导入它（文件位于

src

文件夹中）:

import * as MyElement from './my-element.umd.js'

然后使用自定义元素：

<my-element character="⚡" />