From 85ceb6575018646e9eb04db7b4e2c2cce291b4e5 Mon Sep 17 00:00:00 2001 From: Sachin Raja Date: Wed, 9 Feb 2022 06:55:53 -0800 Subject: [PATCH 1/9] fix: use proper extension in library mode --- docs/config/index.md | 2 +- docs/guide/build.md | 11 +++++++---- packages/vite/src/node/build.ts | 3 ++- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/config/index.md b/docs/config/index.md index 233e08b8f864e3..01457fc001a10f 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -212,7 +212,7 @@ export default defineConfig(async ({ command, mode }) => { { "exports": { ".": { - "import": "./index.esm.js", + "import": "./index.esm.mjs", "require": "./index.cjs.js" } } diff --git a/docs/guide/build.md b/docs/guide/build.md index aac86a237b6819..8c07faa8bc5d4f 100644 --- a/docs/guide/build.md +++ b/docs/guide/build.md @@ -111,7 +111,10 @@ module.exports = defineConfig({ lib: { entry: path.resolve(__dirname, 'lib/main.js'), name: 'MyLib', - fileName: (format) => `my-lib.${format}.js` + fileName: (format) => { + const extension = format === 'es' ? 'mjs' : 'js' + return `my-lib.${format}.${extension}` + } }, rollupOptions: { // make sure to externalize deps that shouldn't be bundled @@ -134,7 +137,7 @@ Running `vite build` with this config uses a Rollup preset that is oriented towa ``` $ vite build building for production... -[write] my-lib.es.js 0.08kb, brotli: 0.07kb +[write] my-lib.es.mjs 0.08kb, brotli: 0.07kb [write] my-lib.umd.js 0.30kb, brotli: 0.16kb ``` @@ -145,10 +148,10 @@ Recommended `package.json` for your lib: "name": "my-lib", "files": ["dist"], "main": "./dist/my-lib.umd.js", - "module": "./dist/my-lib.es.js", + "module": "./dist/my-lib.es.mjs", "exports": { ".": { - "import": "./dist/my-lib.es.js", + "import": "./dist/my-lib.es.mjs", "require": "./dist/my-lib.umd.js" } } diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index 7c7d1d18037174..1663548da23f09 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -681,7 +681,8 @@ export function resolveLibFilename( 'Name in package.json is required if option "build.lib.fileName" is not provided.' ) - return `${name}.${format}.js` + const extension = format === 'es' ? 'mjs' : 'js' + return `${name}.${format}.${extension}` } function resolveBuildOutputs( From d368525608eb90f32b676af81392ebcd8a5d0a70 Mon Sep 17 00:00:00 2001 From: Sachin Raja Date: Wed, 9 Feb 2022 07:16:18 -0800 Subject: [PATCH 2/9] fix: tests and change .es.js to .es.mjs --- packages/create-vite/template-lit-ts/package.json | 4 ++-- packages/create-vite/template-lit/package.json | 4 ++-- packages/playground/lib/index.dist.html | 2 +- .../resolve-config/__tests__/resolve-config.spec.ts | 2 +- packages/vite/src/node/__tests__/build.spec.ts | 8 ++++---- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/create-vite/template-lit-ts/package.json b/packages/create-vite/template-lit-ts/package.json index 5c0a7c7948ee58..b956ebc055b905 100644 --- a/packages/create-vite/template-lit-ts/package.json +++ b/packages/create-vite/template-lit-ts/package.json @@ -2,9 +2,9 @@ "name": "vite-lit-ts-starter", "private": true, "version": "0.0.0", - "main": "dist/my-element.es.js", + "main": "dist/my-element.es.mjs", "exports": { - ".": "./dist/my-element.es.js" + ".": "./dist/my-element.es.mjs" }, "types": "types/my-element.d.ts", "files": [ diff --git a/packages/create-vite/template-lit/package.json b/packages/create-vite/template-lit/package.json index ca3c71428f22c9..443955a1f1d7b4 100644 --- a/packages/create-vite/template-lit/package.json +++ b/packages/create-vite/template-lit/package.json @@ -2,9 +2,9 @@ "name": "vite-lit-starter", "private": true, "version": "0.0.0", - "main": "dist/my-element.es.js", + "main": "dist/my-element.es.mjs", "exports": { - ".": "./dist/my-element.es.js" + ".": "./dist/my-element.es.mjs" }, "files": [ "dist" diff --git a/packages/playground/lib/index.dist.html b/packages/playground/lib/index.dist.html index d6273923370aeb..9e0fac1f6b5730 100644 --- a/packages/playground/lib/index.dist.html +++ b/packages/playground/lib/index.dist.html @@ -5,7 +5,7 @@
diff --git a/packages/playground/resolve-config/__tests__/resolve-config.spec.ts b/packages/playground/resolve-config/__tests__/resolve-config.spec.ts index 13ea5ea6f59a4f..4f70ba642c68a1 100644 --- a/packages/playground/resolve-config/__tests__/resolve-config.spec.ts +++ b/packages/playground/resolve-config/__tests__/resolve-config.spec.ts @@ -11,7 +11,7 @@ const build = (configName: string) => { commandSync(`${viteBin} build`, { cwd: fromTestDir(configName) }) } const getDistFile = (configName: string) => { - return fs.readFileSync(fromTestDir(`${configName}/dist/index.es.js`), 'utf8') + return fs.readFileSync(fromTestDir(`${configName}/dist/index.es.mjs`), 'utf8') } if (isBuild) { diff --git a/packages/vite/src/node/__tests__/build.spec.ts b/packages/vite/src/node/__tests__/build.spec.ts index 3f9eb8ac01f8dd..23269cb384d996 100644 --- a/packages/vite/src/node/__tests__/build.spec.ts +++ b/packages/vite/src/node/__tests__/build.spec.ts @@ -13,7 +13,7 @@ describe('resolveLibFilename', () => { resolve(__dirname, 'packages/name') ) - expect(filename).toBe('custom-filename-function.es.js') + expect(filename).toBe('custom-filename-function.es.mjs') }) test('custom filename string', () => { @@ -26,7 +26,7 @@ describe('resolveLibFilename', () => { resolve(__dirname, 'packages/name') ) - expect(filename).toBe('custom-filename.es.js') + expect(filename).toBe('custom-filename.es.mjs') }) test('package name as filename', () => { @@ -38,7 +38,7 @@ describe('resolveLibFilename', () => { resolve(__dirname, 'packages/name') ) - expect(filename).toBe('mylib.es.js') + expect(filename).toBe('mylib.es.mjs') }) test('custom filename and no package name', () => { @@ -51,7 +51,7 @@ describe('resolveLibFilename', () => { resolve(__dirname, 'packages/noname') ) - expect(filename).toBe('custom-filename.es.js') + expect(filename).toBe('custom-filename.es.mjs') }) test('missing filename', () => { From c02ed191d01707c39a0a25a92b36dca98fa21627 Mon Sep 17 00:00:00 2001 From: Sachin Raja Date: Wed, 9 Feb 2022 07:24:57 -0800 Subject: [PATCH 3/9] fix: update a few tests --- packages/playground/lib/vite.config.js | 2 +- packages/playground/vue-lib/vite.config.lib.ts | 2 +- packages/vite/src/node/__tests__/build.spec.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/playground/lib/vite.config.js b/packages/playground/lib/vite.config.js index 50cd188b1a40cc..72c040d38d6dcf 100644 --- a/packages/playground/lib/vite.config.js +++ b/packages/playground/lib/vite.config.js @@ -10,7 +10,7 @@ module.exports = { entry: path.resolve(__dirname, 'src/main.js'), name: 'MyLib', formats: ['es', 'umd', 'iife'], - fileName: (format) => `my-lib-custom-filename.${format}.js` + fileName: 'my-lib-custom-filename' } }, plugins: [ diff --git a/packages/playground/vue-lib/vite.config.lib.ts b/packages/playground/vue-lib/vite.config.lib.ts index a888382d008a8c..0cc082c7ceea85 100644 --- a/packages/playground/vue-lib/vite.config.lib.ts +++ b/packages/playground/vue-lib/vite.config.lib.ts @@ -10,7 +10,7 @@ export default defineConfig({ entry: path.resolve(__dirname, 'src-lib/index.ts'), name: 'MyVueLib', formats: ['es'], - fileName: (format) => `my-vue-lib.${format}.js` + fileName: 'my-vue-lib' }, rollupOptions: { external: ['vue'], diff --git a/packages/vite/src/node/__tests__/build.spec.ts b/packages/vite/src/node/__tests__/build.spec.ts index 23269cb384d996..dbf41f474e4750 100644 --- a/packages/vite/src/node/__tests__/build.spec.ts +++ b/packages/vite/src/node/__tests__/build.spec.ts @@ -13,7 +13,7 @@ describe('resolveLibFilename', () => { resolve(__dirname, 'packages/name') ) - expect(filename).toBe('custom-filename-function.es.mjs') + expect(filename).toBe('custom-filename-function.es.js') }) test('custom filename string', () => { From 55c2221c6c1aac2272ebe5f22bacf85ee0639986 Mon Sep 17 00:00:00 2001 From: Sachin Raja Date: Wed, 9 Feb 2022 07:39:48 -0800 Subject: [PATCH 4/9] fix: change extension based on package.json "type" --- packages/vite/src/node/build.ts | 20 ++++++++++++++++---- packages/vite/src/node/packages.ts | 2 ++ 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index 1663548da23f09..e34799650836e0 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -43,6 +43,7 @@ import { scanImports } from './optimizer/scan' import { assetImportMetaUrlPlugin } from './plugins/assetImportMetaUrl' import { loadFallbackPlugin } from './plugins/loadFallback' import { watchPackageDataPlugin } from './packages' +import type { PackageData } from '.' export interface BuildOptions { /** @@ -610,9 +611,11 @@ function prepareOutDir( } } -function getPkgName(root: string) { - const { name } = JSON.parse(lookupFile(root, ['package.json']) || `{}`) +function getPkgJson(root: string): PackageData['data'] { + return JSON.parse(lookupFile(root, ['package.json']) || `{}`) +} +function getPkgName(name: string) { return name?.startsWith('@') ? name.split('/')[1] : name } @@ -674,14 +677,23 @@ export function resolveLibFilename( return libOptions.fileName(format) } - const name = libOptions.fileName || getPkgName(root) + const packageJson = getPkgJson(root) + const name = libOptions.fileName || getPkgName(packageJson.name) if (!name) throw new Error( 'Name in package.json is required if option "build.lib.fileName" is not provided.' ) - const extension = format === 'es' ? 'mjs' : 'js' + let extension: string + const isEsFormat = format === 'es' + + if (packageJson?.type === 'module') { + extension = isEsFormat ? 'js' : 'cjs' + } else { + extension = isEsFormat ? 'mjs' : 'js' + } + return `${name}.${format}.${extension}` } diff --git a/packages/vite/src/node/packages.ts b/packages/vite/src/node/packages.ts index 1424977164de85..1fb2e7b4a21c06 100644 --- a/packages/vite/src/node/packages.ts +++ b/packages/vite/src/node/packages.ts @@ -22,6 +22,8 @@ export interface PackageData { getResolvedCache: (key: string, targetWeb: boolean) => string | undefined data: { [field: string]: any + name: string + type: string version: string main: string module: string From 6406ba9e2d38768c355bb8b6dc9cbb822ef696b5 Mon Sep 17 00:00:00 2001 From: Sachin Raja Date: Wed, 9 Feb 2022 07:45:13 -0800 Subject: [PATCH 5/9] chore: import from './packages' --- packages/vite/src/node/build.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index e34799650836e0..2ef3154443ddc4 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -42,8 +42,8 @@ import type { DepOptimizationMetadata } from './optimizer' import { scanImports } from './optimizer/scan' import { assetImportMetaUrlPlugin } from './plugins/assetImportMetaUrl' import { loadFallbackPlugin } from './plugins/loadFallback' +import type { PackageData } from './packages' import { watchPackageDataPlugin } from './packages' -import type { PackageData } from '.' export interface BuildOptions { /** From 966348396d7504c17c6a0b16f74e85d99fb63f38 Mon Sep 17 00:00:00 2001 From: Sachin Raja Date: Wed, 9 Feb 2022 07:54:17 -0800 Subject: [PATCH 6/9] fix: resolve config tests --- .../__tests__/resolve-config.spec.ts | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/playground/resolve-config/__tests__/resolve-config.spec.ts b/packages/playground/resolve-config/__tests__/resolve-config.spec.ts index 4f70ba642c68a1..cde329afde2f50 100644 --- a/packages/playground/resolve-config/__tests__/resolve-config.spec.ts +++ b/packages/playground/resolve-config/__tests__/resolve-config.spec.ts @@ -10,42 +10,45 @@ const fromTestDir = (...p: string[]) => path.resolve(testDir, ...p) const build = (configName: string) => { commandSync(`${viteBin} build`, { cwd: fromTestDir(configName) }) } -const getDistFile = (configName: string) => { - return fs.readFileSync(fromTestDir(`${configName}/dist/index.es.mjs`), 'utf8') +const getDistFile = (configName: string, extension: string) => { + return fs.readFileSync( + fromTestDir(`${configName}/dist/index.es.${extension}`), + 'utf8' + ) } if (isBuild) { it('loads vite.config.js', () => { build('js') - expect(getDistFile('js')).toContain('console.log(true)') + expect(getDistFile('js', 'mjs')).toContain('console.log(true)') }) it('loads vite.config.js with package#type module', () => { build('js-module') - expect(getDistFile('js-module')).toContain('console.log(true)') + expect(getDistFile('js-module', 'js')).toContain('console.log(true)') }) it('loads vite.config.cjs', () => { build('cjs') - expect(getDistFile('cjs')).toContain('console.log(true)') + expect(getDistFile('cjs', 'mjs')).toContain('console.log(true)') }) it('loads vite.config.cjs with package#type module', () => { build('cjs-module') - expect(getDistFile('cjs-module')).toContain('console.log(true)') + expect(getDistFile('cjs-module', 'js')).toContain('console.log(true)') }) it('loads vite.config.mjs', () => { build('mjs') - expect(getDistFile('mjs')).toContain('console.log(true)') + expect(getDistFile('mjs', 'mjs')).toContain('console.log(true)') }) it('loads vite.config.mjs with package#type module', () => { build('mjs-module') - expect(getDistFile('mjs-module')).toContain('console.log(true)') + expect(getDistFile('mjs-module', 'js')).toContain('console.log(true)') }) it('loads vite.config.ts', () => { build('ts') - expect(getDistFile('ts')).toContain('console.log(true)') + expect(getDistFile('ts', 'mjs')).toContain('console.log(true)') }) it('loads vite.config.ts with package#type module', () => { build('ts-module') - expect(getDistFile('ts-module')).toContain('console.log(true)') + expect(getDistFile('ts-module', 'js')).toContain('console.log(true)') }) } else { // this test doesn't support serve mode From 4e01b164e843bb9d3b5bf852b21c229a465c6785 Mon Sep 17 00:00:00 2001 From: Sachin Raja Date: Wed, 9 Feb 2022 15:20:34 -0800 Subject: [PATCH 7/9] fix: .js file extension for iife --- packages/vite/src/node/build.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index 2ef3154443ddc4..52e334523e08e8 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -686,12 +686,11 @@ export function resolveLibFilename( ) let extension: string - const isEsFormat = format === 'es' if (packageJson?.type === 'module') { - extension = isEsFormat ? 'js' : 'cjs' + extension = format === 'cjs' || format === 'umd' ? 'cjs' : 'js' } else { - extension = isEsFormat ? 'mjs' : 'js' + extension = format === 'es' ? 'mjs' : 'js' } return `${name}.${format}.${extension}` From 0cd59a41a1e9531f41359899ca792c3e8ca68d33 Mon Sep 17 00:00:00 2001 From: Sachin Raja Date: Wed, 9 Feb 2022 15:26:23 -0800 Subject: [PATCH 8/9] docs: update example to only use string fileName --- docs/guide/build.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/docs/guide/build.md b/docs/guide/build.md index 8c07faa8bc5d4f..f30c7d99992359 100644 --- a/docs/guide/build.md +++ b/docs/guide/build.md @@ -111,10 +111,8 @@ module.exports = defineConfig({ lib: { entry: path.resolve(__dirname, 'lib/main.js'), name: 'MyLib', - fileName: (format) => { - const extension = format === 'es' ? 'mjs' : 'js' - return `my-lib.${format}.${extension}` - } + // the proper extensions will be added + fileName: 'my-lib' }, rollupOptions: { // make sure to externalize deps that shouldn't be bundled From 9775e70d84fe6d72dbbef0676ea7b5178e570b77 Mon Sep 17 00:00:00 2001 From: Sachin Raja Date: Wed, 9 Feb 2022 16:11:33 -0800 Subject: [PATCH 9/9] test: package extensions --- .../vite/src/node/__tests__/build.spec.ts | 46 ++++++++++++++++++- .../__tests__/packages/module/package.json | 3 ++ 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 packages/vite/src/node/__tests__/packages/module/package.json diff --git a/packages/vite/src/node/__tests__/build.spec.ts b/packages/vite/src/node/__tests__/build.spec.ts index dbf41f474e4750..578e3a4c68ff8d 100644 --- a/packages/vite/src/node/__tests__/build.spec.ts +++ b/packages/vite/src/node/__tests__/build.spec.ts @@ -1,6 +1,12 @@ +import type { LibraryFormats, LibraryOptions } from '../build' import { resolveLibFilename } from '../build' import { resolve } from 'path' -import { resolveConfig } from '..' + +type FormatsToFileNames = [LibraryFormats, string][] +const baseLibOptions: LibraryOptions = { + fileName: 'my-lib', + entry: 'mylib.js' +} describe('resolveLibFilename', () => { test('custom filename function', () => { @@ -65,4 +71,42 @@ describe('resolveLibFilename', () => { ) }).toThrow() }) + + test('commonjs package extensions', () => { + const formatsToFilenames: FormatsToFileNames = [ + ['es', 'my-lib.es.mjs'], + ['umd', 'my-lib.umd.js'], + ['cjs', 'my-lib.cjs.js'], + ['iife', 'my-lib.iife.js'] + ] + + for (const [format, expectedFilename] of formatsToFilenames) { + const filename = resolveLibFilename( + baseLibOptions, + format, + resolve(__dirname, 'packages/noname') + ) + + expect(filename).toBe(expectedFilename) + } + }) + + test('module package extensions', () => { + const formatsToFilenames: FormatsToFileNames = [ + ['es', 'my-lib.es.js'], + ['umd', 'my-lib.umd.cjs'], + ['cjs', 'my-lib.cjs.cjs'], + ['iife', 'my-lib.iife.js'] + ] + + for (const [format, expectedFilename] of formatsToFilenames) { + const filename = resolveLibFilename( + baseLibOptions, + format, + resolve(__dirname, 'packages/module') + ) + + expect(filename).toBe(expectedFilename) + } + }) }) diff --git a/packages/vite/src/node/__tests__/packages/module/package.json b/packages/vite/src/node/__tests__/packages/module/package.json new file mode 100644 index 00000000000000..3dbc1ca591c055 --- /dev/null +++ b/packages/vite/src/node/__tests__/packages/module/package.json @@ -0,0 +1,3 @@ +{ + "type": "module" +}