如何将SvelteKit库编译为纯JavaScript及相关资源？

1. 调整Svelte编译配置 #

修改项目根目录的svelte.config.js，指定编译输出为原生DOM可运行的JS代码，并配置资源输出路径：

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

export default {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({
      pages: 'package',
      assets: 'package/assets'
    }),
    output: {
      format: 'esm' // 按需选择esm或cjs，适配目标项目的模块规范
    }
  },
  compilerOptions: {
    generate: 'dom', // 编译为直接操作DOM的纯JS代码
    format: 'esm'
  }
};

2. 生成TypeScript类型声明 #

确保项目已安装typescript和svelte-check，修改tsconfig.json开启类型文件输出：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "package",
    "emitDeclarationOnly": true,
    "outDir": "package",
    "rootDir": "src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "package"]
}

3. 配置资源与CSS打包 #

在vite.config.js中设置资源打包规则，让图片、CSS等资源统一输出到package/assets目录：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  build: {
    outDir: 'package',
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[hash][extname]'
      }
    }
  }
});

4. 修正package.json配置 #

更新package.json的入口、脚本和文件列表，确保其他项目能正确识别库的结构：

{
  "name": "your-lib-name",
  "version": "1.0.0",
  "type": "module",
  "main": "package/index.js",
  "types": "package/index.d.ts",
  "scripts": {
    "build": "svelte-kit build && tsc --emitDeclarationOnly",
    "prepublishOnly": "npm run build"
  },
  "files": ["package/**/*"]
}

5. 构建并验证 #

执行npm run build后，检查package目录：

• 仅包含编译后的纯JS文件（无.svelte源文件）
• 对应组件的.d.ts类型声明文件
• CSS和图片资源统一存放在assets子目录中

此时你的组件库就能在纯JS/TS项目中直接使用，示例用法：

import { MyComponent } from 'your-lib-name';
import 'your-lib-name/package/assets/style.css';

// 挂载组件到DOM节点
const component = new MyComponent({
  target: document.getElementById('app'),
  props: { /* 组件属性参数 */ }
});

内容的提问来源于stack exchange，提问作者Martin Ždila