Skip to content

Add production build for esm-browser #2939

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: v3
Choose a base branch
from
Open

Add production build for esm-browser #2939

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f622a0
Add production build for esm-browser
porfirioribeiro Mar 15, 2025
c6fb07f
Merge branch 'v3' into patch-1
porfirioribeiro Apr 8, 2025
e9c3532
Merge branch 'vuejs:v3' into patch-1
porfirioribeiro Aug 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions rollup.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ const packageConfigs = packageBuilds.map((format) =>
packageBuilds.forEach((buildName) => {
if (buildName === 'cjs') {
packageConfigs.push(createProductionConfig(buildName))
} else if (buildName === 'global') {
} else if (buildName === 'global' || buildName === 'browser') {
packageConfigs.push(createMinifiedConfig(buildName))
}
})
Expand All @@ -99,7 +99,7 @@ function createConfig(buildName, output, plugins = []) {

const isProductionBuild = /\.prod\.[cm]?js$/.test(output.file)
const isGlobalBuild = buildName === 'global'
const isRawESMBuild = buildName === 'browser'
const isRawESMBuild = buildName.includes('browser')
const isNodeBuild = buildName === 'cjs'
const isBundlerESMBuild = buildName === 'browser' || buildName === 'mjs'

Expand All @@ -125,7 +125,8 @@ function createConfig(buildName, output, plugins = []) {
// during a single build.
hasTSChecked = true

const external = ['vue', '@vue/devtools-api']
const external = ['vue']
if (buildName !== 'browser-prod') external.push('@vue/devtools-api')

Comment on lines +128 to 130
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Devtools API is still external in the dev ESM-browser build; this defeats the “only depend on Vue” goal for importmaps

Right now, '@vue/devtools-api' is only inlined for browser-prod. For micro-frontends using importmaps, the dev ESM-browser build should also avoid external imports (other than Vue) to prevent extra importmap entries and match the “only depend on Vue (3)” goal from issue #2205. Inline devtools in the dev ESM-browser build too.

Apply this diff to inline devtools for all browser builds (dev and prod):

-  const external = ['vue']
-  if (buildName !== 'browser-prod') external.push('@vue/devtools-api')
+  const external = ['vue']
+  // Inline devtools for browser builds (dev and prod) to avoid extra importmaps in MFEs
+  if (!buildName.includes('browser')) external.push('@vue/devtools-api')

This keeps devtools external for bundler/Node targets (mjs/cjs) while making both browser variants self-contained wrt devtools. If you prefer to inline devtools only for ESM-browser (and not for global/iife), we can narrow the condition to buildName === 'mjs' || buildName === 'cjs'.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const external = ['vue']
if (buildName !== 'browser-prod') external.push('@vue/devtools-api')
const external = ['vue']
// Inline devtools for browser builds (dev and prod) to avoid extra importmaps in MFEs
if (!buildName.includes('browser')) external.push('@vue/devtools-api')
🤖 Prompt for AI Agents 
In rollup.config.mjs around lines 128 to 130, '@vue/devtools-api' is only
inlined for buildName === 'browser-prod', which leaves the dev ESM-browser build
depending on an external devtools package; change the condition so devtools
remains external only for bundler/Node targets (mjs/cjs) and is inlined for
browser builds. Concretely, replace the current conditional with one that pushes
'@vue/devtools-api' to external only when buildName === 'mjs' || buildName ===
'cjs' (or equivalent negation of browser builds), ensuring both browser dev and
prod builds are self-contained while mjs/cjs keep devtools external.

const nodePlugins = [nodeResolve(), commonjs()]

Expand Down Expand Up @@ -219,9 +220,9 @@ function createProductionConfig(format) {

function createMinifiedConfig(format) {
return createConfig(
format,
format === 'browser' ? 'browser-prod' : format,
{
file: `dist/${name}.${format === 'global' ? 'iife' : format}.prod.js`,
file: `dist/${name}.${format === 'browser' ? 'esm-browser' : format === 'global' ? 'iife' : format}.prod.js`,
format: outputConfigs[format].format,
},
[
Expand Down