vitejs · patak-dev · Aug 21, 2022 · Jul 27, 2022 · Jul 27, 2022 · Jul 27, 2022
diff --git a/packages/vite/src/node/plugins/html.ts b/packages/vite/src/node/plugins/html.ts
@@ -218,6 +218,36 @@ function handleParseError(
   )
 }
 
+/**
+ * Move importmap to top of <head> with `transformIndexHtml`.
+ * Must be added after post plugins.
+ */
+export function htmlImportMapPlugin(): Plugin {
+  const importMapRE =
+    /[ \t]*<script[^>]*type\s*=\s*["']?importmap["']?[^>]*>.*?<\/script>/is
+  return {
+    name: 'vite:html-importmap',
+    transformIndexHtml(html) {
+      // HTML must have head for importmap
+      if (!headPrependInjectRE.test(html)) return
+
+      let importMap: string | undefined
+      html = html.replace(importMapRE, (match) => {
+        importMap = match
+        return ''
+      })
+      if (importMap) {
+        html = html.replace(
+          headPrependInjectRE,
+          (match) => `${match}\n${importMap}`
+        )
+      }
+
+      return html
+    }
+  }
+}
+
 /**
  * Compiles index.html into an entry js module
  */

diff --git a/packages/vite/src/node/plugins/index.ts b/packages/vite/src/node/plugins/index.ts
@@ -12,7 +12,11 @@ import { importAnalysisPlugin } from './importAnalysis'
 import { cssPlugin, cssPostPlugin } from './css'
 import { assetPlugin } from './asset'
 import { clientInjectionsPlugin } from './clientInjections'
-import { buildHtmlPlugin, htmlInlineProxyPlugin } from './html'
+import {
+  buildHtmlPlugin,
+  htmlImportMapPlugin,
+  htmlInlineProxyPlugin
+} from './html'
 import { wasmFallbackPlugin, wasmHelperPlugin } from './wasm'
 import { modulePreloadPolyfillPlugin } from './modulePreloadPolyfill'
 import { webWorkerPlugin } from './worker'
@@ -96,6 +100,7 @@ export async function resolvePlugins(
     // internal server-only plugins are always applied after everything else
     ...(isBuild
       ? []
-      : [clientInjectionsPlugin(config), importAnalysisPlugin(config)])
+      : [clientInjectionsPlugin(config), importAnalysisPlugin(config)]),
+    htmlImportMapPlugin()
   ].filter(Boolean) as Plugin[]
 }
diff --git a/playground/external/__tests__/external.spec.ts b/playground/external/__tests__/external.spec.ts
@@ -1,4 +1,10 @@
-import { isBuild, page } from '~utils'
+import { browserLogs, isBuild, isServe, page } from '~utils'
+
+test.runIf(isServe)('importmap', () => {
+  expect(browserLogs).not.toContain(
+    'An import map is added after module script load was triggered.'
+  )
+})
 
 describe.runIf(isBuild)('build', () => {
   test('should externalize imported packages', async () => {

diff --git a/playground/html/__tests__/html.spec.ts b/playground/html/__tests__/html.spec.ts
@@ -1,5 +1,13 @@
 import { beforeAll, describe, expect, test } from 'vitest'
-import { editFile, getColor, isBuild, isServe, page, viteTestUrl } from '~utils'
+import {
+  browserLogs,
+  editFile,
+  getColor,
+  isBuild,
+  isServe,
+  page,
+  viteTestUrl
+} from '~utils'
 
 function testPage(isNested: boolean) {
   test('pre transform', async () => {
@@ -242,3 +250,9 @@ describe.runIf(isServe)('invalid', () => {
     expect(content).toBeTruthy()
   })
 })
+
+test.runIf(isServe)('importmap', () => {
+  expect(browserLogs).not.toContain(
+    'An import map is added after module script load was triggered.'
+  )
+})
diff --git a/playground/html/vite.config.js b/playground/html/vite.config.js
@@ -160,6 +160,25 @@ ${
           }
         ]
       }
+    },
+    {
+      name: 'head-prepend-importmap',
+      transformIndexHtml() {
+        return [
+          {
+            tag: 'script',
+            attrs: { type: 'importmap' },
+            children: `
+              {
+                "imports": {
+                  "vue": "https://unpkg.com/vue@3.2.0/dist/vue.runtime.esm-browser.js"
+                }
+              }
+            `,
+            injectTo: 'head-prepend'
+          }
+        ]
+      }
     }
   ]
 }