https://github.com/ariperkkio/vite-plugin-source-map-visualizer

Vite plugin for generating source map visualizations of transform results
https://github.com/ariperkkio/vite-plugin-source-map-visualizer

developer-experience source-maps vite

Last synced: 3 months ago
JSON representation

Vite plugin for generating source map visualizations of transform results

• Host: GitHub
• URL: https://github.com/ariperkkio/vite-plugin-source-map-visualizer
• Owner: AriPerkkio
• Created: 2024-08-18T17:24:31.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-15T16:56:03.000Z (4 months ago)
• Last Synced: 2024-10-14T00:50:04.073Z (3 months ago)
• Topics: developer-experience, source-maps, vite
• Language: TypeScript
• Homepage: https://ariperkkio.github.io/vite-plugin-source-map-visualizer
• Size: 1.92 MB
• Stars: 11
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# vite-plugin-source-map-visualizer



    



[Installation](#installation) | [Configuration](#configuration) | [Credits](#credits)

> Vite plugin for generating source map visualizations of transform results

`vite-plugin-source-map-visualizer` is a Vite plugin for inspecting source maps of the transformed files. It generates HTML report that provides quick way for seeing how the tranformed files look in [source-map-visualization](https://github.com/evanw/source-map-visualization). See [live example](https://ariperkkio.github.io/vite-plugin-source-map-visualizer/).

For more detailed plugin debugging tool you might want to check [`vite-plugin-inspect`](https://github.com/antfu-collective/vite-plugin-inspect) instead.




[vite-plugin-source-map-visualizer.webm](https://github.com/user-attachments/assets/f93039d9-da22-459d-b933-1a49467e67a9)







## Installation

```bash

$ npm install --save-dev vite-plugin-source-map-visualizer

```

```ts

import { defineConfig } from "vite";

import { sourcemapVisualizer } from "vite-plugin-source-map-visualizer";

export default defineConfig({

  plugins: [sourcemapVisualizer()],

});

```

Run Vite and check `.vite-source-map-visualizer/report.html`:

```

└── .vite-source-map-visualizer

    └── report.html

```

## Configuration

You can pass options to the plugin as function arguments:

```ts

export default defineConfig({

  plugins: [

    sourcemapVisualizer({

      filename: "my-report.html",

    }),

  ],

});

```

### `filename`

Filename for the report. Defaults to `report.html`.

### `outDir`

Directory for the output. Defaults to `.vite-source-map-visualizer`.

### `silent`

Silence plugin's verbose logging.

### `formatName`

Format name of the files:

```ts

export default defineConfig({

  plugins: [

    sourcemapVisualizer({

      formatName: (filename) => filename.replace("src/", "/"),

    }),

  ],

});

```

## Credits

Special thanks to:

- [`vite-plugin-inspect`](https://github.com/antfu-collective/vite-plugin-inspect) from [@antfu](https://github.com/antfu)

- [source-map-visualization](https://github.com/evanw/source-map-visualization) from [@evanw](https://github.com/evanw)