A Vite plugin that lets you easily shadow files in your app directory from a blueprint.
Take this simple Vite app as example:
example/
├── blueprint/
│ ├── foobar.js
│ └── main.js
├── index.html
└── vite.config.js
And this vite.config.js:
import vitePluginBlueprint from 'vite-plugin-blueprint'
export default {
plugins: [
vitePluginBlueprint({
root: resolve => resolve(import.meta.url, 'blueprint'),
prefix: '@blueprint/',
files: [
// Searches foobar.js in the app root directory,
// if not found, provide foobar.js from the blueprint root
['foobar.js'],
// Searches for either main.js, index.js or start.js in the app root directory,
// if not found, provide main.js from the blueprint root
['main.js', ['index.js', 'start.js']],
],
}),
],
}Now, if you delete the main.js file at the root, the app will still compile because that file will be shadowed by main.js under blueprint/, as long as you use the prefix you set when referencing files:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App backed by Blueprint</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="@blueprint/main"></script>
</body>
</html>npm i vite-plugin-blueprint --save-devMIT
