如何将 Svelte 3 组件编译为可在 vanilla js 中使用的 IIFE

Question

我正在 Vanilla JS 中制作一个 Web 组件，它在后台使用隐藏的

select

，在前面使用

div

和

ul>li

。从 api 等获取数据变得有点复杂，所以我转向 Svelte 来简化它并使其更具可读性。

现在我已经尝试了 2 天将组件导出为 IIFE。我只是似乎不知道怎么做。我可能错了，但我认为这是 Svelte 的主要功能之一 - 制作可以在任何地方使用的可重用组件。制作它是很容易的部分，但现在我想加载它并直接在浏览器中使用它（使用

<script src=""></script>

）。我以为这应该很容易？

我使用 Svelte 3 (3.57.0) 和 Vite 4 (4.2.1)，并且我尝试了

npm create svelte

使用 SvelteKit 和

npm init vite

以

svelte

作为框架创建一个库项目。

我已经阅读了相当多的 Vite 和 Svelte 文档，但感觉不知所措，而且我似乎找不到有效的配置。

有人知道如何在 Svelte 中将组件编译为 IIFE 吗？

Answer 1

默认情况下，SvelteKit 仅预处理组件，以便任何 Svelte 项目可以使用它们。然后，Svelte 文件仅在使用组件库的项目中编译为纯 JS。

您可以添加单独的 Vite 配置来将组件完全编译为 JS 文件，例如

// vite.js.config.js
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
    build: {
        lib: {
            entry: resolve(__dirname, 'dist/index.js'),
            name: 'Components',
            fileName: 'components',
        },
        outDir: 'dist-js',
    },
    plugins: [
        svelte(),
    ],
});

此构建对 SvelteKit 的输出进行操作，该输出被写入

dist

并在

dist-js

中创建单独的 JS 输出。

要使用特定配置运行 Vite，您可以使用

-c

参数：

vite -c vite.js.config.js build

这可以例如作为脚本添加到

package.json

.

在库模式下Vite会自动输出一个ES模块文件，该文件需要一个

import

和一个UMD文件，当范围内没有其他加载器时，它将在一个对象上全局定义组件，其名称在

build.lib.name中给出

.

因此，在上面的示例中，如果您从

Component

文件导出

index.js

，则可以使用

客户端 API

通过 new Components.Component({ ... }) 构建它。