Vite Plugin for Compression, Checksums, and Auto-Renaming

Streamlining Vite Packaging with a Comprehensive Plugin

When it comes to Vite packaging solutions, many existing plugins like vite-plugin-zip-pack and vite-plugin-compress fall short in functionality, often supporting only ZIP formats. Real-world projects require a more robust approach to meet diverse packaging needs.

Introducing vite-plugin-pack-orchestrator

This innovative plugin addresses multiple packaging challenges by supporting a variety of formats, including ZIP, TAR, TAR.GZ, and 7Z, making it ideal for different use cases, such as sharing with colleagues or deploying to Linux servers.

Key Features

• Multi-Format Compression: Choose from ZIP, TAR, TAR.GZ, or 7Z to suit various deployment and storage requirements.
• Checksum Verification: Automatically generate MD5, SHA1, and SHA256 checksums to ensure build integrity.
• Flexible File Naming: Use placeholders like [name], [version], [timestamp], and [hash] for dynamic filename creation.
• CI/CD Efficiency: Auto hash-renaming ensures every build artifact is uniquely identifiable, streamlining deployment processes.

Setup and Installation

Getting started is simple. Install the plugin via npm:

npm install vite-plugin-pack-orchestrator -D

A basic configuration example:

// vite.config.ts
import { defineConfig } from 'vite';
import orchestrator from 'vite-plugin-pack-orchestrator';

export default defineConfig({
  plugins: [
    orchestrator({
      pack: {
        outDir: 'dist',
        format: 'zip',
        fileName: 'myapp',
      },
    }),
  ],
  build: { outDir: 'dist' },
});

Running vite build will create a myapp.zip in your project's root directory.

Advanced Configuration

Packaging Options

Customize your packaging process with options such as:

• outDir: Specify the source directory.
• fileName: Utilize placeholders for dynamic naming.
• format: Select desired archive format.
• compressionLevel: Adjust compression intensity.
• archiveOutDir: Define the output directory for archives.

Filename Placeholders

These placeholders enable dynamic naming based on package.json data, current timestamps, or content-based hashes:

• [name]: Application name.
• [version]: Current version.
• [timestamp]: Build timestamp.
• [hash]: MD5 hash of bundle content.

Lifecycle Hooks

Hooks provide control over the packaging workflow:

• onBeforeBuild: Execute tasks before packaging.
• onBundleGenerated: Access and modify bundle output before archiving.
• onAfterBuild: Rename files based on checksums or perform post-archive actions.
• onError: Handle packaging errors with custom alerts.

Importance of Auto Hash-Renaming in CI/CD

In CI/CD pipelines, distinguishing artifacts is crucial. Auto hash-renaming embeds a unique identifier in filenames, enhancing traceability and simplifying rollbacks.

Complete Example

Here's a comprehensive configuration for production:

// vite.config.ts
import { defineConfig } from 'vite';
import orchestrator from 'vite-plugin-pack-orchestrator';

export default defineConfig({
  plugins: [
    orchestrator({
      pack: {
        outDir: 'dist',
        fileName: 'myapp-[version]',
        format: 'zip',
        archiveOutDir: './releases',
        exclude: ['**/*.map'],
      },
      hooks: {
        onAfterBuild: (path, format, checksums) =>
          path.replace(/(\.(?:zip|tar\.gz|tar|7z))$/, `-${checksums.sha1.slice(0, 8)}$1`),
        onError: (error) => console.error('Packaging failed:', error.message),
      },
    }),
  ],
  build: { outDir: 'dist' },
});

With this setup, vite-plugin-pack-orchestrator efficiently manages your packaging needs, offering a seamless, script-free experience for developers.