How do I change the input dir in ViteJS?

Philipp Mochine 0
Viewed 32

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.

rollupjs vite
1 Answers

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(),
    ],
});
Philipp Mochine0
Related