Zengtudor
/
Nuxt
mirror of https://github.com/nuxt/nuxt.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(vite)!: upgrade vite to v3 (#5398)

This commit is contained in:
Daniel Roe 2022-07-21 11:44:33 +01:00 committed by GitHub
parent 2e794e7a19
commit fa8b0f7c79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 178 additions and 235 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -42,7 +42,7 @@
"nuxi": "link:./packages/nuxi",
"nuxt": "link:./packages/nuxt",
"nuxt3": "link:./packages/nuxt",
"vite": "^2.9.14",
"vite": "~3.0.0",
"unbuild": "^0.7.6"
},
"devDependencies": {

4
packages/nuxt/src/components/loader.ts
View File

@ -31,8 +31,8 @@ export const loaderPlugin = createUnplugin((options: LoaderOptions) => {
const { pathname, search } = parseURL(decodeURIComponent(pathToFileURL(id).href))
const query = parseQuery(search)
// we only transform render functions
// from `type=template` (in Webpack) and bare `.vue` file (in Vite)
return pathname.endsWith('.vue') && (query.type === 'template' || !!query.macro || !search)
// from `type=template` (in Webpack), bare `.vue` file and setup=true (Vite 2/3)
return pathname.endsWith('.vue') && (query.type === 'template' || !!query.macro || !!query.setup || !search)
},
transform (code, id) {
const components = options.getComponents()

5
packages/nuxt/src/core/nitro.ts
View File

@ -41,10 +41,7 @@ export async function initNitro (nuxt: Nuxt) {
generateTsConfig: false
},
publicAssets: [
{
baseURL: nuxt.options.app.buildAssetsDir,
dir: resolve(nuxt.options.buildDir, 'dist/client')
},
{ dir: resolve(nuxt.options.buildDir, 'dist/client') },
...nuxt.options._layers
.map(layer => join(layer.config.srcDir, layer.config.dir?.public || 'public'))
.filter(dir => existsSync(dir))

5
packages/nuxt/src/core/templates.ts
View File

@ -211,7 +211,10 @@ export const publicPathTemplate: NuxtTemplate = {
'export const publicAssetsURL = (...path) => {',
' const publicBase = appConfig.cdnURL || appConfig.baseURL',
' return path.length ? joinURL(publicBase, ...path) : publicBase',
'}'
'}',
'globalThis.__buildAssetsURL = buildAssetsURL',
'globalThis.__publicAssetsURL = publicAssetsURL'
].filter(Boolean).join('\n')
}
}

4
packages/nuxt/src/pages/macros.ts
View File

@ -3,6 +3,7 @@ import { createUnplugin } from 'unplugin'
import { parseQuery, parseURL, withQuery } from 'ufo'
import { findStaticImports, findExports } from 'mlly'
import MagicString from 'magic-string'
import { isAbsolute } from 'pathe'
export interface TransformMacroPluginOptions {
macros: Record<string, string>
@ -48,7 +49,8 @@ export const TransformMacroPlugin = createUnplugin((options: TransformMacroPlugi
if (scriptImport) {
// https://github.com/vuejs/vue-loader/pull/1911
// https://github.com/vitejs/vite/issues/8473
const parsed = parseURL(scriptImport.specifier.replace('?macro=true', ''))
const url = isAbsolute(scriptImport.specifier) ? pathToFileURL(scriptImport.specifier).href : scriptImport.specifier
const parsed = parseURL(decodeURIComponent(url).replace('?macro=true', ''))
const specifier = withQuery(parsed.pathname, { macro: 'true', ...parseQuery(parsed.search) })
s.overwrite(0, code.length, `export { meta } from "${specifier}"`)
return result()

2
packages/schema/package.json
View File

@ -17,7 +17,7 @@
"@types/lodash.template": "^4",
"@types/semver": "^7",
"unbuild": "latest",
"vite": "^2.9.14"
"vite": "~3.0.0"
},
"dependencies": {
"c12": "^0.2.8",

9
packages/schema/src/config/vite.ts
View File

@ -1,5 +1,5 @@
import { resolve } from 'pathe'
import { joinURL, withoutLeadingSlash } from 'ufo'
import { withoutLeadingSlash } from 'ufo'
export default {
/**
@ -28,11 +28,6 @@ export default {
resolve: {
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
base: {
$resolve: (val, get) => val ?? get('dev')
? joinURL(get('app').baseURL, get('app').buildAssetsDir)
: '/__NUXT_BASE__/',
},
publicDir: {
$resolve: (val, get) => val ?? resolve(get('srcDir'), get('dir').public),
},
@ -61,7 +56,7 @@ export default {
clearScreen: false,
build: {
assetsDir: {
$resolve: (val, get) => val ?? get('dev') ? withoutLeadingSlash(get('app').buildAssetsDir) : '.',
$resolve: (val, get) => val ?? withoutLeadingSlash(get('app').buildAssetsDir),
},
emptyOutDir: false,
},

6
packages/vite/package.json
View File

@ -21,8 +21,8 @@
"dependencies": {
"@nuxt/kit": "^3.0.0-rc.6",
"@rollup/plugin-replace": "^4.0.0",
"@vitejs/plugin-vue": "^2.3.3",
"@vitejs/plugin-vue-jsx": "^1.3.10",
"@vitejs/plugin-vue": "^3.0.0",
"@vitejs/plugin-vue-jsx": "^2.0.0",
"autoprefixer": "^10.4.7",
"chokidar": "^3.5.3",
"cssnano": "^5.1.12",
@ -47,7 +47,7 @@
"rollup-plugin-visualizer": "^5.7.1",
"ufo": "^0.8.5",
"unplugin": "^0.7.2",
"vite": "^2.9.14",
"vite": "~3.0.0",
"vite-node": "^0.18.1",
"vite-plugin-checker": "^0.4.9"
},

44
packages/vite/src/client.ts
View File

@ -1,21 +1,36 @@
import { resolve } from 'pathe'
import { join, resolve } from 'pathe'
import * as vite from 'vite'
import vuePlugin from '@vitejs/plugin-vue'
import viteJsxPlugin from '@vitejs/plugin-vue-jsx'
import type { Connect } from 'vite'
import { logger } from '@nuxt/kit'
import { joinURL } from 'ufo'
import { getPort } from 'get-port-please'
import { joinURL, withLeadingSlash, withoutLeadingSlash, withTrailingSlash } from 'ufo'
import escapeRE from 'escape-string-regexp'
import { cacheDirPlugin } from './plugins/cache-dir'
import { analyzePlugin } from './plugins/analyze'
import { wpfs } from './utils/wpfs'
import type { ViteBuildContext, ViteOptions } from './vite'
import { writeManifest } from './manifest'
import { devStyleSSRPlugin } from './plugins/dev-ssr-css'
import { RelativeAssetPlugin } from './plugins/dynamic-base'
import { viteNodePlugin } from './vite-node'
export async function buildClient (ctx: ViteBuildContext) {
const hmrPortDefault = 24678 // Vite's default HMR port
const hmrPort = await getPort({
port: hmrPortDefault,
ports: Array.from({ length: 20 }, (_, i) => hmrPortDefault + 1 + i)
})
const clientConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, {
experimental: {
renderBuiltUrl: (filename, { type, hostType }) => {
if (hostType !== 'js' || type === 'asset') {
// In CSS we only use relative paths until we craft a clever runtime CSS hack
return { relative: true }
}
return { runtime: `globalThis.__publicAssetsURL(${JSON.stringify(filename)})` }
}
},
define: {
'process.server': false,
'process.client': true,
@ -30,8 +45,10 @@ export async function buildClient (ctx: ViteBuildContext) {
build: {
rollupOptions: {
output: {
chunkFileNames: ctx.nuxt.options.dev ? undefined : '[name]-[hash].mjs',
entryFileNames: ctx.nuxt.options.dev ? 'entry.mjs' : '[name]-[hash].mjs'
// https://github.com/vitejs/vite/tree/main/packages/vite/src/node/build.ts#L464-L478
assetFileNames: ctx.nuxt.options.dev ? undefined : withoutLeadingSlash(join(ctx.nuxt.options.app.buildAssetsDir, '[name].[hash].[ext]')),
chunkFileNames: ctx.nuxt.options.dev ? undefined : withoutLeadingSlash(join(ctx.nuxt.options.app.buildAssetsDir, '[name].[hash].mjs')),
entryFileNames: ctx.nuxt.options.dev ? 'entry.mjs' : withoutLeadingSlash(join(ctx.nuxt.options.app.buildAssetsDir, '[name].[hash].mjs'))
}
},
manifest: true,
@ -41,18 +58,30 @@ export async function buildClient (ctx: ViteBuildContext) {
cacheDirPlugin(ctx.nuxt.options.rootDir, 'client'),
vuePlugin(ctx.config.vue),
viteJsxPlugin(),
RelativeAssetPlugin(),
devStyleSSRPlugin({
rootDir: ctx.nuxt.options.rootDir,
buildAssetsURL: joinURL(ctx.nuxt.options.app.baseURL, ctx.nuxt.options.app.buildAssetsDir)
}),
viteNodePlugin(ctx)
],
appType: 'custom',
server: {
hmr: {
// https://github.com/nuxt/framework/issues/4191
protocol: 'ws',
clientPort: hmrPort,
port: hmrPort
},
middlewareMode: true
}
} as ViteOptions)
// In build mode we explicitly override any vite options that vite is relying on
// to detect whether to inject production or development code (such as HMR code)
if (!ctx.nuxt.options.dev) {
clientConfig.server.hmr = false
}
// Add analyze plugin if needed
if (ctx.nuxt.options.build.analyze) {
clientConfig.plugins.push(...analyzePlugin(ctx))
@ -65,10 +94,11 @@ export async function buildClient (ctx: ViteBuildContext) {
const viteServer = await vite.createServer(clientConfig)
ctx.clientServer = viteServer
await ctx.nuxt.callHook('vite:serverCreated', viteServer, { isClient: true, isServer: false })
const BASE_RE = new RegExp(`^${escapeRE(withTrailingSlash(withLeadingSlash(joinURL(ctx.nuxt.options.app.baseURL, ctx.nuxt.options.app.buildAssetsDir))))}`)
const viteMiddleware: Connect.NextHandleFunction = (req, res, next) => {
// Workaround: vite devmiddleware modifies req.url
const originalURL = req.url
req.url = req.url.replace(BASE_RE, '/')
viteServer.middlewares.handle(req, res, (err) => {
req.url = originalURL
next(err)

8
packages/vite/src/dev-bundler.ts
View File

@ -1,7 +1,7 @@
import { pathToFileURL } from 'node:url'
import { existsSync } from 'node:fs'
import { builtinModules } from 'node:module'
import { resolve } from 'pathe'
import { isAbsolute, resolve } from 'pathe'
import * as vite from 'vite'
import { ExternalsOptions, isExternal as _isExternal, ExternalsDefaults } from 'externality'
import { genDynamicImport, genObjectFromRawEntries } from 'knitwork'
@ -77,7 +77,7 @@ async function transformRequest (opts: TransformOptions, id: string) {
if (await isExternal(opts, withoutVersionQuery)) {
const path = builtinModules.includes(withoutVersionQuery.split('node:').pop())
? withoutVersionQuery
: pathToFileURL(withoutVersionQuery).href
: isAbsolute(withoutVersionQuery) ? pathToFileURL(withoutVersionQuery).href : withoutVersionQuery
return {
code: `(global, module, _, exports, importMeta, ssrImport, ssrDynamicImport, ssrExportAll) =>
${genDynamicImport(path, { wrapper: false })}
@ -140,11 +140,11 @@ export async function bundleRequest (opts: TransformOptions, entryURL: string) {
// Parents: \n${listIds(chunk.parents)}
// Dependencies: \n${listIds(chunk.deps)}
// --------------------
const ${hashId(chunk.id)} = ${chunk.code}
const ${hashId(chunk.id + '-' + chunk.code)} = ${chunk.code}
`).join('\n')
const manifestCode = `const __modules__ = ${
genObjectFromRawEntries(chunks.map(chunk => [chunk.id, hashId(chunk.id)]))
genObjectFromRawEntries(chunks.map(chunk => [chunk.id, hashId(chunk.id + '-' + chunk.code)]))
}`
// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/ssr/ssrModuleLoader.ts

15
packages/vite/src/manifest.ts
View File

@ -1,6 +1,7 @@
import fse from 'fs-extra'
import { resolve } from 'pathe'
import { joinURL } from 'ufo'
import { joinURL, withoutLeadingSlash, withTrailingSlash } from 'ufo'
import escapeRE from 'escape-string-regexp'
import type { ViteBuildContext } from './vite'
export async function writeManifest (ctx: ViteBuildContext, extraEntries: string[] = []) {
@ -27,6 +28,18 @@ export async function writeManifest (ctx: ViteBuildContext, extraEntries: string
? devClientManifest
: await fse.readJSON(resolve(clientDist, 'manifest.json'))
const BASE_RE = new RegExp(`^${escapeRE(withTrailingSlash(withoutLeadingSlash(joinURL(ctx.nuxt.options.app.baseURL, ctx.nuxt.options.app.buildAssetsDir))))}`)
for (const key in clientManifest) {
if (clientManifest[key].file) {
clientManifest[key].file = clientManifest[key].file.replace(BASE_RE, '')
}
for (const item of ['css', 'assets']) {
if (clientManifest[key][item]) {
clientManifest[key][item] = clientManifest[key][item].map(i => i.replace(BASE_RE, ''))
}
}
}
await fse.mkdirp(serverDist)
await fse.writeFile(resolve(serverDist, 'client.manifest.json'), JSON.stringify(clientManifest, null, 2), 'utf8')
await fse.writeFile(resolve(serverDist, 'client.manifest.mjs'), 'export default ' + JSON.stringify(clientManifest, null, 2), 'utf8')

103
packages/vite/src/plugins/dynamic-base.ts
View File

@ -1,103 +0,0 @@
import { createUnplugin } from 'unplugin'
import escapeRE from 'escape-string-regexp'
import type { Plugin } from 'vite'
import MagicString from 'magic-string'
interface DynamicBasePluginOptions {
globalPublicPath?: string
sourcemap?: boolean
}
export const RelativeAssetPlugin = function (): Plugin {
return {
name: 'nuxt:vite-relative-asset',
generateBundle (_, bundle) {
const generatedAssets = Object.entries(bundle).filter(([_, asset]) => asset.type === 'asset').map(([key]) => escapeRE(key))
const assetRE = new RegExp(`\\/__NUXT_BASE__\\/(${generatedAssets.join('|')})`, 'g')
for (const file in bundle) {
const asset = bundle[file]
if (asset.fileName.includes('legacy') && asset.type === 'chunk' && asset.code.includes('innerHTML')) {
for (const delimiter of ['`', '"', "'"]) {
asset.code = asset.code.replace(
new RegExp(`(?<=innerHTML=)${delimiter}([^${delimiter}]*)\\/__NUXT_BASE__\\/([^${delimiter}]*)${delimiter}`, 'g'),
/* eslint-disable-next-line no-template-curly-in-string */
'`$1${(window?.__NUXT__?.config.app.cdnURL || window?.__NUXT__?.config.app.baseURL) + window?.__NUXT__?.config.app.buildAssetsDir.slice(1)}$2`'
)
}
}
if (asset.type === 'asset' && typeof asset.source === 'string' && asset.fileName.endsWith('.css')) {
const depth = file.split('/').length - 1
const assetBase = depth === 0 ? '.' : Array.from({ length: depth }).map(() => '..').join('/')
const publicBase = Array.from({ length: depth + 1 }).map(() => '..').join('/')
asset.source = asset.source
.replace(assetRE, r => r.replace(/\/__NUXT_BASE__/g, assetBase))
.replace(/\/__NUXT_BASE__/g, publicBase)
}
if (asset.type === 'chunk' && typeof asset.code === 'string') {
asset.code = asset.code
.replace(/`\$\{(_?_?publicAssetsURL|buildAssetsURL|)\(\)\}([^`]*)`/g, '$1(`$2`)')
.replace(/"\/__NUXT_BASE__\/([^"]*)"\.replace\("\/__NUXT_BASE__", ""\)/g, '"$1"')
.replace(/'\/__NUXT_BASE__\/([^']*)'\.replace\("\/__NUXT_BASE__", ""\)/g, '"$1"')
}
}
}
}
}
const VITE_ASSET_RE = /^export default ["'](__VITE_ASSET.*)["']$/
export const DynamicBasePlugin = createUnplugin(function (options: DynamicBasePluginOptions = {}) {
return {
name: 'nuxt:dynamic-base-path',
resolveId (id) {
if (id.startsWith('/__NUXT_BASE__')) {
return id.replace('/__NUXT_BASE__', '')
}
return null
},
enforce: 'post',
transform (code, id) {
const s = new MagicString(code)
if (options.globalPublicPath && id.includes('paths.mjs') && code.includes('const appConfig = ')) {
s.append(`${options.globalPublicPath} = buildAssetsURL();\n`)
}
const assetId = code.match(VITE_ASSET_RE)
if (assetId) {
s.overwrite(0, code.length,
[
'import { buildAssetsURL } from \'#build/paths.mjs\';',
`export default buildAssetsURL("${assetId[1]}".replace("/__NUXT_BASE__", ""));`
].join('\n')
)
}
if (!id.includes('paths.mjs') && code.includes('NUXT_BASE') && !code.includes('import { publicAssetsURL as __publicAssetsURL }')) {
s.prepend('import { publicAssetsURL as __publicAssetsURL } from \'#build/paths.mjs\';\n')
}
if (id === 'vite/preload-helper') {
// Define vite base path as buildAssetsUrl (i.e. including _nuxt/)
s.prepend('import { buildAssetsURL } from \'#build/paths.mjs\';\n')
s.replace(/const base = ['"]\/__NUXT_BASE__\/['"]/, 'const base = buildAssetsURL()')
}
// Sanitize imports
s.replace(/from *['"]\/__NUXT_BASE__(\/[^'"]*)['"]/g, 'from "$1"')
// Dynamically compute string URLs featuring baseURL
const delimiterRE = /(?<!(const base = |from *))((?<!\\)`([^`]*)\/__NUXT_BASE__\/([^`]*)(?<!\\)`|(?<!\\)'([^\n']*)\/__NUXT_BASE__\/([^\n']*)(?<!\\)'|(?<!\\)"([^\n"]*)\/__NUXT_BASE__\/([^\n"]*)(?<!\\)")/g
/* eslint-disable-next-line no-template-curly-in-string */
s.replace(delimiterRE, r => '`' + r.replace(/\/__NUXT_BASE__\//g, '${__publicAssetsURL()}').slice(1, -1) + '`')
if (s.hasChanged()) {
return {
code: s.toString(),
map: options.sourcemap && s.generateMap({ source: id, includeContent: true })
}
}
}
}
})

74
packages/vite/src/server.ts
View File

@ -1,23 +1,40 @@
import { resolve, join, normalize } from 'pathe'
import { resolve, normalize } from 'pathe'
import * as vite from 'vite'
import vuePlugin from '@vitejs/plugin-vue'
import viteJsxPlugin from '@vitejs/plugin-vue-jsx'
import { logger, resolveModule, isIgnored } from '@nuxt/kit'
import fse from 'fs-extra'
import { debounce } from 'perfect-debounce'
import { withoutTrailingSlash } from 'ufo'
import { joinURL, withoutLeadingSlash, withTrailingSlash } from 'ufo'
import { ViteBuildContext, ViteOptions } from './vite'
import { wpfs } from './utils/wpfs'
import { cacheDirPlugin } from './plugins/cache-dir'
import { prepareDevServerEntry } from './vite-node'
import { isCSS, isDirectory, readDirRecursively } from './utils'
import { isCSS } from './utils'
import { bundleRequest } from './dev-bundler'
import { writeManifest } from './manifest'
import { RelativeAssetPlugin } from './plugins/dynamic-base'
export async function buildServer (ctx: ViteBuildContext) {
const _resolve = id => resolveModule(id, { paths: ctx.nuxt.options.modulesDir })
const serverConfig: vite.InlineConfig = vite.mergeConfig(ctx.config, {
base: ctx.nuxt.options.dev
? joinURL(ctx.nuxt.options.app.baseURL, ctx.nuxt.options.app.buildAssetsDir)
: undefined,
experimental: {
renderBuiltUrl: (filename, { type, hostType }) => {
if (hostType !== 'js') {
// In CSS we only use relative paths until we craft a clever runtime CSS hack
return { relative: true }
}
if (type === 'public') {
return { runtime: `globalThis.__publicAssetsURL(${JSON.stringify(filename)})` }
}
if (type === 'asset') {
const relativeFilename = filename.replace(withTrailingSlash(withoutLeadingSlash(ctx.nuxt.options.app.buildAssetsDir)), '')
return { runtime: `globalThis.__buildAssetsURL(${JSON.stringify(relativeFilename)})` }
}
}
},
define: {
'process.server': true,
'process.client': false,
@ -30,21 +47,22 @@ export async function buildServer (ctx: ViteBuildContext) {
resolve: {
alias: {
'#build/plugins': resolve(ctx.nuxt.options.buildDir, 'plugins/server'),
// Alias vue to ensure we're using the same context in development
'vue/server-renderer': _resolve('vue/server-renderer'),
'vue/compiler-sfc': _resolve('vue/compiler-sfc'),
...ctx.nuxt.options.experimental.externalVue
...ctx.nuxt.options.experimental.externalVue || ctx.nuxt.options.dev
? {}
: {
'@vue/reactivity': _resolve(`@vue/reactivity/dist/reactivity.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`),
'@vue/shared': _resolve(`@vue/shared/dist/shared.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`),
'vue-router': _resolve(`vue-router/dist/vue-router.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`)
},
vue: _resolve(`vue/dist/vue.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`)
'vue-router': _resolve(`vue-router/dist/vue-router.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`),
'vue/server-renderer': _resolve('vue/server-renderer'),
'vue/compiler-sfc': _resolve('vue/compiler-sfc'),
vue: _resolve(`vue/dist/vue.cjs${ctx.nuxt.options.dev ? '' : '.prod'}.js`)
}
}
},
ssr: {
external: ctx.nuxt.options.experimental.externalVue ? ['#internal/nitro', 'vue', 'vue-router'] : ['#internal/nitro'],
external: ctx.nuxt.options.experimental.externalVue
? ['#internal/nitro', '#internal/nitro/utils', 'vue', 'vue-router']
: ['#internal/nitro', '#internal/nitro/utils'],
noExternal: [
...ctx.nuxt.options.build.transpile,
// TODO: Use externality for production (rollup) build
@ -81,7 +99,6 @@ export async function buildServer (ctx: ViteBuildContext) {
},
plugins: [
cacheDirPlugin(ctx.nuxt.options.rootDir, 'server'),
RelativeAssetPlugin(),
vuePlugin(ctx.config.vue),
viteJsxPlugin()
]
@ -95,37 +112,6 @@ export async function buildServer (ctx: ViteBuildContext) {
await ctx.nuxt.callHook('vite:extendConfig', serverConfig, { isClient: false, isServer: true })
ctx.nuxt.hook('nitro:build:before', async () => {
if (ctx.nuxt.options.dev) {
return
}
const clientDist = resolve(ctx.nuxt.options.buildDir, 'dist/client')
// Remove public files that have been duplicated into buildAssetsDir
// TODO: Add option to configure this behavior in vite
const publicDir = join(ctx.nuxt.options.srcDir, ctx.nuxt.options.dir.public)
let publicFiles: string[] = []
if (await isDirectory(publicDir)) {
publicFiles = readDirRecursively(publicDir).map(r => r.replace(publicDir, ''))
for (const file of publicFiles) {
try {
fse.rmSync(join(clientDist, file))
} catch {}
}
}
// Copy doubly-nested /_nuxt/_nuxt files into buildAssetsDir
// TODO: Workaround vite issue
if (await isDirectory(clientDist)) {
const nestedAssetsPath = withoutTrailingSlash(join(clientDist, ctx.nuxt.options.app.buildAssetsDir))
if (await isDirectory(nestedAssetsPath)) {
await fse.copy(nestedAssetsPath, clientDist, { recursive: true })
await fse.remove(nestedAssetsPath)
}
}
})
const onBuild = () => ctx.nuxt.callHook('build:resources', wpfs)
// Production build

18
packages/vite/src/vite.ts
View File

@ -6,11 +6,9 @@ import { logger, isIgnored } from '@nuxt/kit'
import type { Options } from '@vitejs/plugin-vue'
import replace from '@rollup/plugin-replace'
import { sanitizeFilePath } from 'mlly'
import { getPort } from 'get-port-please'
import { buildClient } from './client'
import { buildServer } from './server'
import virtual from './plugins/virtual'
import { DynamicBasePlugin } from './plugins/dynamic-base'
import { warmupViteServer } from './utils/warmup'
import { resolveCSSOptions } from './css'
import { composableKeysPlugin } from './plugins/composable-keys'
@ -28,12 +26,6 @@ export interface ViteBuildContext {
}
export async function bundle (nuxt: Nuxt) {
const hmrPortDefault = 24678 // Vite's default HMR port
const hmrPort = await getPort({
port: hmrPortDefault,
ports: Array.from({ length: 20 }, (_, i) => hmrPortDefault + 1 + i)
})
const ctx: ViteBuildContext = {
nuxt,
config: vite.mergeConfig(
@ -74,20 +66,13 @@ export async function bundle (nuxt: Nuxt) {
...Object.fromEntries([';', '(', '{', '}', ' ', '\t', '\n'].map(d => [`${d}global.`, `${d}globalThis.`])),
preventAssignment: true
}),
virtual(nuxt.vfs),
DynamicBasePlugin.vite({ sourcemap: nuxt.options.sourcemap })
virtual(nuxt.vfs)
],
vue: {
reactivityTransform: nuxt.options.experimental.reactivityTransform
},
server: {
watch: { ignored: isIgnored },
hmr: {
// https://github.com/nuxt/framework/issues/4191
protocol: 'ws',
clientPort: hmrPort,
port: hmrPort
},
fs: {
allow: [
nuxt.options.appDir
@ -102,7 +87,6 @@ export async function bundle (nuxt: Nuxt) {
// In build mode we explicitly override any vite options that vite is relying on
// to detect whether to inject production or development code (such as HMR code)
if (!nuxt.options.dev) {
ctx.config.server.hmr = false
ctx.config.server.watch = undefined
ctx.config.build.watch = undefined
}

31
packages/webpack/src/plugins/dynamic-base.ts Normal file
View File

@ -0,0 +1,31 @@
import { createUnplugin } from 'unplugin'
import MagicString from 'magic-string'
interface DynamicBasePluginOptions {
globalPublicPath?: string
sourcemap?: boolean
}
const defaults: DynamicBasePluginOptions = {
globalPublicPath: '__webpack_public_path__',
sourcemap: true
}
export const DynamicBasePlugin = createUnplugin((options: DynamicBasePluginOptions = {}) => {
options = { ...defaults, ...options }
return {
name: 'nuxt:dynamic-base-path',
enforce: 'post',
transform (code, id) {
if (!id.includes('paths.mjs') || !code.includes('const appConfig = ')) {
return
}
const s = new MagicString(code)
s.append(`${options.globalPublicPath} = buildAssetsURL();\n`)
return {
code: s.toString(),
map: options.sourcemap && s.generateMap({ source: id, includeContent: true })
}
}
}
})

2
packages/webpack/src/presets/base.ts
View File

@ -196,7 +196,7 @@ function getOutput (ctx: WebpackConfigContext): webpack.Configuration['output']
const { options } = ctx
return {
path: resolve(options.buildDir, 'dist', ctx.isServer ? 'server' : 'client'),
path: resolve(options.buildDir, 'dist', ctx.isServer ? 'server' : joinURL('client', options.app.buildAssetsDir)),
filename: fileName(ctx, 'app'),
chunkFilename: fileName(ctx, 'chunk'),
publicPath: joinURL(options.app.baseURL, options.app.buildAssetsDir)

5
packages/webpack/src/webpack.ts
View File

@ -8,8 +8,8 @@ import type { Compiler, Watching } from 'webpack'
import type { Nuxt } from '@nuxt/schema'
import { joinURL } from 'ufo'
import { logger, useNuxt } from '@nuxt/kit'
import { DynamicBasePlugin } from '../../vite/src/plugins/dynamic-base'
import { composableKeysPlugin } from '../../vite/src/plugins/composable-keys'
import { DynamicBasePlugin } from './plugins/dynamic-base'
import { createMFS } from './utils/mfs'
import { registerVirtualModules } from './virtual-modules'
import { client, server } from './configs'
@ -35,8 +35,7 @@ export async function bundle (nuxt: Nuxt) {
// Configure compilers
const compilers = webpackConfigs.map((config) => {
config.plugins.push(DynamicBasePlugin.webpack({
sourcemap: nuxt.options.sourcemap,
globalPublicPath: '__webpack_public_path__'
sourcemap: nuxt.options.sourcemap
}))
config.plugins.push(composableKeysPlugin.webpack({
sourcemap: nuxt.options.sourcemap,

8
vitest.config.ts
View File

@ -3,9 +3,11 @@ import { defineConfig } from 'vite'
import { isWindows } from 'std-env'
export default defineConfig({
alias: {
'#app': resolve('./packages/nuxt/src/app/index.ts'),
'@nuxt/test-utils': resolve('./packages/test-utils/src/index.ts')
resolve: {
alias: {
'#app': resolve('./packages/nuxt/src/app/index.ts'),
'@nuxt/test-utils': resolve('./packages/test-utils/src/index.ts')
}
},
esbuild: {
tsconfigRaw: '{}'

68
yarn.lock
View File

@ -48,7 +48,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/core@npm:^7.17.7, @babel/core@npm:^7.17.9":
"@babel/core@npm:^7.17.7, @babel/core@npm:^7.18.6":
version: 7.18.6
resolution: "@babel/core@npm:7.18.6"
dependencies:
@ -408,7 +408,7 @@ __metadata:
languageName: node
linkType: hard
"@babel/plugin-transform-typescript@npm:^7.16.8":
"@babel/plugin-transform-typescript@npm:^7.18.8":
version: 7.18.8
resolution: "@babel/plugin-transform-typescript@npm:7.18.8"
dependencies:
@ -1805,7 +1805,7 @@ __metadata:
ufo: ^0.8.5
unbuild: latest
unimport: ^0.4.5
vite: ^2.9.14
vite: ~3.0.0
languageName: unknown
linkType: soft
@ -1896,8 +1896,8 @@ __metadata:
"@nuxt/schema": ^3.0.0-rc.6
"@rollup/plugin-replace": ^4.0.0
"@types/cssnano": ^5
"@vitejs/plugin-vue": ^2.3.3
"@vitejs/plugin-vue-jsx": ^1.3.10
"@vitejs/plugin-vue": ^3.0.0
"@vitejs/plugin-vue-jsx": ^2.0.0
autoprefixer: ^10.4.7
chokidar: ^3.5.3
cssnano: ^5.1.12
@ -1923,7 +1923,7 @@ __metadata:
ufo: ^0.8.5
unbuild: latest
unplugin: ^0.7.2
vite: ^2.9.14
vite: ~3.0.0
vite-node: ^0.18.1
vite-plugin-checker: ^0.4.9
vue: 3.2.37
@ -2277,7 +2277,7 @@ __metadata:
languageName: node
linkType: hard
"@rollup/pluginutils@npm:^4.1.1, @rollup/pluginutils@npm:^4.2.0, @rollup/pluginutils@npm:^4.2.1":
"@rollup/pluginutils@npm:^4.1.1, @rollup/pluginutils@npm:^4.2.1":
version: 4.2.1
resolution: "@rollup/pluginutils@npm:4.2.1"
dependencies:
@ -3014,27 +3014,28 @@ __metadata:
languageName: node
linkType: hard
"@vitejs/plugin-vue-jsx@npm:^1.3.10":
version: 1.3.10
resolution: "@vitejs/plugin-vue-jsx@npm:1.3.10"
"@vitejs/plugin-vue-jsx@npm:^2.0.0":
version: 2.0.0
resolution: "@vitejs/plugin-vue-jsx@npm:2.0.0"
dependencies:
"@babel/core": ^7.17.9
"@babel/core": ^7.18.6
"@babel/plugin-syntax-import-meta": ^7.10.4
"@babel/plugin-transform-typescript": ^7.16.8
"@rollup/pluginutils": ^4.2.0
"@babel/plugin-transform-typescript": ^7.18.8
"@vue/babel-plugin-jsx": ^1.1.1
hash-sum: ^2.0.0
checksum: 868e90363e1234be43c3ced5097c8da430b9feed526c1f6c2dcc8a0546182e942018e6b5e1a0c16c66810b82cd17fa3a8e04ba969db6f253c6f7c490dce83a0b
peerDependencies:
vite: ^3.0.0
vue: ^3.0.0
checksum: 197b0dd0263b5b7df22a055155da6d9b7f21098f7de43e94589ce8daa494c12c9850157bc4e228a766fbe602aafa5935e4bef0edec9158a0507cee5581f0a067
languageName: node
linkType: hard
"@vitejs/plugin-vue@npm:^2.3.3":
version: 2.3.3
resolution: "@vitejs/plugin-vue@npm:2.3.3"
"@vitejs/plugin-vue@npm:^3.0.0":
version: 3.0.0
resolution: "@vitejs/plugin-vue@npm:3.0.0"
peerDependencies:
vite: ^2.5.10
vite: ^3.0.0
vue: ^3.2.25
checksum: 9303dcb9c8580d0ee9b33542639ac1a36ad9cc0e773a1f9b9b05623d74574f6a901ce781918b53f5a58eb3c6218ba96c27ef6efbf3e7ef6be16864fc1cae1626
checksum: e2c3e31afc39f83b16174ef4742e88e07b5516688f02dcbe9814afd62c859925173ec2d6a9f088c6098eb45cdae926122308596a8ece90028ffea169f15c685f
languageName: node
linkType: hard
@ -5708,7 +5709,7 @@ __metadata:
languageName: node
linkType: hard
"esbuild@npm:^0.14.27, esbuild@npm:^0.14.39, esbuild@npm:^0.14.47, esbuild@npm:^0.14.49":
"esbuild@npm:^0.14.39, esbuild@npm:^0.14.47, esbuild@npm:^0.14.49":
version: 0.14.49
resolution: "esbuild@npm:0.14.49"
dependencies:
@ -11353,7 +11354,7 @@ __metadata:
languageName: node
linkType: hard
"resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0":
"resolve@npm:^1.1.7, resolve@npm:^1.10.0, resolve@npm:^1.10.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.0, resolve@npm:^1.22.1":
version: 1.22.1
resolution: "resolve@npm:1.22.1"
dependencies:
@ -11366,7 +11367,7 @@ __metadata:
languageName: node
linkType: hard
"resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>":
"resolve@patch:resolve@^1.1.7#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.10.1#~builtin<compat/resolve>, resolve@patch:resolve@^1.17.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.19.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.20.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.0#~builtin<compat/resolve>, resolve@patch:resolve@^1.22.1#~builtin<compat/resolve>":
version: 1.22.1
resolution: "resolve@patch:resolve@npm%3A1.22.1#~builtin<compat/resolve>::version=1.22.1&hash=07638b"
dependencies:
@ -11512,7 +11513,7 @@ __metadata:
languageName: node
linkType: hard
"rollup@npm:^2.59.0, rollup@npm:^2.76.0":
"rollup@npm:^2.75.6, rollup@npm:^2.76.0":
version: 2.76.0
resolution: "rollup@npm:2.76.0"
dependencies:
@ -13217,19 +13218,20 @@ __metadata:
languageName: node
linkType: hard
"vite@npm:^2.9.14":
version: 2.9.14
resolution: "vite@npm:2.9.14"
"vite@npm:~3.0.0":
version: 3.0.0
resolution: "vite@npm:3.0.0"
dependencies:
esbuild: ^0.14.27
esbuild: ^0.14.47
fsevents: ~2.3.2
postcss: ^8.4.13
resolve: ^1.22.0
rollup: ^2.59.0
postcss: ^8.4.14
resolve: ^1.22.1
rollup: ^2.75.6
peerDependencies:
less: "*"
sass: "*"
stylus: "*"
terser: ^5.4.0
dependenciesMeta:
fsevents:
optional: true
@ -13240,9 +13242,11 @@ __metadata:
optional: true
stylus:
optional: true
terser:
optional: true
bin:
vite: bin/vite.js
checksum: f78b54f58482ea97d385e36873ae1aa4744c5e467c1d6d4e0835bd55494d2d8f6ce763f17c241c66104be687d5ee535b8e1e96c14210c9ba0c343fe78c58f694
checksum: 4920b5b0a4d4bd4a003121b2eb6ed41ac2ab69e6ab055db645e678c14e68d6eef780362d4d482cf439b576c37fb65dc9a7ebbbf90354e7ae362034a28eac9130
languageName: node
linkType: hard