From 7217439c9284cac77dc03dfa78e5c984ed5f4336 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 2 Dec 2022 16:19:31 +0800
Subject: [PATCH 01/12] feat(define): handle replacement with esbuild

Co-authored-by: Tony Trinh <tony19@gmail.com>
---
 .../src/node/__tests__/plugins/define.spec.ts |  11 +-
 .../vite/src/node/plugins/clientInjections.ts |  11 +-
 packages/vite/src/node/plugins/define.ts      | 100 +++++++-----------
 playground/define/__tests__/define.spec.ts    |  60 +++++++++--
 playground/define/commonjs-dep/index.js       |   4 +-
 playground/define/index.html                  |  89 ++++++++++++++--
 playground/env/__tests__/env.spec.ts          |  26 +++++
 playground/env/index.html                     |  22 ++++
 playground/react/App.jsx                      |   2 +
 playground/react/__tests__/react.spec.ts      |   4 +
 .../react/components/DefineVariables.jsx      |   3 +
 playground/vue/DefineVariable.vue             |   3 +
 playground/vue/Main.vue                       |   4 +-
 playground/vue/__tests__/vue.spec.ts          |   6 ++
 14 files changed, 250 insertions(+), 95 deletions(-)
 create mode 100644 playground/react/components/DefineVariables.jsx
 create mode 100644 playground/vue/DefineVariable.vue

diff --git a/packages/vite/src/node/__tests__/plugins/define.spec.ts b/packages/vite/src/node/__tests__/plugins/define.spec.ts
index 932560a749f24d..18fa8787abb88a 100644
--- a/packages/vite/src/node/__tests__/plugins/define.spec.ts
+++ b/packages/vite/src/node/__tests__/plugins/define.spec.ts
@@ -10,6 +10,7 @@ async function createDefinePluginTransform(
   const config = await resolveConfig({ define }, build ? 'build' : 'serve')
   const instance = definePlugin(config)
   return async (code: string) => {
+    // @ts-expect-error
     const result = await instance.transform.call({}, code, 'foo.ts', { ssr })
     return result?.code || result
   }
@@ -20,21 +21,15 @@ describe('definePlugin', () => {
     const transform = await createDefinePluginTransform({
       __APP_VERSION__: JSON.stringify('1.0')
     })
-    expect(await transform('const version = __APP_VERSION__ ;')).toBe(
-      'const version = "1.0" ;'
-    )
     expect(await transform('const version = __APP_VERSION__;')).toBe(
-      'const version = "1.0";'
+      'const version = "1.0";\n'
     )
   })
 
   test('replaces import.meta.env.SSR with false', async () => {
     const transform = await createDefinePluginTransform()
-    expect(await transform('const isSSR = import.meta.env.SSR ;')).toBe(
-      'const isSSR = false ;'
-    )
     expect(await transform('const isSSR = import.meta.env.SSR;')).toBe(
-      'const isSSR = false;'
+      'const isSSR = false;\n'
     )
   })
 })
diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
index c4472cb8f14b62..79981c141d75d4 100644
--- a/packages/vite/src/node/plugins/clientInjections.ts
+++ b/packages/vite/src/node/plugins/clientInjections.ts
@@ -3,6 +3,7 @@ import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { CLIENT_ENTRY, ENV_ENTRY } from '../constants'
 import { isObject, normalizePath, resolveHostname } from '../utils'
+import { replaceDefine } from './define'
 
 // ids in transform are normalized to unix style
 const normalizedClientEntry = normalizePath(CLIENT_ENTRY)
@@ -64,10 +65,14 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         // replace process.env.NODE_ENV instead of defining a global
         // for it to avoid shimming a `process` object during dev,
         // avoiding inconsistencies between dev and build
-        return code.replace(
-          /\bprocess\.env\.NODE_ENV\b/g,
+        const nodeEnv =
           config.define?.['process.env.NODE_ENV'] ||
-            JSON.stringify(process.env.NODE_ENV || config.mode)
+          JSON.stringify(process.env.NODE_ENV || config.mode)
+        return await replaceDefine(
+          code,
+          id,
+          { 'process.env.NODE_ENV': nodeEnv },
+          config
         )
       }
     }
diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 8743b6d8b4e7c5..30e56a416d83a3 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -1,7 +1,6 @@
-import MagicString from 'magic-string'
+import { transform } from 'esbuild'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
-import { transformStableResult } from '../utils'
 import { isCSSRequest } from './css'
 import { isHTMLRequest } from './html'
 
@@ -13,21 +12,21 @@ export function definePlugin(config: ResolvedConfig): Plugin {
   const isBuildLib = isBuild && config.build.lib
 
   // ignore replace process.env in lib build
-  const processEnv: Record<string, string> = {}
   const processNodeEnv: Record<string, string> = {}
+  const processEnv: Record<string, string> = {}
   if (!isBuildLib) {
     const nodeEnv = process.env.NODE_ENV || config.mode
-    Object.assign(processEnv, {
-      'process.env.': `({}).`,
-      'global.process.env.': `({}).`,
-      'globalThis.process.env.': `({}).`
-    })
     Object.assign(processNodeEnv, {
       'process.env.NODE_ENV': JSON.stringify(nodeEnv),
       'global.process.env.NODE_ENV': JSON.stringify(nodeEnv),
       'globalThis.process.env.NODE_ENV': JSON.stringify(nodeEnv),
       __vite_process_env_NODE_ENV: JSON.stringify(nodeEnv)
     })
+    Object.assign(processEnv, {
+      'process.env': `{}`,
+      'global.process.env': `{}`,
+      'globalThis.process.env': `{}`
+    })
   }
 
   const userDefine: Record<string, string> = {}
@@ -49,15 +48,12 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       importMetaKeys[`import.meta.env.${key}`] = JSON.stringify(env[key])
     }
     Object.assign(importMetaFallbackKeys, {
-      'import.meta.env.': `({}).`,
       'import.meta.env': JSON.stringify(config.env),
       'import.meta.hot': `false`
     })
   }
 
-  function generatePattern(
-    ssr: boolean
-  ): [Record<string, string | undefined>, RegExp | null] {
+  function generatePattern(ssr: boolean) {
     const replaceProcessEnv = !ssr || config.ssr?.target === 'webworker'
 
     const replacements: Record<string, string> = {
@@ -72,38 +68,20 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       replacements['__vite_process_env_NODE_ENV'] = 'process.env.NODE_ENV'
     }
 
-    const replacementsKeys = Object.keys(replacements)
-    const pattern = replacementsKeys.length
-      ? new RegExp(
-          // Mustn't be preceded by a char that can be part of an identifier
-          // or a '.' that isn't part of a spread operator
-          '(?<![\\p{L}\\p{N}_$]|(?<!\\.\\.)\\.)(' +
-            replacementsKeys
-              .map((str) => {
-                return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&')
-              })
-              .join('|') +
-            // Mustn't be followed by a char that can be part of an identifier
-            // or an assignment (but allow equality operators)
-            ')(?:(?<=\\.)|(?![\\p{L}\\p{N}_$]|\\s*?=[^=]))',
-          'gu'
-        )
-      : null
-
-    return [replacements, pattern]
+    return Object.keys(replacements).length ? replacements : null
   }
 
-  const defaultPattern = generatePattern(false)
-  const ssrPattern = generatePattern(true)
+  const defaultReplacements = generatePattern(false)
+  const ssrReplacements = generatePattern(true)
 
   return {
     name: 'vite:define',
 
-    transform(code, id, options) {
+    async transform(code, id, options) {
       const ssr = options?.ssr === true
       if (!ssr && !isBuild) {
         // for dev we inject actual global defines in the vite client to
-        // avoid the transform cost.
+        // avoid the transform cost. see the clientInjection plugin.
         return
       }
 
@@ -117,36 +95,30 @@ export function definePlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      const [replacements, pattern] = ssr ? ssrPattern : defaultPattern
-
-      if (!pattern) {
-        return null
-      }
-
-      if (ssr && !isBuild) {
-        // ssr + dev, simple replace
-        return code.replace(pattern, (_, match) => {
-          return '' + replacements[match]
-        })
-      }
+      const replacements = ssr ? ssrReplacements : defaultReplacements
+      if (!replacements) return
 
-      const s = new MagicString(code)
-      let hasReplaced = false
-      let match: RegExpExecArray | null
-
-      while ((match = pattern.exec(code))) {
-        hasReplaced = true
-        const start = match.index
-        const end = start + match[0].length
-        const replacement = '' + replacements[match[1]]
-        s.update(start, end, replacement)
-      }
-
-      if (!hasReplaced) {
-        return null
-      }
-
-      return transformStableResult(s, id, config)
+      return await replaceDefine(code, id, replacements, config)
     }
   }
 }
+
+export async function replaceDefine(
+  code: string,
+  id: string,
+  replacements: Record<string, string>,
+  config: ResolvedConfig
+): Promise<{ code: string; map: string | null }> {
+  const result = await transform(code, {
+    loader: 'js',
+    charset: 'utf8',
+    platform: 'neutral',
+    define: replacements,
+    sourcefile: id,
+    sourcemap: config.command === 'build' && !!config.build.sourcemap
+  })
+  return {
+    code: result.code,
+    map: result.map || null
+  }
+}
diff --git a/playground/define/__tests__/define.spec.ts b/playground/define/__tests__/define.spec.ts
index 8c27686bce1703..43e260715b5192 100644
--- a/playground/define/__tests__/define.spec.ts
+++ b/playground/define/__tests__/define.spec.ts
@@ -1,10 +1,10 @@
 import { expect, test } from 'vitest'
 import viteConfig from '../vite.config'
-import { isBuild, page } from '~utils'
+import { page } from '~utils'
 
-test('string', async () => {
-  const defines = viteConfig.define
+const defines = viteConfig.define
 
+test('string', async () => {
   expect(await page.textContent('.exp')).toBe(
     String(typeof eval(defines.__EXP__))
   )
@@ -44,10 +44,52 @@ test('string', async () => {
   expect(await page.textContent('.define-in-dep')).toBe(
     defines.__STRINGIFIED_OBJ__
   )
-  expect(await page.textContent('.import-meta-env-undefined')).toBe(
-    isBuild ? '({}).UNDEFINED' : 'import.meta.env.UNDEFINED'
-  )
-  expect(await page.textContent('.process-env-undefined')).toBe(
-    isBuild ? '({}).UNDEFINED' : 'process.env.UNDEFINED'
-  )
+})
+
+test('ignores constants in string literals', async () => {
+  expect(
+    await page.textContent('.ignores-string-literals .process-env-dot')
+  ).toBe('process.env.')
+  expect(
+    await page.textContent('.ignores-string-literals .global-process-env-dot')
+  ).toBe('global.process.env.')
+  expect(
+    await page.textContent(
+      '.ignores-string-literals .globalThis-process-env-dot'
+    )
+  ).toBe('globalThis.process.env.')
+  expect(
+    await page.textContent('.ignores-string-literals .process-env-NODE_ENV')
+  ).toBe('process.env.NODE_ENV')
+  expect(
+    await page.textContent(
+      '.ignores-string-literals .global-process-env-NODE_ENV'
+    )
+  ).toBe('global.process.env.NODE_ENV')
+  expect(
+    await page.textContent(
+      '.ignores-string-literals .globalThis-process-env-NODE_ENV'
+    )
+  ).toBe('globalThis.process.env.NODE_ENV')
+  expect(
+    await page.textContent(
+      '.ignores-string-literals .__vite_process_env_NODE_ENV'
+    )
+  ).toBe('__vite_process_env_NODE_ENV')
+  expect(
+    await page.textContent('.ignores-string-literals .import-meta-hot')
+  ).toBe('import' + '.meta.hot')
+})
+
+test('replaces constants in template literal expressions', async () => {
+  expect(
+    await page.textContent(
+      '.replaces-constants-in-template-literal-expressions .process-env-dot'
+    )
+  ).toBe(JSON.parse(defines['process.env.SOMEVAR']))
+  expect(
+    await page.textContent(
+      '.replaces-constants-in-template-literal-expressions .process-env-NODE_ENV'
+    )
+  ).toBe('dev')
 })
diff --git a/playground/define/commonjs-dep/index.js b/playground/define/commonjs-dep/index.js
index 9be5641e04b844..de1a3e360119a3 100644
--- a/playground/define/commonjs-dep/index.js
+++ b/playground/define/commonjs-dep/index.js
@@ -1,5 +1,3 @@
 module.exports = {
-  defined: __STRINGIFIED_OBJ__,
-  importMetaEnvUndefined: 'import.meta.env.UNDEFINED',
-  processEnvUndefined: 'process.env.UNDEFINED'
+  defined: __STRINGIFIED_OBJ__
 }
diff --git a/playground/define/index.html b/playground/define/index.html
index 06b2f4f9479d38..6491b0d6d56990 100644
--- a/playground/define/index.html
+++ b/playground/define/index.html
@@ -1,3 +1,5 @@
+<meta charset="utf-8" />
+
 <h1>Define</h1>
 
 <p>Raw Expression <code class="exp"></code></p>
@@ -17,10 +19,52 @@ <h1>Define</h1>
 <p>define variable in html: <code class="exp-define">__EXP__</code></p>
 <p>import json: <code class="import-json"></code></p>
 <p>define in dep: <code class="define-in-dep"></code></p>
-<p>
-  import.meta.env.UNDEFINED: <code class="import-meta-env-undefined"></code>
-</p>
-<p>process.env.UNDEFINED: <code class="process-env-undefined"></code></p>
+
+<h2>Define ignores string literals</h2>
+<section class="ignores-string-literals">
+  <p>process.env. <code class="process-env-dot"></code></p>
+  <p>global.process.env. <code class="global-process-env-dot"></code></p>
+  <p>
+    globalThis.process.env. <code class="globalThis-process-env-dot"></code>
+  </p>
+  <p>process.env.NODE_ENV <code class="process-env-NODE_ENV"></code></p>
+  <p>
+    global.process.env.NODE_ENV
+    <code class="global-process-env-NODE_ENV"></code>
+  </p>
+  <p>
+    globalThis.process.env.NODE_ENV
+    <code class="globalThis-process-env-NODE_ENV"></code>
+  </p>
+  <p>
+    __vite_process_env_NODE_ENV
+    <code class="__vite_process_env_NODE_ENV"></code>
+  </p>
+  <p>import.meta.hot <code class="import-meta-hot"></code></p>
+</section>
+
+<h2>Define replaces constants in template literal expressions</h2>
+<section class="replaces-constants-in-template-literal-expressions">
+  <p>process.env. <code class="process-env-dot"></code></p>
+  <p>global.process.env. <code class="global-process-env-dot"></code></p>
+  <p>
+    globalThis.process.env. <code class="globalThis-process-env-dot"></code>
+  </p>
+  <p>process.env.NODE_ENV <code class="process-env-NODE_ENV"></code></p>
+  <p>
+    global.process.env.NODE_ENV
+    <code class="global-process-env-NODE_ENV"></code>
+  </p>
+  <p>
+    globalThis.process.env.NODE_ENV
+    <code class="globalThis-process-env-NODE_ENV"></code>
+  </p>
+  <p>
+    __vite_process_env_NODE_ENV
+    <code class="__vite_process_env_NODE_ENV"></code>
+  </p>
+  <p>import.meta.hot <code class="import-meta-hot"></code></p>
+</section>
 
 <script type="module">
   const __VAR_NAME__ = true // ensure define doesn't replace var name
@@ -56,10 +100,41 @@ <h1>Define</h1>
     document.querySelector(el).textContent = text
   }
 
-  import { defined, importMetaEnvUndefined, processEnvUndefined } from 'dep'
+  import { defined } from 'dep'
   text('.define-in-dep', JSON.stringify(defined))
-  text('.import-meta-env-undefined', importMetaEnvUndefined)
-  text('.process-env-undefined', processEnvUndefined)
+
+  text('.ignores-string-literals .process-env-dot', 'process.env.')
+  text(
+    '.ignores-string-literals .global-process-env-dot',
+    'global.process.env.'
+  )
+  text(
+    '.ignores-string-literals .globalThis-process-env-dot',
+    'globalThis.process.env.'
+  )
+  text('.ignores-string-literals .process-env-NODE_ENV', 'process.env.NODE_ENV')
+  text(
+    '.ignores-string-literals .global-process-env-NODE_ENV',
+    'global.process.env.NODE_ENV'
+  )
+  text(
+    '.ignores-string-literals .globalThis-process-env-NODE_ENV',
+    'globalThis.process.env.NODE_ENV'
+  )
+  text(
+    '.ignores-string-literals .__vite_process_env_NODE_ENV',
+    '__vite_process_env_NODE_ENV'
+  )
+  text('.ignores-string-literals .import-meta-hot', 'import.meta.hot')
+
+  text(
+    '.replaces-constants-in-template-literal-expressions .process-env-dot',
+    `${process.env.SOMEVAR}`
+  )
+  text(
+    '.replaces-constants-in-template-literal-expressions .process-env-NODE_ENV',
+    `${process.env.NODE_ENV}`
+  )
 </script>
 
 <style>
diff --git a/playground/env/__tests__/env.spec.ts b/playground/env/__tests__/env.spec.ts
index ee05fff1d3736c..e8b60e7e8bda18 100644
--- a/playground/env/__tests__/env.spec.ts
+++ b/playground/env/__tests__/env.spec.ts
@@ -23,6 +23,10 @@ test('custom', async () => {
   expect(await page.textContent('.custom')).toBe('1')
 })
 
+test('custom in template literal expression', async () => {
+  expect(await page.textContent('.custom-template-literal-exp')).toBe('1')
+})
+
 test('custom-prefix', async () => {
   expect(await page.textContent('.custom-prefix')).toBe('1')
 })
@@ -62,8 +66,30 @@ test('env object', async () => {
   })
 })
 
+test('env object in template literal expression', async () => {
+  const envText = await page.textContent('.env-object-in-template-literal-exp')
+  expect(JSON.parse(envText)).toMatchObject({
+    VITE_EFFECTIVE_MODE_FILE_NAME: `.env.${mode}`,
+    CUSTOM_PREFIX_ENV_VARIABLE: '1',
+    VITE_CUSTOM_ENV_VARIABLE: '1',
+    BASE_URL: '/env/',
+    MODE: mode,
+    DEV: !isBuild,
+    PROD: isBuild
+  })
+})
+
 if (!isBuild) {
   test('relative url import script return import.meta.url', async () => {
     expect(await page.textContent('.url')).toMatch('/env/index.js')
   })
 }
+
+test('ignores import' + '.meta.env in string literals', async () => {
+  expect(await page.textContent('.ignores-literal-import-meta-env-dot')).toBe(
+    'import' + '.meta.env.'
+  )
+  expect(await page.textContent('.ignores-literal-import-meta-env')).toBe(
+    'import' + '.meta.env'
+  )
+})
diff --git a/playground/env/index.html b/playground/env/index.html
index 6ccfd421945418..416dd32e217ce0 100644
--- a/playground/env/index.html
+++ b/playground/env/index.html
@@ -4,6 +4,10 @@ <h1>Environment Variables</h1>
 <p>import.meta.env.DEV: <code class="dev"></code></p>
 <p>import.meta.env.PROD: <code class="prod"></code></p>
 <p>import.meta.env.VITE_CUSTOM_ENV_VARIABLE: <code class="custom"></code></p>
+<p>
+  ${import.meta.env.VITE_CUSTOM_ENV_VARIABLE}:
+  <code class="custom-template-literal-exp"></code>
+</p>
 <p>
   import.meta.env.CUSTOM_PREFIX_ENV_VARIABLE:
   <code class="custom-prefix"></code>
@@ -16,7 +20,15 @@ <h1>Environment Variables</h1>
 <p>process.env.NODE_ENV: <code class="node-env"></code></p>
 <p>import.meta.env.VITE_EXPAND: <code class="expand"></code></p>
 <p>import.meta.env: <span class="pre env-object"></span></p>
+<p>
+  ${import.meta.env}:
+  <span class="pre env-object-in-template-literal-exp"></span>
+</p>
 <p>import.meta.url: <span class="pre url"></span></p>
+<p>
+  import.meta.env. <code class="ignores-literal-import-meta-env-dot"></code>
+</p>
+<p>import.meta.env <code class="ignores-literal-import-meta-env"></code></p>
 
 <script type="module">
   text('.base', import.meta.env.BASE_URL)
@@ -24,12 +36,22 @@ <h1>Environment Variables</h1>
   text('.dev', import.meta.env.DEV)
   text('.prod', import.meta.env.PROD)
   text('.custom', import.meta.env.VITE_CUSTOM_ENV_VARIABLE)
+  text(
+    '.custom-template-literal-exp',
+    `${import.meta.env.VITE_CUSTOM_ENV_VARIABLE}`
+  )
   text('.custom-prefix', import.meta.env.CUSTOM_PREFIX_ENV_VARIABLE)
   text('.mode-file', import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME)
   text('.inline', import.meta.env.VITE_INLINE)
   text('.bool', typeof import.meta.env.VITE_BOOL)
   text('.node-env', process.env.NODE_ENV)
   text('.env-object', JSON.stringify(import.meta.env, null, 2))
+  text(
+    '.env-object-in-template-literal-exp',
+    `${JSON.stringify(import.meta.env, null, 2)}`
+  )
+  text('.ignores-literal-import-meta-env-dot', 'import' + '.meta.env.')
+  text('.ignores-literal-import-meta-env', 'import' + '.meta.env')
   text('.expand', import.meta.env.VITE_EXPAND)
 
   function text(el, text) {
diff --git a/playground/react/App.jsx b/playground/react/App.jsx
index 83f4cc07ea4a07..82d2f70f8754ba 100644
--- a/playground/react/App.jsx
+++ b/playground/react/App.jsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import Button from 'jsx-entry'
+import DefineVariable from './components/DefineVariables'
 import Dummy from './components/Dummy?qs-should-not-break-plugin-react'
 import Parent from './hmr/parent'
 import { CountProvider } from './context/CountProvider'
@@ -35,6 +36,7 @@ function App() {
         </a>
       </header>
 
+      <DefineVariable />
       <Dummy />
       <Parent />
       <Button>button</Button>
diff --git a/playground/react/__tests__/react.spec.ts b/playground/react/__tests__/react.spec.ts
index 26eb59b5d79b7e..1a27574d95f13d 100644
--- a/playground/react/__tests__/react.spec.ts
+++ b/playground/react/__tests__/react.spec.ts
@@ -45,6 +45,10 @@ test.runIf(isServe)(
   }
 )
 
+test('defined/reserved words are preserved in string literals', async () => {
+  expect(await page.textContent('.define-variable')).toBe('import.meta.env')
+})
+
 if (!isBuild) {
   // #9869
   test('should only hmr files with exported react components', async () => {
diff --git a/playground/react/components/DefineVariables.jsx b/playground/react/components/DefineVariables.jsx
new file mode 100644
index 00000000000000..465baf04d0adbb
--- /dev/null
+++ b/playground/react/components/DefineVariables.jsx
@@ -0,0 +1,3 @@
+export default function DefineVariable() {
+  return <div class="define-variable">import.meta.env</div>
+}
diff --git a/playground/vue/DefineVariable.vue b/playground/vue/DefineVariable.vue
new file mode 100644
index 00000000000000..aa57b934362bc5
--- /dev/null
+++ b/playground/vue/DefineVariable.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="define-variable">import.meta.env</div>
+</template>
diff --git a/playground/vue/Main.vue b/playground/vue/Main.vue
index b91d50f9287a31..53392354ca57fd 100644
--- a/playground/vue/Main.vue
+++ b/playground/vue/Main.vue
@@ -26,6 +26,7 @@
   <SetupImportTemplate />
   <WorkerTest />
   <Url />
+  <DefineVariable />
 </template>
 
 <script setup lang="ts">
@@ -44,8 +45,9 @@ import AsyncComponent from './AsyncComponent.vue'
 import ReactivityTransform from './ReactivityTransform.vue'
 import SetupImportTemplate from './setup-import-template/SetupImportTemplate.vue'
 import WorkerTest from './worker.vue'
-import { ref } from 'vue'
 import Url from './Url.vue'
+import DefineVariable from './DefineVariable.vue'
+import { ref } from 'vue'
 
 const time = ref('loading...')
 
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index feaeb42b8f7a6c..1fa3d45977e9e2 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -279,3 +279,9 @@ describe('import with ?url', () => {
     )
   })
 })
+
+describe('defined/reserved words', () => {
+  test('are preserved in string literals', async () => {
+    expect(await page.textContent('.define-variable')).toBe('import.meta.env')
+  })
+})

From 8d00673bdccdb9eec248f68bf790798f1d7e018e Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 2 Dec 2022 16:26:34 +0800
Subject: [PATCH 02/12] docs: update define

---
 docs/config/shared-options.md | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md
index 671ef6be8f9924..24dc5c99116acc 100644
--- a/docs/config/shared-options.md
+++ b/docs/config/shared-options.md
@@ -37,17 +37,7 @@ See [Env Variables and Modes](/guide/env-and-mode) for more details.
 
 Define global constant replacements. Entries will be defined as globals during dev and statically replaced during build.
 
-- Starting from `2.0.0-beta.70`, string values will be used as raw expressions, so if defining a string constant, it needs to be explicitly quoted (e.g. with `JSON.stringify`).
-
-- To be consistent with [esbuild behavior](https://esbuild.github.io/api/#define), expressions must either be a JSON object (null, boolean, number, string, array, or object) or a single identifier.
-
-- Replacements are performed only when the match isn't surrounded by other letters, numbers, `_` or `$`.
-
-::: warning
-Because it's implemented as straightforward text replacements without any syntax analysis, we recommend using `define` for CONSTANTS only.
-
-For example, `process.env.FOO` and `__APP_VERSION__` are good fits. But `process` or `global` should not be put into this option. Variables can be shimmed or polyfilled instead.
-:::
+Vite uses [esbuild defines](https://esbuild.github.io/api/#define) to perform replacements, so value expressions must either be a JSON object (null, boolean, number, string, array, or object) or a single identifier. For example, if defining a string constant, it needs to be explicitly quoted with `JSON.stringify`.
 
 ::: tip NOTE
 For TypeScript users, make sure to add the type declarations in the `env.d.ts` or `vite-env.d.ts` file to get type checks and Intellisense.

From 3724ce566004b79eefdbac7550318956f7399aa3 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 6 Jan 2023 11:30:38 +0800
Subject: [PATCH 03/12] chore: fix test

---
 packages/vite/src/node/__tests__/plugins/define.spec.ts | 2 +-
 playground/define/commonjs-dep/index.js                 | 2 +-
 playground/define/index.html                            | 2 +-
 playground/env/index.html                               | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/vite/src/node/__tests__/plugins/define.spec.ts b/packages/vite/src/node/__tests__/plugins/define.spec.ts
index 60e8053414565f..aaa1d00e37a3f1 100644
--- a/packages/vite/src/node/__tests__/plugins/define.spec.ts
+++ b/packages/vite/src/node/__tests__/plugins/define.spec.ts
@@ -22,7 +22,7 @@ describe('definePlugin', () => {
       __APP_VERSION__: JSON.stringify('1.0'),
     })
     expect(await transform('const version = __APP_VERSION__ ;')).toBe(
-      'const version = "1.0" ;',
+      'const version = "1.0";\n',
     )
     expect(await transform('const version = __APP_VERSION__;')).toBe(
       'const version = "1.0";\n',
diff --git a/playground/define/commonjs-dep/index.js b/playground/define/commonjs-dep/index.js
index de1a3e360119a3..3525efcea4c5bf 100644
--- a/playground/define/commonjs-dep/index.js
+++ b/playground/define/commonjs-dep/index.js
@@ -1,3 +1,3 @@
 module.exports = {
-  defined: __STRINGIFIED_OBJ__
+  defined: __STRINGIFIED_OBJ__,
 }
diff --git a/playground/define/index.html b/playground/define/index.html
index 9aa45f519cf7ef..0c72eb84d70e13 100644
--- a/playground/define/index.html
+++ b/playground/define/index.html
@@ -100,7 +100,7 @@ <h2>Define replaces constants in template literal expressions</h2>
     document.querySelector(el).textContent = text
   }
 
-  import { defined } from 'dep'
+  import { defined } from '@vitejs/test-commonjs-dep'
   text('.define-in-dep', JSON.stringify(defined))
 
   text('.ignores-string-literals .process-env-dot', 'process.env.')
diff --git a/playground/env/index.html b/playground/env/index.html
index 416dd32e217ce0..5c8579ff338b3d 100644
--- a/playground/env/index.html
+++ b/playground/env/index.html
@@ -38,7 +38,7 @@ <h1>Environment Variables</h1>
   text('.custom', import.meta.env.VITE_CUSTOM_ENV_VARIABLE)
   text(
     '.custom-template-literal-exp',
-    `${import.meta.env.VITE_CUSTOM_ENV_VARIABLE}`
+    `${import.meta.env.VITE_CUSTOM_ENV_VARIABLE}`,
   )
   text('.custom-prefix', import.meta.env.CUSTOM_PREFIX_ENV_VARIABLE)
   text('.mode-file', import.meta.env.VITE_EFFECTIVE_MODE_FILE_NAME)
@@ -48,7 +48,7 @@ <h1>Environment Variables</h1>
   text('.env-object', JSON.stringify(import.meta.env, null, 2))
   text(
     '.env-object-in-template-literal-exp',
-    `${JSON.stringify(import.meta.env, null, 2)}`
+    `${JSON.stringify(import.meta.env, null, 2)}`,
   )
   text('.ignores-literal-import-meta-env-dot', 'import' + '.meta.env.')
   text('.ignores-literal-import-meta-env', 'import' + '.meta.env')

From dc1e95c4a96283d420a47fe320c4bd9ac98e33e9 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Thu, 12 Oct 2023 20:42:33 +0800
Subject: [PATCH 04/12] feat: fix everything

---
 docs/config/shared-options.md                 |  27 ++-
 docs/guide/migration.md                       |  27 +++
 .../src/node/__tests__/plugins/define.spec.ts |   9 +-
 .../vite/src/node/plugins/clientInjections.ts |  22 +--
 packages/vite/src/node/plugins/define.ts      | 156 +++++++++++-------
 .../vite/src/node/plugins/importAnalysis.ts   |  26 +--
 packages/vite/src/node/utils.ts               |   4 +-
 playground/html/__tests__/html.spec.ts        |   3 -
 playground/html/env.html                      |   1 -
 playground/html/vite.config.js                |   1 -
 .../__tests__/js-sourcemap.spec.ts            |   2 +-
 11 files changed, 171 insertions(+), 107 deletions(-)

diff --git a/docs/config/shared-options.md b/docs/config/shared-options.md
index c9bf5a3f4fe84a..872f6d99022fd2 100644
--- a/docs/config/shared-options.md
+++ b/docs/config/shared-options.md
@@ -37,7 +37,18 @@ See [Env Variables and Modes](/guide/env-and-mode) for more details.
 
 Define global constant replacements. Entries will be defined as globals during dev and statically replaced during build.
 
-Vite uses [esbuild defines](https://esbuild.github.io/api/#define) to perform replacements, so value expressions must either be a JSON object (null, boolean, number, string, array, or object) or a single identifier. For example, if defining a string constant, it needs to be explicitly quoted with `JSON.stringify`.
+Vite uses [esbuild defines](https://esbuild.github.io/api/#define) to perform replacements, so value expressions must be a string that contains a JSON-serializable value (null, boolean, number, string, array, or object) or a single identifier. For non-string values, Vite will automatically convert it to a string with `JSON.stringify`.
+
+**Example:**
+
+```js
+export default defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify('v1.0.0'),
+    __API_URL__: 'window.__backend_api_url',
+  },
+})
+```
 
 ::: tip NOTE
 For TypeScript users, make sure to add the type declarations in the `env.d.ts` or `vite-env.d.ts` file to get type checks and Intellisense.
@@ -51,20 +62,6 @@ declare const __APP_VERSION__: string
 
 :::
 
-::: tip NOTE
-Since dev and build implement `define` differently, we should avoid some use cases to avoid inconsistency.
-
-Example:
-
-```js
-const obj = {
-  __NAME__, // Don't define object shorthand property names
-  __KEY__: value, // Don't define object key
-}
-```
-
-:::
-
 ## plugins
 
 - **Type:** `(Plugin | Plugin[] | Promise<Plugin | Plugin[]>)[]`
diff --git a/docs/guide/migration.md b/docs/guide/migration.md
index 76bdff63967f57..65c108d1659de6 100644
--- a/docs/guide/migration.md
+++ b/docs/guide/migration.md
@@ -21,6 +21,33 @@ For other projects, there are a few general approaches:
 
 See the [troubleshooting guide](https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated) for more information.
 
+## Rework `define` and `import.meta.env.*` replacement strategy
+
+In Vite 4, the `define` and `import.meta.env.*` features use different replacement strategies in dev and build:
+
+- In dev, both features are injected as global variables to `globalThis` and `import.meta` respectively.
+- In build, both features are statically replaced with a regex.
+
+This results in a dev and build inconsistency when trying to access the variables, and sometimes even caused failed builds. For example:
+
+```js
+const data = { __APP_VERSION__ }
+// dev: { __APP_VERSION__: "1.0.0" } ✅
+// build: { __APP_VERSION__: undefined } ❌
+
+const docs = 'I like import.meta.env'
+// dev: "I like import.meta.env" ✅
+// build: "I like ({ ... })" ❌
+```
+
+Vite 5 fixes this by using `esbuild` to handle the replacements in builds, aligning with the dev behaviour.
+
+This change should not affect most setups, as it's already documented that `define` values should follow esbuild's syntax:
+
+> To be consistent with esbuild behavior, expressions must either be a JSON object (null, boolean, number, string, array, or object) or a single identifier.
+
+However, if you prefer to keep statically replacing values directly, you can use [`@rollup/plugin-replace`](https://github.com/rollup/plugins/tree/master/packages/replace).
+
 ## General Changes
 
 ### Allow path containing `.` to fallback to index.html
diff --git a/packages/vite/src/node/__tests__/plugins/define.spec.ts b/packages/vite/src/node/__tests__/plugins/define.spec.ts
index 905f376ac79509..783f85909ac11f 100644
--- a/packages/vite/src/node/__tests__/plugins/define.spec.ts
+++ b/packages/vite/src/node/__tests__/plugins/define.spec.ts
@@ -7,7 +7,10 @@ async function createDefinePluginTransform(
   build = true,
   ssr = false,
 ) {
-  const config = await resolveConfig({ define }, build ? 'build' : 'serve')
+  const config = await resolveConfig(
+    { configFile: false, define },
+    build ? 'build' : 'serve',
+  )
   const instance = definePlugin(config)
   return async (code: string) => {
     // @ts-expect-error transform should exist
@@ -40,14 +43,14 @@ describe('definePlugin', () => {
     // assert that the default behavior is to replace import.meta.hot with undefined
     const transform = await createDefinePluginTransform()
     expect(await transform('const hot = import.meta.hot;')).toBe(
-      'const hot = undefined;',
+      'const hot = void 0;\n',
     )
     // assert that we can specify a user define to preserve import.meta.hot
     const overrideTransform = await createDefinePluginTransform({
       'import.meta.hot': 'import.meta.hot',
     })
     expect(await overrideTransform('const hot = import.meta.hot;')).toBe(
-      'const hot = import.meta.hot;',
+      'const hot = import.meta.hot;\n',
     )
   })
 })
diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
index 6d2ad5185d2dba..c66f3877eca822 100644
--- a/packages/vite/src/node/plugins/clientInjections.ts
+++ b/packages/vite/src/node/plugins/clientInjections.ts
@@ -3,7 +3,7 @@ import type { Plugin } from '../plugin'
 import type { ResolvedConfig } from '../config'
 import { CLIENT_ENTRY, ENV_ENTRY } from '../constants'
 import { isObject, normalizePath, resolveHostname } from '../utils'
-import { replaceDefine } from './define'
+import { replaceDefine, serializeDefine } from './define'
 
 // ids in transform are normalized to unix style
 const normalizedClientEntry = normalizePath(CLIENT_ENTRY)
@@ -51,7 +51,14 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
         hmrBase = path.posix.join(hmrBase, hmrConfig.path)
       }
 
-      const serializedDefines = serializeDefine(config.define || {})
+      const userDefine: Record<string, any> = {}
+      for (const key in config.define) {
+        // import.meta.env.* is handled in `importAnalysis` plugin
+        if (!key.startsWith('import.meta.env.')) {
+          userDefine[key] = config.define[key]
+        }
+      }
+      const serializedDefines = serializeDefine(userDefine)
 
       const modeReplacement = escapeReplacement(config.mode)
       const baseReplacement = escapeReplacement(devBase)
@@ -111,14 +118,3 @@ function escapeReplacement(value: string | number | boolean | null) {
   const jsonValue = JSON.stringify(value)
   return () => jsonValue
 }
-
-function serializeDefine(define: Record<string, any>): string {
-  let res = `{`
-  for (const key in define) {
-    const val = define[key]
-    res += `${JSON.stringify(key)}: ${
-      typeof val === 'string' ? `(${val})` : JSON.stringify(val)
-    }, `
-  }
-  return res + `}`
-}
diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 44bd6185147164..cb05e34fdbd5f3 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -1,11 +1,11 @@
 import { transform } from 'esbuild'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
+import { getHash } from '../utils'
 import { isCSSRequest } from './css'
 import { isHTMLRequest } from './html'
 
 const nonJsRe = /\.json(?:$|\?)/
-const metaEnvRe = /import\.meta\.env\.(.+)/
 const isNonJsRequest = (request: string): boolean => nonJsRe.test(request)
 
 export function definePlugin(config: ResolvedConfig): Plugin {
@@ -21,91 +21,83 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       'process.env.NODE_ENV': JSON.stringify(nodeEnv),
       'global.process.env.NODE_ENV': JSON.stringify(nodeEnv),
       'globalThis.process.env.NODE_ENV': JSON.stringify(nodeEnv),
-      __vite_process_env_NODE_ENV: JSON.stringify(nodeEnv),
     })
     Object.assign(processEnv, {
       'process.env': `{}`,
       'global.process.env': `{}`,
       'globalThis.process.env': `{}`,
+      __vite_process_env_NODE_ENV: JSON.stringify(nodeEnv),
     })
   }
 
-  const userDefine: Record<string, string> = {}
-  const userDefineEnv: Record<string, string> = {}
-  for (const key in config.define) {
-    const val = config.define[key]
-    userDefine[key] = typeof val === 'string' ? val : JSON.stringify(val)
-
-    // make sure `import.meta.env` object has user define properties
-    if (isBuild) {
-      const match = key.match(metaEnvRe)
-      if (match) {
-        userDefineEnv[match[1]] = `__vite__define__${key}__define__vite__`
-      }
-    }
-  }
-
   // during dev, import.meta properties are handled by importAnalysis plugin.
   const importMetaKeys: Record<string, string> = {}
+  const importMetaEnvKeys: Record<string, string> = {}
   const importMetaFallbackKeys: Record<string, string> = {}
   if (isBuild) {
-    // set here to allow override with config.define
     importMetaKeys['import.meta.hot'] = `undefined`
     for (const key in config.env) {
-      importMetaKeys[`import.meta.env.${key}`] = JSON.stringify(config.env[key])
+      const val = JSON.stringify(config.env[key])
+      importMetaKeys[`import.meta.env.${key}`] = val
+      importMetaEnvKeys[key] = val
     }
-    Object.assign(importMetaFallbackKeys, {
-      'import.meta.env.': `({}).`,
-      'import.meta.env': JSON.stringify({
-        ...config.env,
-        SSR: '__vite__ssr__',
-        ...userDefineEnv,
-      }).replace(
-        /"__vite__define__(.+?)__define__vite__"/g,
-        (_, key) => userDefine[key],
-      ),
-    })
+    // these will be set to a proper value in `generatePattern`
+    importMetaKeys['import.meta.env.SSR'] = `undefined`
+    importMetaFallbackKeys['import.meta.env'] = `undefined`
   }
 
-  function getImportMetaKeys(ssr: boolean): Record<string, string> {
-    if (!isBuild) return {}
-    return {
-      ...importMetaKeys,
-      'import.meta.env.SSR': ssr + '',
+  const userDefine: Record<string, string> = {}
+  const userDefineEnv: Record<string, any> = {}
+  for (const key in config.define) {
+    // user can define keys with the same values to declare that some keys
+    // should not be replaced. in this case, we delete references of the key
+    // so they aren't replaced in the first place.
+    const val = config.define[key]
+    if (key === val) {
+      delete processNodeEnv[key]
+      delete importMetaKeys[key]
+      continue
     }
-  }
 
-  function getImportMetaFallbackKeys(ssr: boolean): Record<string, string> {
-    if (!isBuild) return {}
-    return {
-      ...importMetaFallbackKeys,
-      'import.meta.env': importMetaFallbackKeys['import.meta.env'].replace(
-        '"__vite__ssr__"',
-        ssr + '',
-      ),
+    userDefine[key] = handleDefineValue(config.define[key])
+
+    // make sure `import.meta.env` object has user define properties
+    if (isBuild && key.startsWith('import.meta.env.')) {
+      userDefineEnv[key.slice(16)] = config.define[key]
     }
   }
 
-  function generatePattern(ssr: boolean) {
+  function generateDefine(ssr: boolean) {
     const replaceProcessEnv = !ssr || config.ssr?.target === 'webworker'
 
-    const replacements: Record<string, string> = {
+    const define: Record<string, string> = {
       ...(replaceProcessEnv ? processNodeEnv : {}),
-      ...getImportMetaKeys(ssr),
+      ...importMetaKeys,
       ...userDefine,
-      ...getImportMetaFallbackKeys(ssr),
+      ...importMetaFallbackKeys,
       ...(replaceProcessEnv ? processEnv : {}),
     }
 
+    // Additional define fixes based on `ssr` value
     if (isBuild && !replaceProcessEnv) {
-      replacements['__vite_process_env_NODE_ENV'] = 'process.env.NODE_ENV'
+      define['__vite_process_env_NODE_ENV'] = 'process.env.NODE_ENV'
+    }
+    if ('import.meta.env.SSR' in define) {
+      define['import.meta.env.SSR'] = ssr + ''
+    }
+    if ('import.meta.env' in define) {
+      define['import.meta.env'] = serializeDefine({
+        ...importMetaEnvKeys,
+        SSR: ssr + '',
+        ...userDefineEnv,
+      })
     }
 
-    return Object.keys(replacements).length ? replacements : null
+    return Object.keys(define).length ? define : null
   }
 
-  const defaultReplacements = generatePattern(false)
-  const ssrReplacements = generatePattern(true)
+  const clientDefine = generateDefine(false)
+  const ssrDefine = generateDefine(true)
 
   return {
     name: 'vite:define',
@@ -128,10 +120,10 @@ export function definePlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      const replacements = ssr ? ssrReplacements : defaultReplacements
-      if (!replacements) return
+      const define = ssr ? ssrDefine : clientDefine
+      if (!define) return
 
-      return await replaceDefine(code, id, replacements, config)
+      return await replaceDefine(code, id, define, config)
     },
   }
 }
@@ -139,19 +131,69 @@ export function definePlugin(config: ResolvedConfig): Plugin {
 export async function replaceDefine(
   code: string,
   id: string,
-  replacements: Record<string, string>,
+  define: Record<string, string>,
   config: ResolvedConfig,
 ): Promise<{ code: string; map: string | null }> {
+  // Because esbuild only allows JSON-serializable values, and `import.meta.env`
+  // may contain values with raw identifiers, making it non-JSON-serializable,
+  // we replace it with a temporary marker and then replace it back after to
+  // workaround it. This means that esbuild is unable to optimize the `import.meta.env`
+  // access, but that's a tradeoff for now.
+  const replacementMarkers: Record<string, string> = {}
+  const env = define['import.meta.env']
+  if (env && !canJsonParse(env)) {
+    const marker = `_${getHash(env, env.length - 2)}_`
+    replacementMarkers[marker] = env
+    define = { ...define, 'import.meta.env': marker }
+  }
+
   const result = await transform(code, {
     loader: 'js',
     charset: 'utf8',
     platform: 'neutral',
-    define: replacements,
+    define: define,
     sourcefile: id,
     sourcemap: config.command === 'build' && !!config.build.sourcemap,
   })
+
+  for (const marker in replacementMarkers) {
+    result.code = result.code.replaceAll(marker, replacementMarkers[marker])
+  }
+
   return {
     code: result.code,
     map: result.map || null,
   }
 }
+
+/**
+ * Like `JSON.stringify` but keeps raw string values as a literal
+ * in the generated code. For example: `"window"` would refer to
+ * the global `window` object directly.
+ */
+export function serializeDefine(define: Record<string, any>): string {
+  let res = `{`
+  const keys = Object.keys(define)
+  for (let i = 0; i < keys.length; i++) {
+    const key = keys[i]
+    const val = define[key]
+    res += `${JSON.stringify(key)}: ${handleDefineValue(val)}`
+    if (i !== keys.length - 1) {
+      res += `, `
+    }
+  }
+  return res + `}`
+}
+
+function handleDefineValue(value: any): string {
+  return typeof value === 'string' ? value : JSON.stringify(value)
+}
+
+function canJsonParse(value: any): boolean {
+  try {
+    JSON.parse(value)
+    return true
+  } catch {
+    return false
+  }
+}
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index 5b701dc692691c..c3db1f5825b71d 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -60,6 +60,7 @@ import {
 } from './optimizedDeps'
 import { isCSSRequest, isDirectCSSRequest } from './css'
 import { browserExternalId } from './resolve'
+import { serializeDefine } from './define'
 
 const debug = createDebugger('vite:import-analysis')
 
@@ -178,21 +179,24 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
   let _env: string | undefined
   function getEnv(ssr: boolean) {
     if (!_env) {
-      _env = `import.meta.env = ${JSON.stringify({
-        ...config.env,
-        SSR: '__vite__ssr__',
-      })};`
-      // account for user env defines
+      const importMetaEnvKeys: Record<string, any> = {}
+      const userDefineEnv: Record<string, any> = {}
+      for (const key in config.env) {
+        importMetaEnvKeys[key] = JSON.stringify(config.env[key])
+      }
       for (const key in config.define) {
-        if (key.startsWith(`import.meta.env.`)) {
-          const val = config.define[key]
-          _env += `${key} = ${
-            typeof val === 'string' ? val : JSON.stringify(val)
-          };`
+        // non-import.meta.env.* is handled in `clientInjection` plugin
+        if (key.startsWith('import.meta.env.')) {
+          userDefineEnv[key.slice(16)] = config.define[key]
         }
       }
+      _env = `import.meta.env = ${serializeDefine({
+        ...importMetaEnvKeys,
+        SSR: ssr,
+        ...userDefineEnv,
+      })};`
     }
-    return _env.replace('"__vite__ssr__"', ssr + '')
+    return _env
   }
 
   return {
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 6dd182625e5e1e..efae361aff5782 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -989,8 +989,8 @@ export function parseRequest(id: string): Record<string, string> | null {
 
 export const blankReplacer = (match: string): string => ' '.repeat(match.length)
 
-export function getHash(text: Buffer | string): string {
-  return createHash('sha256').update(text).digest('hex').substring(0, 8)
+export function getHash(text: Buffer | string, length = 8): string {
+  return createHash('sha256').update(text).digest('hex').substring(0, length)
 }
 
 const _dirname = path.dirname(fileURLToPath(import.meta.url))
diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts
index a53254aba56835..9acf214a88bfbd 100644
--- a/playground/html/__tests__/html.spec.ts
+++ b/playground/html/__tests__/html.spec.ts
@@ -298,9 +298,6 @@ describe('env', () => {
     expect(await page.textContent('.env-define-object-string')).toBe(
       '{ "foo": "bar" }',
     )
-    expect(await page.textContent('.env-define-template-literal')).toBe(
-      '`template literal`', // only double quotes will be unquoted
-    )
     expect(await page.textContent('.env-define-null-string')).toBe('null')
     expect(await page.textContent('.env-bar')).toBeTruthy()
     expect(await page.textContent('.env-prod')).toBe(isBuild + '')
diff --git a/playground/html/env.html b/playground/html/env.html
index 5a87114201bdce..63286ea70aa9cc 100644
--- a/playground/html/env.html
+++ b/playground/html/env.html
@@ -2,7 +2,6 @@
 <p class="env-define">%VITE_NUMBER%</p>
 <p class="env-define-string">%VITE_STRING%</p>
 <p class="env-define-object-string">%VITE_OBJECT_STRING%</p>
-<p class="env-define-template-literal">%VITE_TEMPLATE_LITERAL%</p>
 <p class="env-define-null-string">%VITE_NULL_STRING%</p>
 <p class="env-%VITE_FOO%">class name should be env-bar</p>
 <p class="env-prod">%PROD%</p>
diff --git a/playground/html/vite.config.js b/playground/html/vite.config.js
index 9115ecaf3900cd..aa1b6767182d6e 100644
--- a/playground/html/vite.config.js
+++ b/playground/html/vite.config.js
@@ -38,7 +38,6 @@ export default defineConfig({
     'import.meta.env.VITE_NUMBER': 5173,
     'import.meta.env.VITE_STRING': JSON.stringify('string'),
     'import.meta.env.VITE_OBJECT_STRING': '{ "foo": "bar" }',
-    'import.meta.env.VITE_TEMPLATE_LITERAL': '`template literal`',
     'import.meta.env.VITE_NULL_STRING': 'null',
   },
 
diff --git a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
index 14daa7654c08a5..6e81c15c1dd1c4 100644
--- a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
+++ b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
@@ -117,7 +117,7 @@ describe.runIf(isBuild)('build tests', () => {
     const map = findAssetFile(/after-preload-dynamic.*\.js\.map/)
     expect(formatSourcemapForSnapshot(JSON.parse(map))).toMatchInlineSnapshot(`
       {
-        "mappings": "k2BAAA,OAAO,2BAAuB,EAAC,wBAE/B,QAAQ,IAAI,uBAAuB",
+        "mappings": "k2BAAA,OAAO,2BAAuB,0BAE9B,QAAQ,IAAI,uBAAuB",
         "sources": [
           "../../after-preload-dynamic.js",
         ],

From f86b4ccfa59770f198edc74a0330d2d51503e30c Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Thu, 12 Oct 2023 20:57:05 +0800
Subject: [PATCH 05/12] perf: early out if possible

---
 packages/vite/src/node/plugins/define.ts | 31 ++++++++++++++++++------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index cb05e34fdbd5f3..4759fa7829ad76 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -1,7 +1,7 @@
 import { transform } from 'esbuild'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
-import { getHash } from '../utils'
+import { escapeRegex, getHash } from '../utils'
 import { isCSSRequest } from './css'
 import { isHTMLRequest } from './html'
 
@@ -67,7 +67,7 @@ export function definePlugin(config: ResolvedConfig): Plugin {
     }
   }
 
-  function generateDefine(ssr: boolean) {
+  function generatePattern(ssr: boolean) {
     const replaceProcessEnv = !ssr || config.ssr?.target === 'webworker'
 
     const define: Record<string, string> = {
@@ -93,11 +93,25 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       })
     }
 
-    return Object.keys(define).length ? define : null
+    const defineKeys = Object.keys(define)
+    const pattern = defineKeys.length
+      ? new RegExp(
+          // Mustn't be preceded by a char that can be part of an identifier
+          // or a '.' that isn't part of a spread operator
+          '(?<![\\p{L}\\p{N}_$]|(?<!\\.\\.)\\.)(' +
+            defineKeys.map(escapeRegex).join('|') +
+            // Mustn't be followed by a char that can be part of an identifier
+            // or an assignment (but allow equality operators)
+            ')(?:(?<=\\.)|(?![\\p{L}\\p{N}_$]|\\s*?=[^=]))',
+          'gu',
+        )
+      : null
+
+    return [define, pattern] as const
   }
 
-  const clientDefine = generateDefine(false)
-  const ssrDefine = generateDefine(true)
+  const defaultPattern = generatePattern(false)
+  const ssrPattern = generatePattern(true)
 
   return {
     name: 'vite:define',
@@ -120,8 +134,11 @@ export function definePlugin(config: ResolvedConfig): Plugin {
         return
       }
 
-      const define = ssr ? ssrDefine : clientDefine
-      if (!define) return
+      const [define, pattern] = ssr ? ssrPattern : defaultPattern
+
+      if (!pattern?.test(code)) {
+        return
+      }
 
       return await replaceDefine(code, id, define, config)
     },

From 648c71b34c6fdfc394ed35c6e75fde474d6f8261 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Thu, 12 Oct 2023 21:13:42 +0800
Subject: [PATCH 06/12] chore: fix test

---
 packages/vite/src/node/__tests__/plugins/define.spec.ts | 2 +-
 packages/vite/src/node/plugins/define.ts                | 9 +++++----
 playground/js-sourcemap/__tests__/js-sourcemap.spec.ts  | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/vite/src/node/__tests__/plugins/define.spec.ts b/packages/vite/src/node/__tests__/plugins/define.spec.ts
index 783f85909ac11f..de9d4b36b742c6 100644
--- a/packages/vite/src/node/__tests__/plugins/define.spec.ts
+++ b/packages/vite/src/node/__tests__/plugins/define.spec.ts
@@ -50,7 +50,7 @@ describe('definePlugin', () => {
       'import.meta.hot': 'import.meta.hot',
     })
     expect(await overrideTransform('const hot = import.meta.hot;')).toBe(
-      'const hot = import.meta.hot;\n',
+      undefined,
     )
   })
 })
diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 4759fa7829ad76..136f227fc84717 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -135,10 +135,11 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       }
 
       const [define, pattern] = ssr ? ssrPattern : defaultPattern
+      if (!pattern) return
 
-      if (!pattern?.test(code)) {
-        return
-      }
+      // Check if our code needs any replacements before running esbuild
+      pattern.lastIndex = 0
+      if (!pattern.test(code)) return
 
       return await replaceDefine(code, id, define, config)
     },
@@ -168,7 +169,7 @@ export async function replaceDefine(
     loader: 'js',
     charset: 'utf8',
     platform: 'neutral',
-    define: define,
+    define,
     sourcefile: id,
     sourcemap: config.command === 'build' && !!config.build.sourcemap,
   })
diff --git a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
index 6e81c15c1dd1c4..14daa7654c08a5 100644
--- a/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
+++ b/playground/js-sourcemap/__tests__/js-sourcemap.spec.ts
@@ -117,7 +117,7 @@ describe.runIf(isBuild)('build tests', () => {
     const map = findAssetFile(/after-preload-dynamic.*\.js\.map/)
     expect(formatSourcemapForSnapshot(JSON.parse(map))).toMatchInlineSnapshot(`
       {
-        "mappings": "k2BAAA,OAAO,2BAAuB,0BAE9B,QAAQ,IAAI,uBAAuB",
+        "mappings": "k2BAAA,OAAO,2BAAuB,EAAC,wBAE/B,QAAQ,IAAI,uBAAuB",
         "sources": [
           "../../after-preload-dynamic.js",
         ],

From 0d2daffbffa2f80a70128f79b107f9421f44a187 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Thu, 12 Oct 2023 21:23:46 +0800
Subject: [PATCH 07/12] chore: reduce diff

---
 packages/vite/src/node/plugins/define.ts | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 136f227fc84717..1898ea9705003a 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -13,19 +13,19 @@ export function definePlugin(config: ResolvedConfig): Plugin {
   const isBuildLib = isBuild && config.build.lib
 
   // ignore replace process.env in lib build
-  const processNodeEnv: Record<string, string> = {}
   const processEnv: Record<string, string> = {}
+  const processNodeEnv: Record<string, string> = {}
   if (!isBuildLib) {
     const nodeEnv = process.env.NODE_ENV || config.mode
-    Object.assign(processNodeEnv, {
-      'process.env.NODE_ENV': JSON.stringify(nodeEnv),
-      'global.process.env.NODE_ENV': JSON.stringify(nodeEnv),
-      'globalThis.process.env.NODE_ENV': JSON.stringify(nodeEnv),
-    })
     Object.assign(processEnv, {
       'process.env': `{}`,
       'global.process.env': `{}`,
       'globalThis.process.env': `{}`,
+    })
+    Object.assign(processNodeEnv, {
+      'process.env.NODE_ENV': JSON.stringify(nodeEnv),
+      'global.process.env.NODE_ENV': JSON.stringify(nodeEnv),
+      'globalThis.process.env.NODE_ENV': JSON.stringify(nodeEnv),
       __vite_process_env_NODE_ENV: JSON.stringify(nodeEnv),
     })
   }
@@ -120,7 +120,8 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       const ssr = options?.ssr === true
       if (!ssr && !isBuild) {
         // for dev we inject actual global defines in the vite client to
-        // avoid the transform cost. see the clientInjection plugin.
+        // avoid the transform cost. see the `clientInjection` and
+        // `importAnalysis` plugin.
         return
       }
 

From 2554a477e67fd175972a46696acff8afce397a43 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Fri, 13 Oct 2023 01:40:07 +0800
Subject: [PATCH 08/12] fix: handle undefined

---
 packages/vite/src/node/plugins/define.ts   | 4 +++-
 playground/define/__tests__/define.spec.ts | 1 +
 playground/define/index.html               | 2 ++
 playground/define/vite.config.js           | 1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 1898ea9705003a..3ef9a29ee93a2a 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -205,7 +205,9 @@ export function serializeDefine(define: Record<string, any>): string {
 }
 
 function handleDefineValue(value: any): string {
-  return typeof value === 'string' ? value : JSON.stringify(value)
+  if (typeof value === 'undefined') return 'undefined'
+  if (typeof value === 'string') return value
+  return JSON.stringify(value)
 }
 
 function canJsonParse(value: any): boolean {
diff --git a/playground/define/__tests__/define.spec.ts b/playground/define/__tests__/define.spec.ts
index 02d930e873c55a..66f5a3371e8440 100644
--- a/playground/define/__tests__/define.spec.ts
+++ b/playground/define/__tests__/define.spec.ts
@@ -11,6 +11,7 @@ test('string', async () => {
   expect(await page.textContent('.string')).toBe(JSON.parse(defines.__STRING__))
   expect(await page.textContent('.number')).toBe(String(defines.__NUMBER__))
   expect(await page.textContent('.boolean')).toBe(String(defines.__BOOLEAN__))
+  expect(await page.textContent('.undefined')).toBe('')
 
   expect(await page.textContent('.object')).toBe(
     JSON.stringify(defines.__OBJ__, null, 2),
diff --git a/playground/define/index.html b/playground/define/index.html
index 0c72eb84d70e13..7b802867903e2f 100644
--- a/playground/define/index.html
+++ b/playground/define/index.html
@@ -6,6 +6,7 @@ <h1>Define</h1>
 <p>String <code class="string"></code></p>
 <p>Number <code class="number"></code></p>
 <p>Boolean <code class="boolean"></code></p>
+<p>Undefined <code class="undefined"></code></p>
 <p>Object <span class="pre object"></span></p>
 <p>Env Var <code class="env-var"></code></p>
 <p>process node env: <code class="process-node-env"></code></p>
@@ -72,6 +73,7 @@ <h2>Define replaces constants in template literal expressions</h2>
   text('.string', __STRING__)
   text('.number', __NUMBER__)
   text('.boolean', __BOOLEAN__)
+  text('.undefined', __UNDEFINED__)
   text('.object', JSON.stringify(__OBJ__, null, 2))
   text('.process-node-env', process.env.NODE_ENV)
   text('.env-var', process.env.SOMEVAR)
diff --git a/playground/define/vite.config.js b/playground/define/vite.config.js
index e33ab7f9343688..49fcdb48bcaabc 100644
--- a/playground/define/vite.config.js
+++ b/playground/define/vite.config.js
@@ -6,6 +6,7 @@ export default defineConfig({
     __STRING__: '"hello"',
     __NUMBER__: 123,
     __BOOLEAN__: true,
+    __UNDEFINED__: undefined,
     __OBJ__: {
       foo: 1,
       bar: {

From ddd513a2e20d92643d8dfbd50b3cd024cf04d950 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Mon, 23 Oct 2023 15:12:04 +0800
Subject: [PATCH 09/12] fix: getHash length

---
 packages/vite/src/node/utils.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index f0230b6c824733..dbd48ad43f5cc5 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -1003,7 +1003,9 @@ export function parseRequest(id: string): Record<string, string> | null {
 export const blankReplacer = (match: string): string => ' '.repeat(match.length)
 
 export function getHash(text: Buffer | string, length = 8): string {
-  return createHash('sha256').update(text).digest('hex').substring(0, length)
+  const h = createHash('sha256').update(text).digest('hex').substring(0, length)
+  if (length <= 64) return h
+  return h.padEnd(length, '_')
 }
 
 const _dirname = path.dirname(fileURLToPath(import.meta.url))

From 7ea68995a04889fbc1fd373ab20d4501978ef1b1 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Mon, 23 Oct 2023 15:49:44 +0800
Subject: [PATCH 10/12] fix: replace import.meta.env.SSR correctly

---
 packages/vite/src/node/plugins/importAnalysis.ts | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index 85d732ff910c04..520c236e940e9f 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -177,8 +177,9 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
   let server: ViteDevServer
 
   let _env: string | undefined
+  let _ssrEnv: string | undefined
   function getEnv(ssr: boolean) {
-    if (!_env) {
+    if (!_ssrEnv || !_env) {
       const importMetaEnvKeys: Record<string, any> = {}
       const userDefineEnv: Record<string, any> = {}
       for (const key in config.env) {
@@ -190,13 +191,15 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           userDefineEnv[key.slice(16)] = config.define[key]
         }
       }
-      _env = `import.meta.env = ${serializeDefine({
+      const env = `import.meta.env = ${serializeDefine({
         ...importMetaEnvKeys,
-        SSR: ssr,
+        SSR: '__vite_ssr__',
         ...userDefineEnv,
       })};`
+      _ssrEnv = env.replace('__vite_ssr__', 'true')
+      _env = env.replace('__vite_ssr__', 'false')
     }
-    return _env
+    return ssr ? _ssrEnv : _env
   }
 
   return {

From ea8a0f8a1780eabf98828af6d08f05754a4dc2aa Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Mon, 23 Oct 2023 22:57:50 +0800
Subject: [PATCH 11/12] chore: update feedback

---
 docs/guide/migration.md                  | 17 +++++++++++++----
 packages/vite/src/node/plugins/define.ts |  4 +++-
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/docs/guide/migration.md b/docs/guide/migration.md
index 7a9d6b53c9b1a5..fae5f395e35ad8 100644
--- a/docs/guide/migration.md
+++ b/docs/guide/migration.md
@@ -41,14 +41,23 @@ In Vite 4, the `define` and `import.meta.env.*` features use different replaceme
 
 This results in a dev and build inconsistency when trying to access the variables, and sometimes even caused failed builds. For example:
 
+```js
+// vite.config.js
+export default defineConfig({
+  define: {
+    __APP_VERSION__: JSON.stringify('1.0.0'),
+  },
+})
+```
+
 ```js
 const data = { __APP_VERSION__ }
 // dev: { __APP_VERSION__: "1.0.0" } ✅
-// build: { __APP_VERSION__: undefined } ❌
+// build: { "1.0.0" } ❌
 
-const docs = 'I like import.meta.env'
-// dev: "I like import.meta.env" ✅
-// build: "I like ({ ... })" ❌
+const docs = 'I like import.meta.env.MODE'
+// dev: "I like import.meta.env.MODE" ✅
+// build: "I like "production"" ❌
 ```
 
 Vite 5 fixes this by using `esbuild` to handle the replacements in builds, aligning with the dev behaviour.
diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 3ef9a29ee93a2a..69fd0e406662da 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -166,9 +166,11 @@ export async function replaceDefine(
     define = { ...define, 'import.meta.env': marker }
   }
 
+  const esbuildOptions = config.esbuild || {}
+
   const result = await transform(code, {
     loader: 'js',
-    charset: 'utf8',
+    charset: esbuildOptions.charset ?? 'utf8',
     platform: 'neutral',
     define,
     sourcefile: id,

From 5c507afba11f4ba4a09a7a2923b6749a4ca64bc8 Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Tue, 24 Oct 2023 17:18:29 +0800
Subject: [PATCH 12/12] fix: enable sourcemap in dev

---
 packages/vite/src/node/plugins/define.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
index 69fd0e406662da..36b0df05a9b55a 100644
--- a/packages/vite/src/node/plugins/define.ts
+++ b/packages/vite/src/node/plugins/define.ts
@@ -174,7 +174,7 @@ export async function replaceDefine(
     platform: 'neutral',
     define,
     sourcefile: id,
-    sourcemap: config.command === 'build' && !!config.build.sourcemap,
+    sourcemap: config.command === 'build' ? !!config.build.sourcemap : true,
   })
 
   for (const marker in replacementMarkers) {