What's the recommended way to inject js code into the main.js?

[yaquawa]

I've seen many plugins like vite-plugin-windicss have the style of installation steps like this:

step 1. install in the vite.config.js

// vite.config.js
import WindiCSS from 'vite-plugin-windicss'

export default {
  plugins: [
    WindiCSS()
  ],
};

step 2. install in the main.js

// main.js
import 'virtual:windi.css'

where [step 2] is completed redundant..
Wouldn't it be better to just inject the import 'virtual:windi.css' automatically..?
I'm looking for the recommended way to inject js code into the main.js, any suggestions?

[anncwb]

You can write a plug-in yourself. E.g

{
     name:'injectCode',
     transform(code, id) {
       if (id ==='xxxx/src/main.js') {
         const injectCode ='xxx';
         // Processed code
         return processCode;
       }
       return code;
     },
   };

[yaquawa]

Yes I could done with a simple transform hook, but how could you tell the entry file's id? It might not be main.js at all.

[anncwb]

You can provide configuration information to allow users to configure the entry file address

[MrVauxs]

Anyone have an answer to this? I wanted to make an all-in-one plugin that automatically imports an if (import.meta.hot) { ... } into the bundle.