index.html entry point and one other specific entry point

[demyte]

Hi,

@vitejs/plugin-react: 1.3.0
Typescript: 4.6.3
Vite: 2.9.2

I am trying to add a secondary entry point to my Vite build (react) where there is a standard one through my index.html and then I have another one pointing to a specific file to build it out and its dependencies.

The second one is at say: ./src/functions/functions.ts and I would like it to be referenced at <baseUrl>/functions.js.

I have tried and failed over and over to get this to work using config in build.rollupOptions.input or optimizeDeps.entries and must just be missing something.

For the config when using optimizeDeps, I have this in my vite.config.ts:

export default defineConfig({
  build: {
    manifest: true,
  },
  optimizeDeps: {
    entries: "./src/functions/functions.ts",
  },
  plugins: [react()],
});

This gives me this manifest.json:

{
  "index.html": {
    "file": "assets/index.a63617ee.js",
    "src": "index.html",
    "isEntry": true,
    "css": [
      "assets/index.62f502b0.css"
    ]
  }
}

For the config when using build.rollupOptions.input, I have this in my vite.config.ts:

export default defineConfig({
  build: {
    manifest: true,
    rollupOptions: {
      input: "./src/functions/functions.ts"     
    },
  },
  plugins: [react()],
});

This gives me this manifest.json which seems to now exclude the reference from my index.html to /src/main.tsx:

{
  "src/functions/functions.ts": {
    "file": "assets/functions.881a064d.js",
    "src": "src/functions/functions.ts",
    "isEntry": true
  }
}

So then I tried this in my vite.config.json:

export default defineConfig({
  build: {
    manifest: true,
    rollupOptions: {
      input: ["index.html", "./src/functions/functions.ts"],
      output: {
        entryFileNames: "[name].js",
      },
    },
  },
  plugins: [react()],
}

This gives me this manifest.json, which looks like it should work, but when I go to <baseUrl>/functions.js in Dev mode, it is not there:

{
  "index.html": {
    "file": "index.js",
    "src": "index.html",
    "isEntry": true,
    "css": [
      "assets/index.62f502b0.css"
    ]
  },
  "src/functions/functions.ts": {
    "file": "functions.js",
    "src": "src/functions/functions.ts",
    "isEntry": true
  }
}

Appreciate any and all help.

[andr3medeiros]

Hi @demyte !

For dev mode I usually have a server plugin that helps me with these specifics:

export const serverPlugin = (): Plugin => ({
	name: 'server-plugin',
	apply: 'serve',
	configureServer(server) {
		server.middlewares.use('/functions.js', async (req, res, next) => {
			const transformed = await server.transformRequest('./src/functions/functions.ts');
			if (!transformed) return next(); // let Vite handle 404 or fallback

			res.setHeader('Content-Type', 'application/javascript');
			res.end(transformed.code);
		});

	}
})

There might an easier way, but I couldn't find in the docs or Vite's code.