Vite Plugin HTML 使用教程

1. 项目的目录结构及介绍

vite-plugin-html/
├── src/
│   ├── index.ts
│   ├── utils.ts
│   └── types.ts
├── test/
│   ├── index.test.ts
│   └── utils.test.ts
├── package.json
├── README.md
├── tsconfig.json
└── vite.config.ts

• src/: 包含项目的主要源代码文件。
  • index.ts: 插件的主入口文件。
  • utils.ts: 包含一些工具函数。
  • types.ts: 定义插件的类型和接口。
• test/: 包含项目的测试文件。
  • index.test.ts: 主入口文件的测试。
  • utils.test.ts: 工具函数的测试。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目的说明文档。
• tsconfig.json: TypeScript 的配置文件。
• vite.config.ts: Vite 的配置文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.ts，它是插件的主入口文件。该文件导出了插件的主要功能和配置选项。

import { createHtmlPlugin } from './utils';

export default function VitePluginHtml(options) {
  return {
    name: 'vite-plugin-html',
    transformIndexHtml: createHtmlPlugin(options),
  };
}

3. 项目的配置文件介绍

vite.config.ts

vite.config.ts 是 Vite 的配置文件，用于配置 Vite 的行为。以下是一个示例配置：

import { defineConfig } from 'vite';
import VitePluginHtml from 'vite-plugin-html';

export default defineConfig({
  plugins: [
    VitePluginHtml({
      inject: {
        data: {
          title: 'Vite App',
        },
      },
    }),
  ],
});

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "vite-plugin-html",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "test": "jest"
  },
  "dependencies": {
    "vite": "^2.0.0"
  },
  "devDependencies": {
    "typescript": "^4.0.0",
    "jest": "^27.0.0"
  }
}

• scripts: 定义了项目的常用脚本命令。
  • dev: 启动开发服务器。
  • build: 编译和构建项目。
  • test: 运行测试。
• dependencies: 项目的运行时依赖。
• devDependencies: 开发时的依赖。

通过以上配置，你可以更好地理解和使用 vite-plugin-html 插件。