tona-vite

English | 中文

特性

• 动态脚本注入 - 自动检测并注入主题脚本
• 共享资源服务 - 在开发期间提供共享资源
• IIFE 构建输出 - 为主题分发配置库格式
• 开发服务器支持 - 完整的开发服务器和热重载
• 多资源路径 - 支持 /public/、/templates/、/js/、/css/、/images/

安装

npm install -D tona-vite

pnpm add -D tona-vite

使用

import tona from 'tona-vite'
import { defineConfig } from 'vite-plus'

export default defineConfig({
  plugins: [tona()],
})

使用选项

import tona from 'tona-vite'
import { defineConfig } from 'vite-plus'

export default defineConfig({
  plugins: [
    tona({
      themeName: 'my-theme',
    }),
  ],
})

选项

interface TonaPluginOptions {
  /**
   * 构建输出文件名的主题名称
   * @default 'theme'
   */
  themeName?: string
}

构建配置

该插件自动配置 Vite 用于主题开发：

| 设置 | 值 | 描述 | | ------------ | ------------------------------ | -------------------- | | 库格式 | IIFE | 立即执行函数表达式 | | 入口点 | src/main.ts 或 src/main.js | 自动检测 | | 输出文件名 | {themeName}.min.js | 默认：theme.min.js | | CSS 代码分割 | 禁用 | 所有样式打包在一起 |

开发服务器

在开发期间，该插件从插件的 public 目录提供静态资源：

• /public/* - 通用公共资源
• /templates/* - HTML 模板
• /js/* - JavaScript 文件
• /css/* - CSS 文件
• /images/* - 图片文件
• / 或 /index.html - 导航索引页面

示例项目结构

my-theme/
├── src/
│   ├── main.ts          # 主题入口
│   └── style.css        # 主题样式
├── vite.config.ts       # Vite + Tona 插件配置
└── package.json

vite.config.ts 示例

import tona from 'tona-vite'
import { defineConfig } from 'vite-plus'

export default defineConfig({
  plugins: [tona()],
  // 如有需要，可添加额外的 Vite 配置
})

相关

• tona - 核心框架
• create-tona - 项目脚手架