refactor: make define option perform direct replacement instead

BREAKING CHANGE: `define` option no longer calls `JSON.stringify` on
string values. This means string define values will be now treated as
raw expressions. To define a string constant, explicit quotes are now
required.

Author: yyx990803

packages/playground/define/__tests__/define.spec.ts

@@ -1,7 +1,8 @@
 test('string', async () => {
   const defines = require('../vite.config.js').define
 
-  expect(await page.textContent('.string')).toBe(String(defines.__STRING__))
+  expect(await page.textContent('.exp')).toBe(String(eval(defines.__EXP__)))
+  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('.object')).toBe(

packages/playground/define/index.html

@@ -1,11 +1,13 @@
 <h1>Define</h1>
 
+<p>Raw Expression <code class="exp"></code></p>
 <p>String <code class="string"></code></p>
 <p>Number <code class="number"></code></p>
 <p>Boolean <code class="boolean"></code></p>
 <p>Object <span class="pre object"></span></p>
 
 <script type="module">
+  text('.exp', __EXP__)
   text('.string', __STRING__)
   text('.number', __NUMBER__)
   text('.boolean', __BOOLEAN__)

packages/playground/define/vite.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   define: {
-    __STRING__: 'hello',
+    __EXP__: '1 + 1',
+    __STRING__: '"hello"',
     __NUMBER__: 123,
     __BOOLEAN__: true,
     __OBJ__: {

packages/vite/src/node/config.ts

@@ -269,15 +269,6 @@ export async function resolveConfig(
 
   // load .env files
   const userEnv = loadEnv(mode, resolvedRoot)
-  // check if user defined any import.meta.env variables
-  if (config.define) {
-    const prefix = `import.meta.env.`
-    for (const key in config.define) {
-      if (key.startsWith(prefix)) {
-        userEnv[key.slice(prefix.length)] = config.define[key]
-      }
-    }
-  }
 
   // Note it is possible for user to have a custom mode, e.g. `staging` where
   // production-like behavior is expected. This is indicated by NODE_ENV=production

packages/vite/src/node/plugins/clientInjections.ts

@@ -44,7 +44,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
           .replace(`__MODE__`, JSON.stringify(config.mode))
           .replace(`__BASE__`, JSON.stringify(config.base))
           .replace(`__ROOT__`, JSON.stringify(config.root))
-          .replace(`__DEFINES__`, JSON.stringify(config.define || {}))
+          .replace(`__DEFINES__`, serializeDefine(config.define || {}))
           .replace(`__HMR_PROTOCOL__`, JSON.stringify(protocol))
           .replace(`__HMR_HOSTNAME__`, JSON.stringify(host))
           .replace(`__HMR_PORT__`, JSON.stringify(port))
@@ -60,3 +60,14 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
     }
   }
 }
+
+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 + `}`
+}

packages/vite/src/node/plugins/define.ts

@@ -9,7 +9,8 @@ export function definePlugin(config: ResolvedConfig): Plugin {
 
   const userDefine: Record<string, string> = {}
   for (const key in config.define) {
-    userDefine[key] = JSON.stringify(config.define[key])
+    const val = config.define[key]
+    userDefine[key] = typeof val === 'string' ? val : JSON.stringify(val)
   }
 
   // during dev, import.meta properties are handled by importAnalysis plugin

packages/vite/src/node/plugins/importAnalysis.ts

@@ -411,12 +411,20 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
 
       if (hasEnv) {
         // inject import.meta.env
-        str().prepend(
-          `import.meta.env = ${JSON.stringify({
-            ...config.env,
-            SSR: !!ssr
-          })};`
-        )
+        let env = `import.meta.env = ${JSON.stringify({
+          ...config.env,
+          SSR: !!ssr
+        })};`
+        // account for user env defines
+        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)
+            };`
+          }
+        }
+        str().prepend(env)
       }
 
       if (hasHMR && !ssr) {