fix: alias should work for optimized deps

vitejs · Jan 14, 2021 · 54dab71 · 54dab71
1 parent db97317
commit 54dab71
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 8 deletions.
diff --git a/packages/playground/alias/__tests__/alias.spec.ts b/packages/playground/alias/__tests__/alias.spec.ts
@@ -21,3 +21,9 @@ test('dependency', async () => {
 test('from html', async () => {
   expect(await page.textContent('.from-html')).toMatch('[success] from html')
 })
+
+test('optimized dep', async () => {
+  expect(await page.textContent('.optimized')).toMatch(
+    '[success] alias optimized'
+  )
+})
diff --git a/packages/playground/alias/index.html b/packages/playground/alias/index.html
@@ -6,6 +6,8 @@ <h1>Alias</h1>
 <p class="dep"></p>
 <p class="from-html"></p>
 
+<div class="optimized"></div>
+
 <script type="module">
   import { msg as fsMsg } from 'fs'
   import { msg as fsDirMsg } from 'fs-dir/test'
@@ -20,6 +22,13 @@ <h1>Alias</h1>
   text('.fs-dir', fsDirMsg)
   text('.regex', regexMsg + ' via regex')
   text('.dep', depMsg)
+
+  import { createApp } from 'vue'
+  // vue is aliased to the full browser build AND optimized.
+  // should resolve as expected
+  createApp({
+    template: '[success] alias optimized dep'
+  }).mount('.optimized')
 </script>
 
-<script type="module" src="/@/from-html.js"></script>
+<script type="module" src="/@/from-html.js"></script>
diff --git a/packages/playground/alias/package.json b/packages/playground/alias/package.json
@@ -6,5 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "debug": "node --inspect-brk ../../vite/bin/vite"
+  },
+  "dependencies": {
+    "vue": "^3.0.5"
   }
 }
diff --git a/packages/playground/alias/vite.config.js b/packages/playground/alias/vite.config.js
@@ -12,6 +12,11 @@ module.exports = {
       find: /^regex\/(.*)/,
       replacement: `${path.resolve(__dirname, 'dir')}/$1`
     },
-    { find: '/@', replacement: path.resolve(__dirname, 'dir') }
-  ]
+    { find: '/@', replacement: path.resolve(__dirname, 'dir') },
+    // aliasing an optimized dep
+    { find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js' }
+  ],
+  build: {
+    minify: false
+  }
 }
diff --git a/packages/vite/src/node/optimizer/index.ts b/packages/vite/src/node/optimizer/index.ts
@@ -159,12 +159,13 @@ export async function optimizeDeps(
 
   // Force included deps - these can also be deep paths
   if (options.include) {
-    options.include.forEach((id) => {
-      const filePath = tryNodeResolve(id, root, config.isProduction)
+    for (let id of options.include) {
+      const aliased = (await aliasResolver.resolveId(id))?.id || id
+      const filePath = tryNodeResolve(aliased, root, config.isProduction)
       if (filePath) {
         qualified[id] = filePath.id
       }
-    })
+    }
   }
 
   let qualifiedIds = Object.keys(qualified)
@@ -345,7 +346,8 @@ async function resolveQualifiedDeps(
     }
     let filePath
     try {
-      const resolved = tryNodeResolve(id, root, config.isProduction)
+      const aliased = (await aliasResolver.resolveId(id))?.id || id
+      const resolved = tryNodeResolve(aliased, root, config.isProduction)
       filePath = resolved && resolved.id
     } catch (e) {}
     if (!filePath) {

diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
@@ -12,6 +12,7 @@ import { htmlPlugin } from './html'
 import { wasmPlugin } from './wasm'
 import { webWorkerPlugin } from './worker'
 import { dynamicImportPolyfillPlugin } from './dynamicImportPolyfill'
+import { preAliasPlugin } from './preAlias'
 
 export async function resolvePlugins(
   config: ResolvedConfig,
@@ -26,6 +27,7 @@ export async function resolvePlugins(
     : { pre: [], post: [] }
 
   return [
+    isBuild ? null : preAliasPlugin(),
     aliasPlugin({ entries: config.alias }),
     ...prePlugins,
     config.build.polyfillDynamicImport

diff --git a/packages/vite/src/node/plugins/preAlias.ts b/packages/vite/src/node/plugins/preAlias.ts
@@ -0,0 +1,22 @@
+import { ViteDevServer } from '..'
+import { Plugin } from '../plugin'
+import { bareImportRE } from '../utils'
+import { tryOptimizedResolve } from './resolve'
+
+/**
+ * A plugin to avoid an aliased AND optimized dep from being aliased in src
+ */
+export function preAliasPlugin(): Plugin {
+  let server: ViteDevServer
+  return {
+    name: 'vite:pre-alias',
+    configureServer(_server) {
+      server = _server
+    },
+    resolveId(id) {
+      if (bareImportRE.test(id)) {
+        return tryOptimizedResolve(id, server)
+      }
+    }
+  }
+}
diff --git a/packages/vite/src/node/plugins/resolve.ts b/packages/vite/src/node/plugins/resolve.ts
@@ -328,7 +328,7 @@ export function tryNodeResolve(
   }
 }
 
-function tryOptimizedResolve(
+export function tryOptimizedResolve(
   rawId: string,
   server: ViteDevServer
 ): string | undefined {