refactor: extract safari-nomodule-fix to a standalone plugin

vuejs · haoqunjiang · Apr 16, 2021 · Apr 14, 2021 · Apr 14, 2021 · Apr 14, 2021
commit 3700d6db1f94fdb1c63eee178afb8218f5a7cd92
diff --git a/packages/@vue/cli-service/__tests__/modernMode.spec.js b/packages/@vue/cli-service/__tests__/modernMode.spec.js
@@ -103,7 +103,7 @@ test('should inject nomodule-fix script when Safari 10 support is required', asy
   let { stdout } = await project.run('vue-cli-service build')
   let index = await project.read('dist/index.html')
   // should inject Safari 10 nomodule fix as an inline script
-  const { safariFix } = require('../lib/webpack/ModernModePlugin')
+  const { safariFix } = require('../lib/webpack/SafariNomoduleFixPlugin')
   expect(index).toMatch(`<script>${safariFix}</script>`)
 
   // `--no-unsafe-inline` option

diff --git a/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js b/packages/@vue/cli-service/lib/commands/build/resolveAppConfig.js
@@ -19,27 +19,33 @@ module.exports = (api, args, options) => {
 
   if (args.module) {
     const ModernModePlugin = require('../../webpack/ModernModePlugin')
+    const SafariNomoduleFixPlugin = require('../../webpack/SafariNomoduleFixPlugin')
+
     if (!args.modernBuild) {
       // Inject plugin to extract build stats and write to disk
       config
-        .plugin('modern-mode-legacy')
-        .use(ModernModePlugin, [{
-          targetDir,
-          isModernBuild: false,
-          unsafeInline: args['unsafe-inline']
-        }])
+      .plugin('modern-mode-legacy')
+      .use(ModernModePlugin, [{
+        targetDir,
+        isModernBuild: false
+      }])
     } else {
-      // Inject plugin to read non-modern build stats and inject HTML
       config
-        .plugin('modern-mode-modern')
-        .use(ModernModePlugin, [{
-          targetDir,
-          isModernBuild: true,
+        .plugin('safari-nomodule-fix')
+        .use(SafariNomoduleFixPlugin, [{
           unsafeInline: args['unsafe-inline'],
           // as we may generate an addition file asset (if `no-unsafe-inline` specified)
           // we need to provide the correct directory for that file to place in
           jsDirectory: require('../../util/getAssetPath')(options, 'js')
         }])
+
+      // Inject plugin to read non-modern build stats and inject HTML
+      config
+        .plugin('modern-mode-modern')
+        .use(ModernModePlugin, [{
+          targetDir,
+          isModernBuild: true
+        }])
     }
   }
 

diff --git a/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js b/packages/@vue/cli-service/lib/webpack/ModernModePlugin.js
@@ -1,26 +1,10 @@
 const fs = require('fs-extra')
 const path = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
-
-const { semver } = require('@vue/cli-shared-utils')
-const { projectModuleTargets } = require('../util/targets')
-
-const minSafariVersion = projectModuleTargets.safari
-const minIOSVersion = projectModuleTargets.ios
-const supportsSafari10 =
-  (minSafariVersion && semver.lt(semver.coerce(minSafariVersion), '11.0.0')) ||
-  (minIOSVersion && semver.lt(semver.coerce(minIOSVersion), '11.0.0'))
-const needsSafariFix = supportsSafari10
-
-// https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
-const safariFix = `!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();`
-
 class ModernModePlugin {
-  constructor ({ targetDir, isModernBuild, unsafeInline, jsDirectory }) {
+  constructor ({ targetDir, isModernBuild }) {
     this.targetDir = targetDir
     this.isModernBuild = isModernBuild
-    this.unsafeInline = unsafeInline
-    this.jsDirectory = jsDirectory
   }
 
   apply (compiler) {
@@ -87,36 +71,6 @@ class ModernModePlugin {
           .filter(a => a.tagName === 'script' && a.attributes)
         legacyAssets.forEach(a => { a.attributes.nomodule = '' })
 
-        if (needsSafariFix) {
-          if (this.unsafeInline) {
-            // inject inline Safari 10 nomodule fix
-            tags.push({
-              tagName: 'script',
-              closeTag: true,
-              innerHTML: safariFix
-            })
-          } else {
-            // inject the fix as an external script
-            const safariFixPath = path.join(this.jsDirectory, 'safari-nomodule-fix.js')
-            const fullSafariFixPath = path.join(compilation.options.output.publicPath, safariFixPath)
-            compilation.assets[safariFixPath] = {
-              source: function () {
-                return Buffer.from(safariFix)
-              },
-              size: function () {
-                return Buffer.byteLength(safariFix)
-              }
-            }
-            tags.push({
-              tagName: 'script',
-              closeTag: true,
-              attributes: {
-                src: fullSafariFixPath
-              }
-            })
-          }
-        }
-
         tags.push(...legacyAssets)
         await fs.remove(tempFilename)
         cb()
@@ -129,5 +83,4 @@ class ModernModePlugin {
   }
 }
 
-ModernModePlugin.safariFix = safariFix
 module.exports = ModernModePlugin
diff --git a/packages/@vue/cli-service/lib/webpack/SafariNomoduleFixPlugin.js b/packages/@vue/cli-service/lib/webpack/SafariNomoduleFixPlugin.js
@@ -0,0 +1,75 @@
+// https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
+const safariFix = `!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();`
+    
+const path = require('path')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { semver } = require('@vue/cli-shared-utils')
+const { projectModuleTargets } = require('../util/targets')
+
+const minSafariVersion = projectModuleTargets.safari
+const minIOSVersion = projectModuleTargets.ios
+const supportsSafari10 =
+  (minSafariVersion && semver.lt(semver.coerce(minSafariVersion), '11.0.0')) ||
+  (minIOSVersion && semver.lt(semver.coerce(minIOSVersion), '11.0.0'))
+const needsSafariFix = supportsSafari10
+
+class SafariNomoduleFixPlugin {
+  constructor ({ unsafeInline, jsDirectory }) {
+    this.unsafeInline = unsafeInline
+    this.jsDirectory = jsDirectory
+  }
+
+  apply (compiler) {
+    if (!needsSafariFix) {
+      return
+    }
+
+    const ID = 'SafariNomoduleFixPlugin'
+    compiler.hooks.compilation.tap(ID, compilation => {
+      HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tap(ID, data => {
+        let scriptTag
+
+        if (this.unsafeInline) {
+          // inject inline Safari 10 nomodule fix
+          scriptTag = {
+            tagName: 'script',
+            closeTag: true,
+            innerHTML: safariFix
+          }
+        } else {
+          // inject the fix as an external script
+          const safariFixPath = path.join(this.jsDirectory, 'safari-nomodule-fix.js')
+          const fullSafariFixPath = path.join(compilation.options.output.publicPath, safariFixPath)
+          compilation.assets[safariFixPath] = {
+            source: function () {
+              return Buffer.from(safariFix)
+            },
+            size: function () {
+              return Buffer.byteLength(safariFix)
+            }
+          }
+          scriptTag = {
+            tagName: 'script',
+            closeTag: true,
+            attributes: {
+              src: fullSafariFixPath
+            }
+          }
+        }
+
+        let tags = data.bodyTags
+        if (data.plugin.options.scriptLoading === 'defer') {
+          tags = data.headTags
+        }
+
+        // insert just before the first actual script tag,
+        // and after all other tags such as `meta`
+        const firstScriptIndex = tags.findIndex(tag => tag.tagName === 'script')
+        tags.splice(firstScriptIndex, 0, scriptTag)
+      })
+    })
+  }
+}
+
+SafariNomoduleFixPlugin.safariFix = safariFix
+module.exports = SafariNomoduleFixPlugin