From 5493b4e59092ca3058964ec565a459c286139b39 Mon Sep 17 00:00:00 2001 From: Ryota Watanabe <43837308+wattanx@users.noreply.github.com> Date: Tue, 27 Aug 2024 16:06:14 +0900 Subject: [PATCH] feat: support `import.meta.*` for webpack (#1298) --- packages/bridge/src/module.ts | 5 ++- packages/bridge/src/webpack/import-meta.ts | 46 ++++++++++++++++++++++ playground/pages/with-layout.vue | 4 +- 3 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 packages/bridge/src/webpack/import-meta.ts diff --git a/packages/bridge/src/module.ts b/packages/bridge/src/module.ts index 0ba9b565..a031c911 100644 --- a/packages/bridge/src/module.ts +++ b/packages/bridge/src/module.ts @@ -1,4 +1,4 @@ -import { defineNuxtModule, installModule, checkNuxtCompatibility, logger, writeTypes, addTemplate } from '@nuxt/kit' +import { defineNuxtModule, installModule, checkNuxtCompatibility, logger, writeTypes, addTemplate, addWebpackPlugin } from '@nuxt/kit' import type { NuxtModule, NuxtCompatibility } from '@nuxt/schema' import type { NodeMiddleware } from 'h3' import { fromNodeMiddleware } from 'h3' @@ -13,6 +13,7 @@ import { setupMeta } from './meta' import { setupTranspile } from './transpile' import { generateWebpackBuildManifest } from './webpack/manifest' import pageMetaModule from './page-meta/module' +import { ImportMetaPlugin } from './webpack/import-meta' export default defineNuxtModule({ meta: { @@ -173,5 +174,7 @@ export default defineNuxtModule({ getContents: () => 'export default false' }) } + + addWebpackPlugin(ImportMetaPlugin.webpack) } }) diff --git a/packages/bridge/src/webpack/import-meta.ts b/packages/bridge/src/webpack/import-meta.ts new file mode 100644 index 00000000..ad1a38a7 --- /dev/null +++ b/packages/bridge/src/webpack/import-meta.ts @@ -0,0 +1,46 @@ +import { pathToFileURL } from 'node:url' +import { createUnplugin } from 'unplugin' +import { parseURL } from 'ufo' +import { normalize } from 'pathe' +import MagicString from 'magic-string' + +const NODE_MODULES_RE = /[\\/]node_modules[\\/]/ + +// support for `import.meta` in webpack 4 +export const ImportMetaPlugin = createUnplugin(() => { + return { + name: 'nuxt:import-meta-transform', + enforce: 'post', + transformInclude (id) { + const { pathname } = parseURL( + decodeURIComponent(pathToFileURL(id).href) + ) + const extensions = ['.js', '.vue', '.ts', '.jsx', '.tsx', '.mjs'] + if (extensions.some(ext => pathname.endsWith(ext))) { + return true + } + }, + transform (code, id) { + id = normalize(id) + const isNodeModule = NODE_MODULES_RE.test(id) + + if (isNodeModule) { + return + } + + const s = new MagicString(code) + s.replace(/import\.meta\.client/g, 'process.client') + .replace(/import\.meta\.server/g, 'process.server') + .replace(/import\.meta\.browser/g, 'process.browser') + .replace(/import\.meta\.nitro/g, 'process.nitro') + .replace(/import\.meta\.prerender/g, 'process.prerender') + + if (s.hasChanged()) { + return { + code: s.toString(), + map: s.generateMap({ hires: true }) + } + } + } + } +}) diff --git a/playground/pages/with-layout.vue b/playground/pages/with-layout.vue index bb9680cd..6e1f77c6 100644 --- a/playground/pages/with-layout.vue +++ b/playground/pages/with-layout.vue @@ -1,8 +1,8 @@