feat: support dev external

packages/vite/src/node/build.ts

@@ -26,7 +26,13 @@ import { isDepsOptimizerEnabled, resolveConfig } from './config'
 import { buildReporterPlugin } from './plugins/reporter'
 import { buildEsbuildPlugin } from './plugins/esbuild'
 import { terserPlugin } from './plugins/terser'
-import { copyDir, emptyDir, lookupFile, normalizePath } from './utils'
+import {
+  copyDir,
+  emptyDir,
+  lookupFile,
+  normalizePath,
+  resolveRollupExternal
+} from './utils'
 import { manifestPlugin } from './plugins/manifest'
 import type { Logger } from './logger'
 import { dataURIPlugin } from './plugins/dataUri'
@@ -749,34 +755,11 @@ async function cjsSsrResolveExternal(
       return true
     }
     if (user) {
-      return resolveUserExternal(user, id, parentId, isResolved)
+      return resolveRollupExternal(user, id, parentId, isResolved)
     }
   }
 }
 
-function resolveUserExternal(
-  user: ExternalOption,
-  id: string,
-  parentId: string | undefined,
-  isResolved: boolean
-) {
-  if (typeof user === 'function') {
-    return user(id, parentId, isResolved)
-  } else if (Array.isArray(user)) {
-    return user.some((test) => isExternal(id, test))
-  } else {
-    return isExternal(id, user)
-  }
-}
-
-function isExternal(id: string, test: string | RegExp) {
-  if (typeof test === 'string') {
-    return id === test
-  } else {
-    return test.test(id)
-  }
-}
-
 function injectSsrFlagToHooks(plugin: Plugin): Plugin {
   const { resolveId, load, transform } = plugin
   return {

packages/vite/src/node/config.ts

@@ -350,7 +350,8 @@ export type ResolveFn = (
   id: string,
   importer?: string,
   aliasOnly?: boolean,
-  ssr?: boolean
+  ssr?: boolean,
+  ignoreExternal?: boolean
 ) => Promise<string | undefined>
 
 export async function resolveConfig(
@@ -515,7 +516,7 @@ export async function resolveConfig(
   const createResolver: ResolvedConfig['createResolver'] = (options) => {
     let aliasContainer: PluginContainer | undefined
     let resolverContainer: PluginContainer | undefined
-    return async (id, importer, aliasOnly, ssr) => {
+    return async (id, importer, aliasOnly, ssr, ignoreExternal) => {
       let container: PluginContainer
       if (aliasOnly) {
         container =
@@ -546,7 +547,11 @@ export async function resolveConfig(
           }))
       }
       return (
-        await container.resolveId(id, importer, { ssr, scan: options?.scan })
+        await container.resolveId(id, importer, {
+          ssr,
+          scan: options?.scan,
+          ignoreExternal
+        })
       )?.id
     }
   }

packages/vite/src/node/optimizer/esbuildDepPlugin.ts

@@ -81,7 +81,7 @@ export function esbuildDepPlugin(
       _importer = importer in qualified ? qualified[importer] : importer
     }
     const resolver = kind.startsWith('require') ? _resolveRequire : _resolve
-    return resolver(id, _importer, undefined, ssr)
+    return resolver(id, _importer, undefined, ssr, true)
   }
 
   const resolveResult = (id: string, resolved: string) => {

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

@@ -303,6 +303,10 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           )
         }
 
+        if (resolved.external) {
+          return [resolved.id, resolved.id]
+        }
+
         const isRelative = url.startsWith('.')
         const isSelfImport = !isRelative && cleanUrl(url) === cleanUrl(importer)
 
@@ -662,7 +666,9 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
             await Promise.all(
               [...pluginImports].map((id) => normalizeUrl(id, 0))
             )
-          ).forEach(([url]) => importedUrls.add(url))
+          ).forEach((normalized) => {
+            importedUrls.add(normalized[0])
+          })
         }
         // HMR transforms are no-ops in SSR, so an `accept` call will
         // never be injected. Avoid updating the `isSelfAccepting`

packages/vite/src/node/server/pluginContainer.ts

@@ -30,7 +30,7 @@ SOFTWARE.
 */
 
 import fs from 'node:fs'
-import { join, resolve } from 'node:path'
+import path, { join, resolve } from 'node:path'
 import { performance } from 'node:perf_hooks'
 import { createRequire } from 'node:module'
 import type {
@@ -69,6 +69,7 @@ import {
   normalizePath,
   numberToPos,
   prettifyUrl,
+  resolveRollupExternal,
   timeFrom
 } from '../utils'
 import { FS_PREFIX } from '../constants'
@@ -97,6 +98,10 @@ export interface PluginContainer {
        * @internal
        */
       scan?: boolean
+      /**
+       * @internal
+       */
+      ignoreExternal?: boolean
       isEntry?: boolean
     }
   ): Promise<PartialResolvedId | null>
@@ -505,7 +510,22 @@ export async function createPluginContainer(
       return {
         acorn,
         acornInjectPlugins: [],
-        ...options
+        ...options,
+        // normalize external as function
+        external(
+          id: string,
+          parentId: string | undefined,
+          isResolved: boolean
+        ) {
+          if (options.external && !id.startsWith('\0')) {
+            return resolveRollupExternal(
+              options.external,
+              id,
+              parentId,
+              isResolved
+            )
+          }
+        }
       }
     })(),
 
@@ -528,46 +548,63 @@ export async function createPluginContainer(
       const skip = options?.skip
       const ssr = options?.ssr
       const scan = !!options?.scan
+      const ignoreExternal = !!options?.ignoreExternal
       const isEntry = !!options?.isEntry
       const ctx = new Context()
       ctx.ssr = !!ssr
       ctx._scan = scan
       ctx._resolveSkips = skip
+      const { external } = container.options as NormalizedInputOptions
       const resolveStart = isDebug ? performance.now() : 0
 
       let id: string | null = null
       const partial: Partial<PartialResolvedId> = {}
-      for (const plugin of plugins) {
-        if (!plugin.resolveId) continue
-        if (skip?.has(plugin)) continue
 
-        ctx._activePlugin = plugin
+      if (!ignoreExternal && external(rawId, importer, false)) {
+        id = rawId
+        partial.external = true
+      } else {
+        for (const plugin of plugins) {
+          if (!plugin.resolveId) continue
+          if (skip?.has(plugin)) continue
+
+          ctx._activePlugin = plugin
+
+          const pluginResolveStart = isDebug ? performance.now() : 0
+          const result = await plugin.resolveId.call(
+            ctx as any,
+            rawId,
+            importer,
+            { ssr, scan, isEntry }
+          )
+          if (!result) continue
 
-        const pluginResolveStart = isDebug ? performance.now() : 0
-        const result = await plugin.resolveId.call(
-          ctx as any,
-          rawId,
-          importer,
-          { ssr, scan, isEntry }
-        )
-        if (!result) continue
+          if (typeof result === 'string') {
+            id = result
+          } else {
+            id = result.id
+            Object.assign(partial, result)
+          }
 
-        if (typeof result === 'string') {
-          id = result
-        } else {
-          id = result.id
-          Object.assign(partial, result)
-        }
+          isDebug &&
+            debugPluginResolve(
+              timeFrom(pluginResolveStart),
+              plugin.name,
+              prettifyUrl(id, root)
+            )
 
-        isDebug &&
-          debugPluginResolve(
-            timeFrom(pluginResolveStart),
-            plugin.name,
-            prettifyUrl(id, root)
-          )
+          // resolveId() is hookFirst - first non-null result is returned.
+          break
+        }
 
-        // resolveId() is hookFirst - first non-null result is returned.
-        break
+        if (
+          !ignoreExternal &&
+          !partial.external &&
+          external(id ?? rawId, importer, true)
+        ) {
+          id ??= rawId
+          partial.external = true
+        }
       }
 
       if (isDebug && rawId !== id && !rawId.startsWith(FS_PREFIX)) {
@@ -577,7 +614,7 @@ export async function createPluginContainer(
           seenResolves[key] = true
           debugResolve(
             `${timeFrom(resolveStart)} ${colors.cyan(rawId)} -> ${colors.dim(
-              id
+              partial.external ? '(external)' : id
             )}`
           )
         }

packages/vite/src/node/utils.ts

@@ -16,7 +16,7 @@ import debug from 'debug'
 import type { Alias, AliasOptions } from 'types/alias'
 import type MagicString from 'magic-string'
 
-import type { TransformResult } from 'rollup'
+import type { ExternalOption, TransformResult } from 'rollup'
 import { createFilter as _createFilter } from '@rollup/pluginutils'
 import {
   CLIENT_ENTRY,
@@ -1087,3 +1087,26 @@ export const isNonDriveRelativeAbsolutePath = (p: string): boolean => {
   if (!isWindows) return p.startsWith('/')
   return windowsDrivePathPrefixRE.test(p)
 }
+
+export function resolveRollupExternal(
+  external: ExternalOption,
+  id: string,
+  parentId: string | undefined,
+  isResolved: boolean
+): boolean | null | void {
+  if (typeof external === 'function') {
+    return external(id, parentId, isResolved)
+  } else if (Array.isArray(external)) {
+    return external.some((test) => isExternal(id, test))
+  } else {
+    return isExternal(id, external)
+  }
+}
+
+function isExternal(id: string, test: string | RegExp) {
+  if (typeof test === 'string') {
+    return id === test
+  } else {
+    return test.test(id)
+  }
+}

playground/external/__tests__/external.spec.ts

@@ -1,5 +1,10 @@
+import { describe, test } from 'vitest'
 import { isBuild, page } from '~utils'
 
+test('external', async () => {
+  expect(await page.textContent('#source-vue-version')).toBe('3.2.0')
+})
+
 describe.runIf(isBuild)('build', () => {
   test('should externalize imported packages', async () => {
     // If `vue` is successfully externalized, the page should use the version from the import map

playground/external/external-dep/index.js

@@ -0,0 +1 @@
+export const hello = 'world'

playground/external/external-dep/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "external-dep",
+  "version": "0.0.0",
+  "private": true
+}

playground/external/index.html

@@ -15,6 +15,7 @@
   <body>
     <p>Imported Vue version: <span id="imported-vue-version"></span></p>
     <p>Required Vue version: <span id="required-vue-version"></span></p>
+    <p>Source Vue version: <span id="source-vue-version"></span></p>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>

playground/external/package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "@vitejs/dep-that-imports-vue": "file:./dep-that-imports-vue",
-    "@vitejs/dep-that-requires-vue": "file:./dep-that-requires-vue"
+    "@vitejs/dep-that-requires-vue": "file:./dep-that-requires-vue",
+    "external-dep": "file:./external-dep"
   },
   "devDependencies": {
     "vite": "workspace:*",

playground/external/src/main.js

@@ -1,2 +1,9 @@
+import { version } from 'vue'
 import '@vitejs/dep-that-imports-vue'
 import '@vitejs/dep-that-requires-vue'
+
+text('#source-vue-version', version)
+
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}