如何将一个简洁的组件编译为纯 HTML 应用程序的单行导入？

Question

我有一个其他人想在他们自己的网站上使用的 svelte 组件，它是纯 HTML/JavaScript。

我的计划是让他们使用引用我托管的 CDN 的脚本标签，如下所示：

<script src="http://examplecdn.com/myfile.js"></script>

我是否需要以某种方式设置项目来促进这一点？如何找到特定组件的文件？我可以仅使用此组件创建一个新项目，但不想将代码从 svelte 转换过来。

---

对于某些情况，为了测试，我建立了一个基本的精简项目：

npm create svelte@latest my-example-module

并且刚刚添加了此代码来测试我是否可以得到一些简单的工作：

<script lang="ts">
    let text = "IT IS WORKING"
</script>
<h1>{text}</h1>
<style>
    h1 {font-size: 3rem}
</style>

我运行了

npm run build

，并且有很多已编译的JavaScript，但我不确定下一步是什么。

Answer 1

svelte 团队确实在推动用户使用 sveltekit，对于某种类型的项目来说，这可能是可行的方法，但恕我直言，在许多情况下，另一种方法可能更适合并且更简单。

您可以尝试以下步骤：

使用vite启动项目并选择svelete模板

npm init vite

我选择了这些选项

Need to install the following packages:
  create-vite
Ok to proceed? (y) y
√ Project name: ... vite-project
√ Select a framework: » Svelte
√ Select a variant: » JavaScript

然后您需要编辑

vite.config.js

文件并添加构建选项

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { resolve } from "path";

export default defineConfig({
  plugins: [svelte()],
  build: {
    rollupOptions: {
      output: {
        format: "iife",
        dir: resolve(__dirname, "./dist"),
        entryFileNames: "main.js",
      },
    },
  },
});

我设置为 IIFE，但您可以使用任何其他格式（es、cjs、umd 等），请注意，默认设置为使用模块，因此您需要使用

type="module"

:

导入它

<script type="module" crossorigin src="/main.js"></script>

Answer 2

这有点令人困惑，但是

npm create svelte

命令（即

create-svelte

npm包）创建了一个SvelteKit应用程序，该应用程序（截至2023-09）不支持您的用例out-开箱即用。

您可以改为 使用仅限 svelte 的模板，如 Daniel 此处的建议 或（一旦您开始对这一切感到满意）将自定义 vite 配置添加到 SvelteKit 骨架，如本食谱中所示以获得 svelte-> Web 组件库。

在纯 HTML / vanilla JS 页面中包含 svelte 组件的方式取决于构建组件的方式：

• 可以说更简单的方法是输出“Web 组件”（如本只是稍微过时的教程中详细介绍的）：
  • 将

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

    放在组件的

    .svelte

    文件顶部
  • 将

    compilerOptions: {  customElement: true, ...

    放置在设置中指定的位置
  • 通过

    <script>

  将生成的 JS 包包含在 HTML 中
  • 在 HTML 中使用自定义元素：

    <my-card></my-card>

• 在常规模式下，svelte 生成必须手动绑定到 DOM 元素的 JS 类（客户端组件 API）

---

详细说明 SvelteKit 与 Svelte 入门模板：

SvelteKit 应用程序中的

npm run build

构建站点，包括所有页面的服务器和客户端 JS (

src/routes/*

)（请参阅项目结构）。

正如有关包装的官方文档所说：

组件库与 SvelteKit 应用程序具有完全相同的结构，除了 src/lib 是面向公众的位，并且您的根 package.json 用于发布包。 src/routes 可能是库附带的文档或演示站点，也可能只是您在开发过程中使用的沙箱。

如果您在create-svelte中选择“Library project”：

create-svelte version 5.0.5

┌  Welcome to SvelteKit!
│
◇  Where should we create your project?
│  test
│
◆  Which Svelte app template?
│  ○ SvelteKit demo app
│  ○ Skeleton project
│  ● Library project (Barebones scaffolding for your new Svelte library)
└

...您最终会得到一个稍微不同的设置，其中 includes 一个

@sveltejs/package

devDependency 和一个

npm run package

脚本，该脚本运行

svelte-package

将组件从

src/lib

目录构建到

dist/ 

文件夹。

这为您提供了一个 npm 包，您可以在其他 svelte 应用程序中发布和/或安装 ，因为它仍然包含 .svelte

 文件，并且依赖于具有构建步骤的目标应用程序。有 

https://github.com/sveltejs/kit/issues/2572 建议扩展 svelte-package 来生成 JS 包，可以在非 svelte 应用程序中使用。

但是不使用该套件的 svelte 项目（例如开始使用现已弃用的

sveltejs/template 或较新的 create-vite svelte 模板）甚至没有“app”部分，因此它们的构建步骤更接近你需要什么。

---