diff --git a/packages/observer/README.md b/packages/observer/README.md index 4e429944..0fd7a6c5 100644 --- a/packages/observer/README.md +++ b/packages/observer/README.md @@ -1,3 +1,3 @@ # @vue/observer -> This package is inlined into UMD & Browser ESM builds of user-facing renderers (e.g. `@vue/renderer-dom`), but also published as a package that can be used standalone. The standalone build should not be used alongside a pre-bundled build of a user-facing renderer, as they will have different internal storage for reactivity connections. A user-facing renderer should re-export all APIs from this package. +> This package is inlined into Global & Browser ESM builds of user-facing renderers (e.g. `@vue/renderer-dom`), but also published as a package that can be used standalone. The standalone build should not be used alongside a pre-bundled build of a user-facing renderer, as they will have different internal storage for reactivity connections. A user-facing renderer should re-export all APIs from this package. diff --git a/packages/observer/package.json b/packages/observer/package.json index 81bccff6..d5fa3f5e 100644 --- a/packages/observer/package.json +++ b/packages/observer/package.json @@ -5,14 +5,14 @@ "main": "index.js", "module": "dist/observer.esm.js", "typings": "dist/index.d.ts", - "unpkg": "dist/observer.umd.js", + "unpkg": "dist/observer.global.js", "repository": { "type": "git", "url": "git+https://github.com/vuejs/vue.git" }, "buildOptions": { "name": "VueObserver", - "formats": ["esm", "cjs", "umd", "esm-browser"] + "formats": ["esm", "cjs", "global", "esm-browser"] }, "keywords": [ "vue" diff --git a/packages/renderer-dom/package.json b/packages/renderer-dom/package.json index 17b55aaf..a379956b 100644 --- a/packages/renderer-dom/package.json +++ b/packages/renderer-dom/package.json @@ -5,10 +5,10 @@ "main": "index.js", "module": "dist/renderer-dom.esm.js", "typings": "dist/index.d.ts", - "unpkg": "dist/renderer-dom.umd.js", + "unpkg": "dist/renderer-dom.global.js", "buildOptions": { - "name": "Vue", - "formats": ["esm", "cjs", "umd", "esm-browser"] + "name": "VueDOMRenderer", + "formats": ["esm", "cjs", "global", "esm-browser"] }, "repository": { "type": "git", diff --git a/rollup.config.js b/rollup.config.js index 320edf5f..99d8e5ce 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -29,16 +29,16 @@ let hasTSChecked = false const configs = { esm: { - file: resolve(`dist/${name}.esm.js`), + file: resolve(`dist/${name}.esm-bundler.js`), format: `es` }, cjs: { file: resolve(`dist/${name}.cjs.js`), format: `cjs` }, - umd: { - file: resolve(`dist/${name}.umd.js`), - format: `umd` + global: { + file: resolve(`dist/${name}.global.js`), + format: `iife` }, 'esm-browser': { file: resolve(`dist/${name}.esm-browser.js`), @@ -49,14 +49,16 @@ const configs = { const defaultFormats = ['esm', 'cjs'] const inlineFromats = process.env.FORMATS && process.env.FORMATS.split(',') const packageFormats = inlineFromats || packageOptions.formats || defaultFormats -const packageConfigs = packageFormats.map(format => createConfig(configs[format])) +const packageConfigs = packageFormats.map(format => + createConfig(configs[format]) +) if (process.env.NODE_ENV === 'production') { packageFormats.forEach(format => { if (format === 'cjs') { packageConfigs.push(createProductionConfig(format)) } - if (format === 'umd' || format === 'esm-browser') { + if (format === 'global' || format === 'esm-browser') { packageConfigs.push(createMinifiedConfig(format)) } }) @@ -66,11 +68,11 @@ module.exports = packageConfigs function createConfig(output, plugins = []) { const isProductionBuild = /\.prod\.js$/.test(output.file) - const isUMDBuild = /\.umd(\.prod)?\.js$/.test(output.file) + const isGlobalBuild = /\.global(\.prod)?\.js$/.test(output.file) const isBunlderESMBuild = /\.esm\.js$/.test(output.file) const isBrowserESMBuild = /esm-browser(\.prod)?\.js$/.test(output.file) - if (isUMDBuild) { + if (isGlobalBuild) { output.name = packageOptions.name } @@ -91,11 +93,10 @@ function createConfig(output, plugins = []) { return { input: resolve(`src/index.ts`), - // UMD and Browser ESM builds inlines everything so that they can be + // Global and Browser ESM builds inlines everything so that they can be // used alone. - external: isUMDBuild || isBrowserESMBuild - ? [] - : Object.keys(aliasOptions), + external: + isGlobalBuild || isBrowserESMBuild ? [] : Object.keys(aliasOptions), plugins: [ tsPlugin, aliasPlugin, @@ -114,10 +115,10 @@ function createConfig(output, plugins = []) { function createReplacePlugin(isProduction, isBunlderESMBuild) { return replace({ __DEV__: isBunlderESMBuild - // preserve to be handled by bundlers - ? `process.env.NODE_ENV !== 'production'` - // hard coded dev/prod builds - : !isProduction, + ? // preserve to be handled by bundlers + `process.env.NODE_ENV !== 'production'` + : // hard coded dev/prod builds + !isProduction, // compatibility builds __COMPAT__: !!process.env.COMPAT }) @@ -126,21 +127,20 @@ function createReplacePlugin(isProduction, isBunlderESMBuild) { function createProductionConfig(format) { return createConfig({ file: resolve(`dist/${name}.${format}.prod.js`), - format: /^esm/.test(format) ? 'es' : format + format: configs[format].format }) } function createMinifiedConfig(format) { const { terser } = require('rollup-plugin-terser') - const isESM = /^esm/.test(format) return createConfig( { file: resolve(`dist/${name}.${format}.prod.js`), - format: isESM ? 'es' : format + format: configs[format].format }, [ terser({ - module: isESM + module: /^esm/.test(format) }) ] ) diff --git a/scripts/dev.js b/scripts/dev.js index c0879361..887cdfa3 100644 --- a/scripts/dev.js +++ b/scripts/dev.js @@ -2,7 +2,7 @@ Run Rollup in watch mode for development. To specific the package to watch, simply pass its name and the desired build -formats to watch (defaults to "umd"): +formats to watch (defaults to "global"): ``` # name supports fuzzy match. will watch all packages with name containing "dom" @@ -22,7 +22,7 @@ const formats = args.formats || args.f execa( 'rollup', - ['-wc', '--environment', `TARGET:${target},FORMATS:${formats || 'umd'}`], + ['-wc', '--environment', `TARGET:${target},FORMATS:${formats || 'global'}`], { stdio: 'inherit' }