Re-add esbuild's define option

[Chen-jj]

Description

#8606 removed esbuild' define option during prebundle,and it brings problems at dynamic imports case:

if (FRAMEWORK === 'preact') {
  const options = require('preact').options
 // ...
}

For example, when user are using react, we define FRAMEWORK: react here.

In Vite2, vite' define options pass to esbuild' define too.esbuild will had dead code eliminated and everything ok:

// Vite2 output
if (false) {
  const options = null.options
}

However, after removing esbuild' define. Vite only define FRAMEWORK at runtime.During deps scanning stage, esbuild will try to bundle preact which the user had not installed because they are using react.So esbuild throws an error that preact not found.

// Vite3 output
if (FRAMEWORK === 'preact') {
  const options = require('preact').options
 // ...
}

Besides, Webpack's output:

if (false) {}

And maybe #5676 related.

Suggested solution

Pass Vite's define option to esbuild's define option.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sapphi-red]

For a workaround, setting optimizeDeps.esbuildOptions.define might work.

vite/packages/vite/src/node/optimizer/index.ts

Lines 586 to 618 in 9e9cd23

	const result = await build({
	absWorkingDir: process.cwd(),
	entryPoints: Object.keys(flatIdDeps),
	bundle: true,
	// We can't use platform 'neutral', as esbuild has custom handling
	// when the platform is 'node' or 'browser' that can't be emulated
	// by using mainFields and conditions
	platform,
	define,
	format: 'esm',
	// See https://github.com/evanw/esbuild/issues/1921#issuecomment-1152991694
	banner:
	platform === 'node'
	? {
	js: `import { createRequire } from 'module';const require = createRequire(import.meta.url);`
	}
	: undefined,
	target: isBuild ? config.build.target || undefined : ESBUILD_MODULES_TARGET,
	external,
	logLevel: 'error',
	splitting: true,
	sourcemap: true,
	outdir: processingCacheDir,
	ignoreAnnotations: !isBuild,
	metafile: true,
	plugins,
	...esbuildOptions,
	supported: {
	'dynamic-import': true,
	'import-meta': true,
	...esbuildOptions.supported
	}
	})

[sapphi-red]

Closing as this could be done by optimizeDeps.esbuildOptions.define and the underlaying issue is #3715