diff --git a/docs/config/index.md b/docs/config/index.md index 7f051399d1a1e7..f6e9af7fb5c664 100644 --- a/docs/config/index.md +++ b/docs/config/index.md @@ -241,7 +241,7 @@ export default defineConfig(({ 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 8216bcbfbac060..358745d02f2cf1 100644 --- a/docs/guide/build.md +++ b/docs/guide/build.md @@ -127,7 +127,8 @@ module.exports = defineConfig({ lib: { entry: path.resolve(__dirname, 'lib/main.js'), name: 'MyLib', - fileName: (format) => `my-lib.${format}.js` + // the proper extensions will be added + fileName: 'my-lib' }, rollupOptions: { // make sure to externalize deps that shouldn't be bundled @@ -159,7 +160,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 ``` @@ -170,10 +171,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/create-vite/template-lit-ts/package.json b/packages/create-vite/template-lit-ts/package.json index 640e57b3f46089..8ebcabf492eb44 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 2b413a7effa6be..ad5627580c9920 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/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/resolve-config/__tests__/resolve-config.spec.ts b/packages/playground/resolve-config/__tests__/resolve-config.spec.ts index 13ea5ea6f59a4f..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.js`), '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 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 b3ef37e64fd28e..578e3a4c68ff8d 100644 --- a/packages/vite/src/node/__tests__/build.spec.ts +++ b/packages/vite/src/node/__tests__/build.spec.ts @@ -1,6 +1,13 @@ +import type { LibraryFormats, LibraryOptions } from '../build' import { resolveLibFilename } from '../build' import { resolve } from 'path' +type FormatsToFileNames = [LibraryFormats, string][] +const baseLibOptions: LibraryOptions = { + fileName: 'my-lib', + entry: 'mylib.js' +} + describe('resolveLibFilename', () => { test('custom filename function', () => { const filename = resolveLibFilename( @@ -25,7 +32,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', () => { @@ -37,7 +44,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', () => { @@ -50,7 +57,7 @@ describe('resolveLibFilename', () => { resolve(__dirname, 'packages/noname') ) - expect(filename).toBe('custom-filename.es.js') + expect(filename).toBe('custom-filename.es.mjs') }) test('missing filename', () => { @@ -64,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" +} diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index ff03352a20d7a7..506580f2ad2b3b 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -38,6 +38,7 @@ import type { DepOptimizationMetadata } from './optimizer' import { getDepsCacheDir, findKnownImports } from './optimizer' import { assetImportMetaUrlPlugin } from './plugins/assetImportMetaUrl' import { loadFallbackPlugin } from './plugins/loadFallback' +import type { PackageData } from './packages' import { watchPackageDataPlugin } from './packages' import { ensureWatchPlugin } from './plugins/ensureWatch' @@ -601,9 +602,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 } @@ -616,14 +619,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.' ) - return `${name}.${format}.js` + let extension: string + + if (packageJson?.type === 'module') { + extension = format === 'cjs' || format === 'umd' ? 'cjs' : 'js' + } else { + extension = format === 'es' ? 'mjs' : 'js' + } + + return `${name}.${format}.${extension}` } function resolveBuildOutputs( 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