vite-plugin-merge

Vite plugin which merges multiple input directories into the output directory.

Works for both build and serve modes.

Installation

``shell


npm

npm install --save-dev vite-plugin-merge

Yarn

yarn add --dev vite-plugin-merge

pnpm

pnpm add --save-dev vite-plugin-merge
`

Example

Input

`
.
├── modules
│ ├── a
│ │ └── locales
│ │ ├── en
│ │ │ └── common.json
│ │ └── nl
│ │ └── common.json
│ └── b
│ └── locales
│ ├── en
│ │ └── common.json
│ └── nl
│ └── common.json
├── src
│ └── index.ts
└── vite.config.ts
`

Configuration

`ts
import { defineConfig } from 'vite';
import { jsonMerger, merge } from 'vite-plugin-merge';

export default defineConfig({
plugins: [
merge({
inputs: ['./modules/**/locales'],
output: 'assets/locales',
mergers: {
'.json': jsonMerger({
deep: true,
}),
},
}),
],
});
`

Output

`
.
├── dist
│ ├── assets
│ │ ├── index-B5Qt9EMX.js
│ │ └── locales
│ │ ├── en
│ │ │ └── common.json
│ │ └── nl
│ │ └── common.json
│ └── index.html
└── vite.config.ts
`

Options

$3

List of input files or directories. Relative paths are resolved relative to the Vite root. Supports glob patterns, see tinyglobby for the syntax.

$3

Ouput file or directory. Relative paths are resolved relative to the Vite root and outDir.

$3

Optional map of mergers. The keys are file extensions, including the dot. The values are mergers. If multiple input files attempt to write to the same output file, a merger can be to customize the behaviour. If no merger is specified, the last input file overwrites other input files.

A merger is defined as follows:

`ts
type Merger =
| {
encoding: null;
merge: (a: Buffer, b: Buffer) => Buffer;
}
| {
encoding: 'utf-8';
merge: (a: string, b: string) => string;
};
`

Serveral built-in mergers are available.

#### overwriteMerger

The latter file will overwrite the former file. Essentially the same as not specifying a merger at all.

`ts
merge({
mergers: {
'.bin': overwriteMerger(),
},
});
`

#### concatMerger

The former and latter file are concatenated.

`ts
merge({
mergers: {
'.txt': concatMerger(),
},
});
`

#### jsonMerger

The former and latter file are parsed as JSON, merged and stringified.

`ts
merge({
mergers: {
'.json': jsonMerger({
/**
* Whether to perform deep or shallow merging.
* - Shallow uses Object.assign.
* - Deep uses deepmerge-ts.
*
* Defaults to false.
*/
deep: true,

/**
* Passed to JSON.stringify.
*
* Defaults to undefined.
*
* @see {@link JSON.stringify}
*/
replacer: null,

/**
* Passed to JSON.stringify.
*
* Defaults to undefined.
*
* @see {@link JSON.stringify}
*/
space: 4,
}),
},
});
`

$3

Output generation hook to use. Defaults to generateBundle.

$3

Whether to reload the page when an input file changes. Defaults to false`.

$3

Whether to enable debug logging.

License

This project is available under the MIT license.