Vite Manifest Plugin

Description

This Vite plugin modifies the manifest file generated by Vite, updating file paths based on the provided options. Specifically, it extends the paths in the manifest by adding a public path to them.

Prerequisites

• Node.js
• npm

Installation

1. Install the plugin:

   npm install vite-manifest-plugin

   or

   yarn add vite-manifest-plugin

   or

   pnpm add vite-manifest-plugin

Usage

Vite Configuration

Add the plugin to your Vite configuration file (vite.config.ts):

// vite.config.ts
import { defineConfig } from 'vite';
import { viteManifestPlugin } from 'vite-manifest-plugin';

export default defineConfig({
  plugins: [
    viteManifestPlugin({
      fileName: 'manifest.json',
      publicPath: '/static/',
    }),
  ],
});

Plugin Options

• filename (string): The name of the manifest file.
• publicPath (string): The public path to prepend to the file paths in the manifest.

Project Structure

• src/: Source code directory.
  • types/: Directory for TypeScript type definitions.
  • utils.ts: Contains utility functions for plugin logic.
  • utils.test.ts: Contains tests for utility functions.
• dist/: Build output directory.

Development

Available Scripts

• pnpm build - Build the package
• pnpm test - Run tests in watch mode
• pnpm test:run - Run tests once
• pnpm test:coverage - Run tests with coverage report
• pnpm lint - Lint the code
• pnpm lint:fix - Lint and fix issues automatically
• pnpm clean - Remove build artifacts
• pnpm release - Bump version and create a release

CI/CD

This project uses GitHub Actions for continuous integration and deployment:

Workflows

1. CI/CD Pipeline (.github/workflows/ci.yml):

   • Runs on every push and pull request to main and develop branches
   • Tests against Node.js versions 18, 20, and 22
   • Runs linting, testing, and building
   • Publishes to npm when a GitHub release is created

2. Auto Release (.github/workflows/release.yml):

   • Automatically creates GitHub releases when version in package.json changes
   • Triggers on pushes to main branch

Publishing Process

For maintainers to publish a new version:

1. Create a new branch for the version update:

   git checkout -b release/vX.X.X

2. Update the version in package.json:

   pnpm version patch  # for patch version
   pnpm version minor  # for minor version
   pnpm version major  # for major version

3. Commit and push the version change:

   git add package.json
   git commit -m "chore: bump version to vX.X.X"
   git push origin release/vX.X.X

4. Create a pull request to merge into main branch

5. Once merged, the workflow will automatically:

   • Create a GitHub release
   • Publish the package to npm

Contributing

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes.
4. Commit your changes (git commit -m 'Add some feature').
5. Push to the branch (git push origin feature-branch).
6. Open a pull request.

Acknowledgements

• Vite
• TypeScript
• ESLint
• Vitest