Build-time macro-equivalent to imports?

[Ashvith10]

I wish to use macros or code snippets that are unique to ViteJS, so that it can understand that based on the environment I am on, it should decide between two line of code - kind of like how we have it in low-level languages.

Right now, here's how my code snippet looks like:

let van

if (import.meta.env.DEV) {
  van = await import('vanjs-core/debug').then(module => module.default)
} else {
  van = await import('vanjs-core').then(module => module.default)
}

but the issue is that this code isn't understood by Vite, and the resulting outcome is that it also shows up in the browser during the npm run dev lifecycle. I don't wish to have this code in the browser - it should be dealt with by Vite - any tip on where I should look at?

[sapphi-red]

The imports field and the development condition can be used in your case.

If you add the following code to package.json,

{
  "imports": {
    "#vanjs": {
      "development": "vanjs-core/debug",
      "default": "vanjs-core"
    }
  }
}

and use it by import van from '#vanjs', van will be the value of import van from 'vanjs-core/debug' when import.meta.env.DEV === true and import van from 'vanjs-core' when import.meta.env.DEV === false.

Note that there might be a warning that tells the value of package.json is invalid in the editor, but you can ignore that warning. (See SchemaStore/schemastore#4340 for more details about it)

[sysmat]

it would be great to have full example