mcpField
U
use-vite

use-vite

github.com/gkwa开发087 次安装3 天前更新
代码仓库

关于 use-vite

用于在 JavaScript 项目中配置 Vite 构建和 Vitest 测试的技能，涵盖 ESM 设置及通过 vite-plugin-checker 执行 TypeScript 检查。

主要功能

  1. 01配置 Vite 构建
  2. 02设置 Vitest 测试
  3. 03提供 ESM 配置指导
  4. 04使用 vite-plugin-checker 检查 TypeScript

适用场景

  1. 01为项目配置 Vite 和 ESM
  2. 02在开发及构建时检查类型

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/gkwa/volcanicviper --skill use-vite

安装后在 Claude Code 中输入/use-vite确认已加载。

附带文件tile.json

详细介绍

使用 Vite 作为构建系统，使用 Vitest 作为测试工具。

ESM 配置

在 vite.config.js 中使用 ESM 语法。在 package.json 中添加 "type": "module"，以便将所有 *.js 文件解析为 ESM。如果某个文件必须保持为 CJS，请使用 .cjs 扩展名。

不要使用 Vite 的 Node API 的 CJS 构建版本——该版本已弃用，并已在 Vite 6 中移除。参考：https://vite.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated

vite-plugin-checker

添加 vite-plugin-checker，以便在构建时同时进行 TypeScript 类型检查：

  1. 安装：
pnpm add --save-dev vite-plugin-checker
  1. 添加到 vite.config.js：
import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';

export default defineConfig({
  plugins: [
    checker({
      typescript: true,
    }),
  ],
});

开发期间，类型错误会显示在浏览器覆盖层和终端中。如果存在 TypeScript 错误，构建将失败——无需单独的类型检查脚本。

评论

支持 Markdown