fix: support aliases in html references

fix #1363
vitejs · Jan 5, 2021 · 68eac64 · 68eac64
1 parent 99522d0
commit 68eac64
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 6 deletions.
diff --git a/packages/playground/alias/__tests__/alias.spec.ts b/packages/playground/alias/__tests__/alias.spec.ts
@@ -17,3 +17,7 @@ test('regex', async () => {
 test('dependency', async () => {
   expect(await page.textContent('.dep')).toMatch('[success] out of root')
 })
+
+test('from html', async () => {
+  expect(await page.textContent('.from-html')).toMatch('[success] from html')
+})
diff --git a/packages/playground/alias/dir/from-html.js b/packages/playground/alias/dir/from-html.js
@@ -0,0 +1 @@
+document.querySelector('.from-html').textContent = '[success] from html'
diff --git a/packages/playground/alias/index.html b/packages/playground/alias/index.html
@@ -4,6 +4,7 @@ <h1>Alias</h1>
 <p class="fs-dir"></p>
 <p class="regex"></p>
 <p class="dep"></p>
+<p class="from-html"></p>
 
 <script type="module">
   import { msg as fsMsg } from 'fs'
@@ -19,4 +20,6 @@ <h1>Alias</h1>
   text('.fs-dir', fsDirMsg)
   text('.regex', regexMsg + ' via regex')
   text('.dep', depMsg)
-</script>
+</script>
+
+<script type="module" src="/@/from-html.js"></script>
diff --git a/packages/playground/alias/vite.config.js b/packages/playground/alias/vite.config.js
@@ -11,6 +11,7 @@ module.exports = {
     {
       find: /^regex\/(.*)/,
       replacement: `${path.resolve(__dirname, 'dir')}/$1`
-    }
+    },
+    { find: '/@', replacement: path.resolve(__dirname, 'dir') }
   ]
 }
diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts
@@ -96,7 +96,7 @@ export interface UserConfig {
 }
 
 export type ResolvedConfig = Readonly<
-  Omit<UserConfig, 'plugins' | 'assetsInclude'> & {
+  Omit<UserConfig, 'plugins' | 'alias' | 'assetsInclude'> & {
     configPath: string | undefined
     inlineConfig: UserConfig
     root: string
@@ -105,6 +105,7 @@ export type ResolvedConfig = Readonly<
     isProduction: boolean
     optimizeCacheDir: string | undefined
     env: Record<string, any>
+    alias: Alias[]
     plugins: readonly Plugin[]
     server: ServerOptions
     build: Required<BuildOptions>

diff --git a/packages/vite/src/node/server/index.ts b/packages/vite/src/node/server/index.ts
@@ -303,7 +303,7 @@ export async function createServer(
 
   // serve static files
   app.use(rawFsStaticMiddleware())
-  app.use(serveStaticMiddleware(root))
+  app.use(serveStaticMiddleware(root, resolvedConfig))
 
   // spa fallback
   app.use(

diff --git a/packages/vite/src/node/server/middlewares/static.ts b/packages/vite/src/node/server/middlewares/static.ts
@@ -2,13 +2,17 @@ import os from 'os'
 import path from 'path'
 import sirv from 'sirv'
 import { Connect } from 'types/connect'
+import { ResolvedConfig } from '../..'
 import { FS_PREFIX } from '../../constants'
 import { cleanUrl, isImportRequest } from '../../utils'
-
 const sirvOptions = { dev: true, etag: true }
 
-export function serveStaticMiddleware(dir: string): Connect.NextHandleFunction {
+export function serveStaticMiddleware(
+  dir: string,
+  config?: ResolvedConfig
+): Connect.NextHandleFunction {
   const serve = sirv(dir, sirvOptions)
+
   return (req, res, next) => {
     const url = req.url!
 
@@ -25,6 +29,26 @@ export function serveStaticMiddleware(dir: string): Connect.NextHandleFunction {
       return next()
     }
 
+    // apply aliases to static requests as well
+    if (config) {
+      let redirected: string | undefined
+      for (const { find, replacement } of config.alias) {
+        const matches =
+          typeof find === 'string' ? url.startsWith(find) : find.test(url)
+        if (matches) {
+          redirected = url.replace(find, replacement)
+          break
+        }
+      }
+      if (redirected) {
+        // dir is pre-normalized to posix style
+        if (redirected.startsWith(dir)) {
+          redirected = redirected.slice(dir.length)
+        }
+        req.url = redirected
+      }
+    }
+
     serve(req, res, next)
   }
 }