如何修改vite.config.ts以将Svelte组件发布至NPM

算力阿峰

2026-8-10

配置Vite发布Svelte组件到NPM

要实现通过import MyComponent from "mycomponent"引入组件，你需要修改vite.config.ts并补充必要的项目配置，步骤如下：

1. 修改vite.config.ts

更新配置文件，添加build字段指定库模式打包，配置入口、输出格式等：

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

export default defineConfig({
  plugins: [svelte({ compilerOptions: { customElement: false } })],
  build: {
    lib: {
      entry: './src/main.ts', // 你的导出入口文件
      name: 'MyComponent',
      formats: ['es', 'umd'], // 支持ES模块和UMD格式
      fileName: (format) => `mycomponent.${format}.js`
    },
    rollupOptions: {
      // 排除Svelte作为外部依赖，避免打包进组件库
      external: ['svelte'],
      output: {
        // 提供全局变量，供UMD格式使用
        globals: {
          svelte: 'Svelte'
        }
      }
    }
  }
})

2. 配置package.json

必须补充以下字段，确保NPM能正确识别你的包：

{
  "name": "mycomponent", // 你的包名，需在NPM上唯一
  "version": "1.0.0",
  "type": "module",
  "main": "./dist/mycomponent.umd.js", // UMD格式入口
  "module": "./dist/mycomponent.es.js", // ES模块入口
  "exports": {
    ".": {
      "import": "./dist/mycomponent.es.js",
      "require": "./dist/mycomponent.umd.js"
    },
    "./dist/style.css": "./dist/style.css" // 若组件有样式，需导出
  },
  "files": [
    "dist",
    "src" // 可选，发布源码方便调试
  ],
  "peerDependencies": {
    "svelte": "^3.0.0 || ^4.0.0" // 声明Svelte为对等依赖
  }
}