feat: enable usage of function as library fileName, close #3585 (#3625)

Author: gobeli

docs/config/index.md

@@ -621,10 +621,10 @@ createServer()
 
 ### build.lib
 
-- **Type:** `{ entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string }`
+- **Type:** `{ entry: string, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat) => string) }`
 - **Related:** [Library Mode](/guide/build#library-mode)
 
-  Build as a library. `entry` is required since the library cannot use HTML as entry. `name` is the exposed global variable and is required when `formats` includes `'umd'` or `'iife'`. Default `formats` are `['es', 'umd']`. `fileName` is the name of the package file output, default `fileName` is the name option of package.json
+  Build as a library. `entry` is required since the library cannot use HTML as entry. `name` is the exposed global variable and is required when `formats` includes `'umd'` or `'iife'`. Default `formats` are `['es', 'umd']`. `fileName` is the name of the package file output, default `fileName` is the name option of package.json, it can also be defined as function taking the `format` as an argument.
 
 ### build.manifest
 

docs/guide/build.md

@@ -108,7 +108,8 @@ module.exports = {
   build: {
     lib: {
       entry: path.resolve(__dirname, 'lib/main.js'),
-      name: 'MyLib'
+      name: 'MyLib',
+      fileName: format => `my-lib.${format}.js`  
     },
     rollupOptions: {
       // make sure to externalize deps that shouldn't be bundled

packages/playground/lib/index.dist.html

@@ -1,15 +1,14 @@
 <!-- the production demo page, copied into dist/ -->
-
 <div class="es"></div>
 <div class="umd"></div>
 
 <script type="module">
-  import myLib from './my-lib.es.js'
+  import myLib from './my-lib-custom-filename.es.js'
 
   myLib('.es')
 </script>
 
-<script src="./my-lib.umd.js"></script>
+<script src="./my-lib-custom-filename.umd.js"></script>
 <script>
   MyLib('.umd')
 </script>

packages/playground/lib/vite.config.js

@@ -8,7 +8,8 @@ module.exports = {
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/main.js'),
-      name: 'MyLib'
+      name: 'MyLib',
+      fileName: (format) => `my-lib-custom-filename.${format}.js`
     }
   },
   plugins: [

packages/vite/src/node/__tests__/build.spec.ts

@@ -0,0 +1,32 @@
+import { resolveLibFilename } from '../build'
+
+describe('resolveLibFilename', () => {
+  test('custom filename function', () => {
+    const filename = resolveLibFilename(
+      {
+        fileName: (format) => `custom-filename-function.${format}.js`,
+        entry: 'mylib.js'
+      },
+      'es',
+      'mylib'
+    )
+
+    expect(filename).toBe('custom-filename-function.es.js')
+  })
+
+  test('custom filename string', () => {
+    const filename = resolveLibFilename(
+      { fileName: 'custom-filename', entry: 'mylib.js' },
+      'es',
+      'mylib'
+    )
+
+    expect(filename).toBe('custom-filename.es.js')
+  })
+
+  test('package name as filename', () => {
+    const filename = resolveLibFilename({ entry: 'mylib.js' }, 'es', 'mylib')
+
+    expect(filename).toBe('mylib.es.js')
+  })
+})

packages/vite/src/node/build.ts

@@ -15,7 +15,8 @@ import Rollup, {
   GetModuleInfo,
   WatcherOptions,
   RollupWatcher,
-  RollupError
+  RollupError,
+  ModuleFormat
 } from 'rollup'
 import { buildReporterPlugin } from './plugins/reporter'
 import { buildHtmlPlugin } from './plugins/html'
@@ -198,7 +199,7 @@ export interface LibraryOptions {
   entry: string
   name?: string
   formats?: LibraryFormats[]
-  fileName?: string
+  fileName?: string | ((format: ModuleFormat) => string)
 }
 
 export type LibraryFormats = 'es' | 'cjs' | 'umd' | 'iife'
@@ -425,7 +426,7 @@ async function doBuild(
         entryFileNames: ssr
           ? `[name].js`
           : libOptions
-          ? `${libOptions.fileName || pkgName}.${output.format || `es`}.js`
+          ? resolveLibFilename(libOptions, output.format || 'es', pkgName)
           : path.posix.join(options.assetsDir, `[name].[hash].js`),
         chunkFileNames: libOptions
           ? `[name].js`
@@ -621,6 +622,16 @@ function staticImportedByEntry(
   return someImporterIs
 }
 
+export function resolveLibFilename(
+  libOptions: LibraryOptions,
+  format: ModuleFormat,
+  pkgName: string
+): string {
+  return typeof libOptions.fileName === 'function'
+    ? libOptions.fileName(format)
+    : `${libOptions.fileName || pkgName}.${format}.js`
+}
+
 function resolveBuildOutputs(
   outputs: OutputOptions | OutputOptions[] | undefined,
   libOptions: LibraryOptions | false,