0.0.2 • Published 3 years ago
vite-fait v0.0.2
Vite ⚡ Fait
Easily Integrate Vite Into Your Backend Application
Installation
# using npm
npm install vite-fait --save-dev
# using yarn
yarn add --dev vite-fait
Usage
Using Symfony? See the docs
Create vite.config.js
in the root folder:
project
│ package.json
│
└───assets
│ │ app.js
│ │ app.scss
│ │
│ └───public
│ │ favicon.ico
│ │ logo.png
│ │ ...
│
└───src
│ index.php
│ ...
vite.config.js
Add the following code in vite.config.js
:
const ViteFait = require('vite-fait');
ViteFait
.setBase('/dist/')
.setRoot('assets')
// Directory where compiled assets will be stored.
// Relative from root dir.
.setOutputPath('../public/dist')
// Splits your files into smaller pieces for greater optimization.
.splitEntryChunks()
// Set to false to disable minification, or specify the minifier to use (esbuild or terser)
.minify(ViteFait.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(ViteFait.isProduction())
// Dev server options
.setServerOptions({
// port: 3001
// https: true,
// port: 3001
})
/*
* Entry files config
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/app.js')
.addEntry('admin', './assets/admin/app.js');
module.exports = ViteFait.getViteConfig()
Add vite-fait scripts in your package.json
{
"scripts": {
"build": "vite-fait build",
"dev": "vite-fait dev",
}
}
Then run your first build with yarn build
or npm run build
It generate entrypoints.json
file in public/dist
:
{
"entrypoints": {
"app": {
"js": [
"/dist/app.7f38ab96.js"
],
"css": [
"/dist/app.c385b6b3.css"
]
},
"admin": {
"js": [
"/dist/admin.a88436ae.js"
],
"css": [
"/dist/admin.0e68df5b.css"
]
}
}
}
Using Plugins
Read how to use vite plugins first before reading this section
Put your plugins inside the usePlugins
method:
const fooPlugin = function() {
return {
name: 'vite-plugin-foo',
configureServer() {
console.log('foo');
}
}
}
ViteFait
.usePlugins(fooPlugin()) // use array for multiple plugins: [fooPlugin(), barPlugin()]
Multiple builds
TODO
TODO
- Add more tests
- React support
- Vue support
- Documentation