Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-18 14:41:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webpack): no module scripts in spa modern client mode (#7967)

Browse Source 
[release]
This commit is contained in:
Xin Du (Clark) 2020-08-25 20:26:04 +01:00 committed by GitHub
parent e72d03a49a
commit 11646ba2f6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
packages/webpack/src/plugins/vue/modern.js
View File

@ -7,8 +7,8 @@ import EventEmitter from 'events'
import HtmlWebpackPlugin from 'html-webpack-plugin' import HtmlWebpackPlugin from 'html-webpack-plugin'
import { safariNoModuleFix } from '@nuxt/utils' import { safariNoModuleFix } from '@nuxt/utils'
const assetsMap = {} const legacyTemplateTags = {}
const watcher = new EventEmitter() const legacyTemplateWatcher = new EventEmitter()
export default class ModernModePlugin { export default class ModernModePlugin {
constructor ({ targetDir, isModernBuild, noUnsafeInline }) { constructor ({ targetDir, isModernBuild, noUnsafeInline }) {
@ -25,24 +25,15 @@ export default class ModernModePlugin {
} }
} }
get assets () { getLegacyTemplateTags (name) {
return assetsMap
}
set assets ({ name, content }) {
assetsMap[name] = content
watcher.emit(name)
}
getAssets (name) {
return new Promise((resolve) => { return new Promise((resolve) => {
const asset = this.assets[name] const tags = legacyTemplateTags[name]
if (asset) { if (tags) {
return resolve(asset) return resolve(tags)
} }
return watcher.once(name, () => { return legacyTemplateWatcher.once(name, () => {
const asset = this.assets[name] const tags = legacyTemplateTags[name]
return asset && resolve(asset) return tags && resolve(tags)
}) })
}) })
} }
@ -50,14 +41,13 @@ export default class ModernModePlugin {
applyLegacy (compiler) { applyLegacy (compiler) {
const ID = 'nuxt-legacy-bundle' const ID = 'nuxt-legacy-bundle'
compiler.hooks.compilation.tap(ID, (compilation) => { compiler.hooks.compilation.tap(ID, (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(ID, (data, cb) => { HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tap(ID, (data) => {
// get stats, write to disk HtmlWebpackPlugin.getHooks(compilation).afterEmit.tap(ID, ({ outputName }) => {
this.assets = { // get stats, write to disk
name: data.plugin.options.filename, legacyTemplateTags[data.plugin.options.filename] = data.bodyTags
content: data.bodyTags legacyTemplateWatcher.emit(outputName)
} })
return data
cb()
}) })
}) })
} }
@ -65,7 +55,7 @@ export default class ModernModePlugin {
applyModern (compiler) { applyModern (compiler) {
const ID = 'nuxt-modern-bundle' const ID = 'nuxt-modern-bundle'
compiler.hooks.compilation.tap(ID, (compilation) => { compiler.hooks.compilation.tap(ID, (compilation) => {
HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapAsync(ID, async (data, cb) => { HtmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups.tapPromise(ID, async (data) => {
// use <script type="module"> for modern assets // use <script type="module"> for modern assets
data.bodyTags.forEach((tag) => { data.bodyTags.forEach((tag) => {
if (tag.tagName === 'script' && tag.attributes) { if (tag.tagName === 'script' && tag.attributes) {
@ -85,10 +75,10 @@ export default class ModernModePlugin {
// inject links for legacy assets as <script nomodule> // inject links for legacy assets as <script nomodule>
const fileName = data.plugin.options.filename const fileName = data.plugin.options.filename
const legacyAssets = (await this.getAssets(fileName)) const legacyScriptTags = (await this.getLegacyTemplateTags(fileName))
.filter(a => a.tagName === 'script' && a.attributes) .filter(a => a.tagName === 'script' && a.attributes)
for (const a of legacyAssets) { for (const a of legacyScriptTags) {
a.attributes.nomodule = true a.attributes.nomodule = true
data.bodyTags.push(a) data.bodyTags.push(a)
} }
@ -96,7 +86,7 @@ export default class ModernModePlugin {
if (this.noUnsafeInline) { if (this.noUnsafeInline) {
// inject the fix as an external script // inject the fix as an external script
const safariFixFilename = 'safari-nomodule-fix.js' const safariFixFilename = 'safari-nomodule-fix.js'
const safariFixPath = legacyAssets[0].attributes.src const safariFixPath = legacyScriptTags[0].attributes.src
.split('/') .split('/')
.slice(0, -1) .slice(0, -1)
.concat([safariFixFilename]) .concat([safariFixFilename])
@ -122,8 +112,9 @@ export default class ModernModePlugin {
}) })
} }
delete assetsMap[fileName] delete legacyTemplateTags[fileName]
cb()
return data
}) })
}) })
} }