fix(html): build mode ignore html define transform (#6663)

vitejs · Mar 4, 2022 · 79dd003 · 79dd003
1 parent 849e845
commit 79dd003
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 1 deletion.
diff --git a/packages/playground/define/__tests__/define.spec.ts b/packages/playground/define/__tests__/define.spec.ts
@@ -20,4 +20,6 @@ test('string', async () => {
   expect(await page.textContent('.spread-array')).toBe(
     JSON.stringify([...defines.__STRING__])
   )
+  // html would't need to define replacement
+  expect(await page.textContent('.exp-define')).toBe('__EXP__')
 })
diff --git a/packages/playground/define/index.html b/packages/playground/define/index.html
@@ -9,6 +9,7 @@ <h1>Define</h1>
 <p>process as property: <code class="process-as-property"></code></p>
 <p>spread object: <code class="spread-object"></code></p>
 <p>spread array: <code class="spread-array"></code></p>
+<p>define variable in html: <code class="exp-define">__EXP__</code></p>
 
 <script type="module">
   const __VAR_NAME__ = true // ensure define doesn't replace var name

diff --git a/packages/vite/src/node/plugins/define.ts b/packages/vite/src/node/plugins/define.ts
@@ -3,6 +3,7 @@ import type { TransformResult } from 'rollup'
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { isCSSRequest } from './css'
+import { isHTMLRequest } from './html'
 
 export function definePlugin(config: ResolvedConfig): Plugin {
   const isBuild = config.command === 'build'
@@ -85,6 +86,7 @@ export function definePlugin(config: ResolvedConfig): Plugin {
 
   return {
     name: 'vite:define',
+
     transform(code, id, options) {
       const ssr = options?.ssr === true
       if (!ssr && !isBuild) {
@@ -94,7 +96,8 @@ export function definePlugin(config: ResolvedConfig): Plugin {
       }
 
       if (
-        // exclude css and static assets for performance
+        // exclude html, css and static assets for performance
+        isHTMLRequest(id) ||
         isCSSRequest(id) ||
         config.assetsInclude(id)
       ) {

diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
@@ -43,9 +43,14 @@ interface ScriptAssetsUrl {
 
 const htmlProxyRE = /\?html-proxy=?[&inline\-css]*&index=(\d+)\.(js|css)$/
 const inlineCSSRE = /__VITE_INLINE_CSS__([^_]+_\d+)__/g
+const htmlLangRE = /\.(html|htm)$/
 const inlineImportRE = /\bimport\s*\(("[^"]*"|'[^']*')\)/g
+
 export const isHTMLProxy = (id: string): boolean => htmlProxyRE.test(id)
 
+export const isHTMLRequest = (request: string): boolean =>
+  htmlLangRE.test(request)
+
 // HTML Proxy Caches are stored by config -> filePath -> index
 export const htmlProxyMap = new WeakMap<
   ResolvedConfig,