feat: add option to exclude global define and env replacement

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

@@ -1,7 +1,9 @@
 test('string', async () => {
   const defines = require('../vite.config.js').define
 
-  expect(await page.textContent('.exp')).toBe(String(eval(defines.__EXP__)))
+  expect(await page.textContent('.exp')).toBe(
+    String(typeof 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__))
@@ -24,3 +26,7 @@ test('string', async () => {
   expect(await page.textContent('.exp-define')).toBe('__EXP__')
   expect(await page.textContent('.import-json')).toBe('__EXP__')
 })
+
+test('exclude replacement', async () => {
+  expect(await page.textContent('.origin-text')).toMatch('process.env.NODE_ENV')
+})

packages/playground/define/env.md

@@ -0,0 +1 @@
+`process.env.NODE_ENV`

packages/playground/define/index.html

@@ -11,10 +11,15 @@ <h1>Define</h1>
 <p>spread array: <code class="spread-array"></code></p>
 <p>define variable in html: <code class="exp-define">__EXP__</code></p>
 <p>import json: <code class="import-json"></code></p>
+<p id="md-to-vue" class="origin-text">{{msg}}</p>
 
 <script type="module">
+  import { createApp } from 'vue'
+  import EnvComponent from './env.md'
+  createApp(EnvComponent).mount('#md-to-vue')
+
   const __VAR_NAME__ = true // ensure define doesn't replace var name
-  text('.exp', __EXP__)
+  text('.exp', typeof __EXP__) // typeof __EXP_ would be `boolean` instead of `string`
   text('.string', __STRING__)
   text('.number', __NUMBER__)
   text('.boolean', __BOOLEAN__)

packages/playground/define/package.json

@@ -7,5 +7,12 @@
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite",
     "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "workspace:*",
+    "vite-plugin-md": "^0.11.4"
+  },
+  "dependencies": {
+    "vue": "^3.2.16"
   }
 }

packages/playground/define/vite.config.js

@@ -1,6 +1,16 @@
+const Vue = require('@vitejs/plugin-vue')
+const Markdown = require('vite-plugin-md').default
+
 module.exports = {
+  replacementExclude: ['**.md'],
+  plugins: [
+    Vue({
+      include: [/\.vue$/, /\.md$/]
+    }),
+    Markdown()
+  ],
   define: {
-    __EXP__: '1 + 1',
+    __EXP__: 'false',
     __STRING__: '"hello"',
     __NUMBER__: 123,
     __BOOLEAN__: true,

packages/vite/src/node/config.ts

@@ -106,6 +106,10 @@ export interface UserConfig {
    * Entries will be defined on `window` during dev and replaced during build.
    */
   define?: Record<string, any>
+  /**
+   * Specify additional picomatch patterns to exclude global defines and env replacement.
+   */
+  replacementExclude?: string | RegExp | (string | RegExp)[]
   /**
    * Array of vite plugins to use.
    */
@@ -237,7 +241,13 @@ export interface InlineConfig extends UserConfig {
 export type ResolvedConfig = Readonly<
   Omit<
     UserConfig,
-    'plugins' | 'alias' | 'dedupe' | 'assetsInclude' | 'optimizeDeps' | 'worker'
+    | 'plugins'
+    | 'alias'
+    | 'dedupe'
+    | 'assetsInclude'
+    | 'replacementExclude'
+    | 'optimizeDeps'
+    | 'worker'
   > & {
     configFile: string | undefined
     configFileDependencies: string[]
@@ -259,6 +269,7 @@ export type ResolvedConfig = Readonly<
     build: ResolvedBuildOptions
     preview: ResolvedPreviewOptions
     assetsInclude: (file: string) => boolean
+    replacementExclude: (file: string) => boolean
     logger: Logger
     createResolver: (options?: Partial<InternalResolveOptions>) => ResolveFn
     optimizeDeps: Omit<DepOptimizationOptions, 'keepNames'>
@@ -413,6 +424,10 @@ export async function resolveConfig(
     ? createFilter(config.assetsInclude)
     : () => false
 
+  const definesFilter = config.replacementExclude
+    ? createFilter(config.replacementExclude)
+    : () => false
+
   // create an internal resolver to be used in special scenarios, e.g.
   // optimizer & handling css @imports
   const createResolver: ResolvedConfig['createResolver'] = (options) => {
@@ -493,6 +508,9 @@ export async function resolveConfig(
     assetsInclude(file: string) {
       return DEFAULT_ASSETS_RE.test(file) || assetsFilter(file)
     },
+    replacementExclude(file: string) {
+      return definesFilter(file)
+    },
     logger,
     packageCache: new Map(),
     createResolver,
@@ -740,7 +758,10 @@ function mergeConfigRecursively(
     if (key === 'alias' && (rootPath === 'resolve' || rootPath === '')) {
       merged[key] = mergeAlias(existing, value)
       continue
-    } else if (key === 'assetsInclude' && rootPath === '') {
+    } else if (
+      (key === 'assetsInclude' || key === 'replacementExclude') &&
+      rootPath === ''
+    ) {
       merged[key] = [].concat(existing, value)
       continue
     } else if (key === 'noExternal' && existing === true) {

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

@@ -49,7 +49,11 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
           .replace(`__HMR_PORT__`, JSON.stringify(port))
           .replace(`__HMR_TIMEOUT__`, JSON.stringify(timeout))
           .replace(`__HMR_ENABLE_OVERLAY__`, JSON.stringify(overlay))
-      } else if (!options?.ssr && code.includes('process.env.NODE_ENV')) {
+      } else if (
+        !config.replacementExclude(id) &&
+        !options?.ssr &&
+        code.includes('process.env.NODE_ENV')
+      ) {
         // 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

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

@@ -99,11 +99,12 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       }
 
       if (
-        // exclude html, css and static assets for performance
+        // exclude html, specified file, css and static assets for performance
         isHTMLRequest(id) ||
         isCSSRequest(id) ||
         isNonJsRequest(id) ||
-        config.assetsInclude(id)
+        config.assetsInclude(id) ||
+        config.replacementExclude(id)
       ) {
         return
       }