Svelte + Vite + Tailwind CSS 4.0

以下是基于你的需求（Svelte + Vite + Tailwind CSS 4.0，输出单一页面和单一 JS 文件），使用 pnpm 的完整更新步骤。考虑到 Tailwind CSS 4.0 的新特性和你遇到的 terser 错误，我会优化步骤，确保流程顺畅。

目标

创建一个 Svelte 单页面应用（计数器示例）。
使用 Tailwind CSS 4.0 样式。
通过 Vite 构建，输出单一 index.html 和单一 bundle.js。
使用 pnpm 管理依赖。

完整步骤

初始化项目

bash

# 创建 Vite + Svelte 项目
pnpm create vite svelte-tailwind --template svelte
cd svelte-tailwind

# 安装基础依赖
pnpm install

安装 Tailwind CSS 4.0 和相关插件

bash

# 安装 Tailwind CSS 4.0 和 Vite 插件
pnpm add -D tailwindcss@latest @tailwindcss/vite

# 检查版本（可选）
pnpm list tailwindcss

注意: Tailwind 4.0 不需要 postcss 或 autoprefixer，因为它内置了 Lightning CSS。

配置 Tailwind CSS

创建 src/app.css：

css

@import "tailwindcss";

Tailwind 4.0 默认自动扫描内容，无需配置 tailwind.config.js，除非你需要自定义主题。如果需要配置，可添加：

javascript

// tailwind.config.js（可选）
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{svelte,js,ts}'],
  theme: { extend: {} },
  plugins: [],
};

创建 Svelte 组件

编辑 src/App.svelte：

svelte

<script>
  let count = 0;
</script>

<div class="bg-gray-100 flex items-center justify-center h-screen">
  <div class="bg-white p-6 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold text-gray-800">计数器: {count}</h1>
    <div class="mt-4 space-x-4">
      <button on:click={() => count++} class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        增加
      </button>
      <button on:click={() => count--} class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
        减少
      </button>
    </div>
  </div>
</div>

<style>
  @import './app.css';
</style>

编辑 src/main.js：

javascript

import App from './App.svelte';

const app = new App({
  target: document.getElementById('app'),
});

export default app;

配置 Vite

编辑 vite.config.js：

javascript

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

export default defineConfig({
  plugins: [svelte(), tailwindcss()],
  build: {
    minify: 'esbuild', // 使用 esbuild，避免 terser 依赖
    cssCodeSplit: false, // CSS 内联到 JS
    rollupOptions: {
      output: {
        manualChunks: undefined, // 禁用代码分割
        entryFileNames: 'bundle.js', // 单一 JS 文件
        inlineDynamicImports: true, // 内联动态导入
      },
    },
  },
});

修改 index.html

编辑 index.html（项目根目录）：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Svelte + Tailwind</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

构建项目

bash

pnpm run build

输出目录：dist/。
生成文件：
- dist/index.html
- dist/bundle.js（包含 JS 和内联的 CSS）。

检查输出

构建后，dist/index.html 应类似于：

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Svelte + Tailwind</title>
</head>
<body>
  <div id="app"></div>
  <script src="/bundle.js"></script>
</body>
</html>

嵌入 PHP（可选）

将输出嵌入 PHP 文件，例如 index.php：

php

<?php
$initialCount = 5;
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Svelte + Tailwind</title>
</head>
<body>
  <div id="app"></div>
  <script>
    window.initialCount = <?php echo $initialCount; ?>;
  </script>
  <script src="/dist/bundle.js"></script>
</body>
</html>

更新 src/App.svelte 以读取初始值：

svelte

<script>
  let count = window.initialCount || 0;
</script>

<div class="bg-gray-100 flex items-center justify-center h-screen">
  <div class="bg-white p-6 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold text-gray-800">计数器: {count}</h1>
    <div class="mt-4 space-x-4">
      <button on:click={() => count++} class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        增加
      </button>
      <button on:click={() => count--} class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">
        减少
      </button>
    </div>
  </div>
</div>

<style>
  @import './app.css';
</style>

重新构建：

bash

pnpm run build

文件大小

bundle.js: 约 10-15 KB（Svelte 运行时 + 组件代码 + Tailwind CSS）。
index.html: 几百字节。

关键调整

Tailwind 4.0: 使用 @import "tailwindcss";，无需额外 PostCSS 配置。
Vite: 使用 esbuild 替代 terser，避免依赖问题。
pnpm: 确保命令一致，安装更快。

验证

开发模式：pnpm run dev
构建：pnpm run build
检查 dist/ 是否只包含 index.html 和 bundle.js，并测试页面功能。

发送评论 编辑评论

发送评论编辑评论