How do I change the input dir in ViteJS? - vite

Question

I'm trying to build/compile a demo page for my plugin with ViteJS. How do I pinpoint ViteJS to my file that needs to be compiled?
my-plugin/
├─ demo/
│ ├─ resources/js/
│ │ ├─ app.js <---- This needs to be read (`npm run build:demo`)
│ ├─ public/js/
│ │ ├─ app.js <---- This should be my ViteJS demo output (outDir)
├─ node_modules/
├─ dist/ <---- This works ✅ (`npm run build:dist`)
│ ├─ index.mjs
│ ├─ index.umd.js
├─ src/
│ ├─ index.js
├─ index.html <---- This is the demo index.html that is needed for GitHub (cannot change the location)
├─ package.json
I have added these lines of code in
// package.json
...
"scripts": {
"build:dist": "LIB_NAME=dist vite build",
"build:demo": "LIB_NAME=demo vite build",
"build": "npm run build:dist && npm run build:demo",
},
...
I want to run npm run build:demo. But I get errors, like:
[vite]: Rollup failed to resolve import "/demo/public/js/app.js" from "index.html".
This is most likely unintended because it can break your application at runtime...
My vite.config.js looks like this:
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
const path = require('path');
const config = {
dist: {
build: {
lib: {
entry: path.resolve(__dirname, './src/index.js'),
name: 'VueResponsiveVideoBackgroundPlayer',
fileName: 'vue-responsive-video-background-player',
},
rollupOptions: {
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// Add external deps here
globals: {
vue: 'Vue',
},
exports: 'named',
},
},
outDir: './dist',
},
plugins: [
vue(),
cssInjectedByJsPlugin(),
],
},
demo: {
// <--------- This is the part where I have to change something
// root: './demo/resources/js/',
build: {
outDir: './demo/public/js',
},
plugins: [
vue(),
cssInjectedByJsPlugin(),
],
},
};
const currentConfig = config[process.env.LIB_NAME];
if (currentConfig === undefined) {
throw new Error('LIB_NAME is not defined or is not valid');
}
// https://vitejs.dev/config/
export default defineConfig({
...currentConfig,
plugins: [
vue(),
cssInjectedByJsPlugin(),
],
});
It would be awesome, if I could somehow say to ViteJS please use ./demo/resources/js/app.js as the input and after the compile set the output to ./demo/public/js.app.js.
Here is the source if you need it.

Answer 1

Yeah I found the solution:
It took me a while, but have look at my vite.config.js file.
// https://www.raulmelo.dev/blog/build-javascript-library-with-multiple-entry-points-using-vite-3
import { defineConfig } from 'vite';
import vue from '#vitejs/plugin-vue';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
const path = require('path');
const config = {
// npm run build:dist for npm
dist: {
build: {
outDir: './dist',
lib: {
entry: path.resolve(__dirname, './src/index.js'),
name: 'VueResponsiveVideoBackgroundPlayer',
fileName: 'vue-responsive-video-background-player',
},
rollupOptions: {
external: ['vue'],
output: {
// Provide global variables to use in the UMD build
// Add external deps here
globals: {
vue: 'Vue',
},
// in index.js we use a named + default export.
// We hide the error message with 'named'
exports: 'named',
},
},
},
},
// npm run build:demo for the demo page
demo: {
build: {
outDir: './demo/public/build',
rollupOptions: {
input: './demo/resources/js/app.js',
output: {
chunkFileNames: 'js/[name].js',
entryFileNames: 'js/[name].js',
},
},
},
},
};
const currentConfig = config[process.env.LIB_NAME];
if (currentConfig === undefined) {
throw new Error('LIB_NAME is not defined or is not valid');
}
// https://vitejs.dev/config/
export default defineConfig({
...currentConfig,
plugins: [
vue(),
cssInjectedByJsPlugin(),
],
});