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

Question

select我正在 Vanilla JS 中制作一个 Web 组件，它在后台使用隐藏，在前面使用divand ul>li。从 api 等获取数据变得有点复杂，所以我转向 Svelte 来简化它并使其更具可读性。

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

我使用 Svelte 3 (3.57.0) 和 Vite 4 (4.2.1)，并且我尝试使用 SvelteKit 和框架npm create svelte创建一个库项目。npm init vitesvelte

我已经阅读了相当多的 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.

要使用特定配置运行 Vite，您可以使用参数-c：

vite -c vite.js.config.js build

例如，这可以作为脚本添加到package.json.

库模式下的 Vite会自动输出一个需要一个 ES 模块文件import和一个 UMD 文件，当范围内没有其他加载器时，该文件将在一个对象上全局定义组件，其名称在build.lib.name.

Component因此，在上面的示例中，如果从文件中导出index.js，则可以通过new Components.Component({ ... })客户端 API来构造它。