feat: support iife format (#998)

Co-authored-by: Timeless0911 <[email protected]>

Author: fi3ework

packages/core/src/config.ts

@@ -7,6 +7,7 @@ import {
   type RsbuildPlugin,
   type RsbuildPlugins,
   type Rspack,
+  type ToolsConfig,
   defineConfig as defineRsbuildConfig,
   loadConfig as loadRsbuildConfig,
   mergeRsbuildConfig,
@@ -679,6 +680,39 @@ const composeFormatConfig = ({
 
       return config;
     }
+    case 'iife': {
+      if (bundle === false) {
+        throw new Error(
+          'When using "iife" format, "bundle" must be set to "true". Since the default value for "bundle" is "true", so you can either explicitly set it to "true" or remove the field entirely.',
+        );
+      }
+
+      const config: EnvironmentConfig = {
+        tools: {
+          rspack: {
+            module: {
+              parser: {
+                javascript: {
+                  importMeta: false,
+                },
+              },
+            },
+            output: {
+              iife: true,
+              asyncChunks: false,
+              library: {
+                type: 'modern-module',
+              },
+            },
+            optimization: {
+              nodeEnv: process.env.NODE_ENV,
+            },
+          },
+        },
+      };
+
+      return config;
+    }
     case 'mf':
       if (bundle === false) {
         throw new Error(
@@ -789,6 +823,7 @@ const composeShimsConfig = (
       };
       break;
     case 'umd':
+    case 'iife':
     case 'mf':
       break;
     default:
@@ -813,36 +848,53 @@ const composeExternalsConfig = (
   // Rspack's externals as they will not be merged from different fields. All externals
   // should to be unified and merged together in the future.
 
-  const externalsTypeMap = {
+  const externalsTypeMap: Record<Format, Rspack.ExternalsType> = {
     esm: 'module-import',
     cjs: 'commonjs-import',
     umd: 'umd',
     // If use 'var', when projects import an external package like '@pkg', this will cause a syntax error such as 'var pkg = @pkg'.
     // If use 'umd', the judgement conditions may be affected by other packages that define variables like 'define'.
     // Therefore, we use 'global' to satisfy both web and node environments.
     mf: 'global',
-  } as const;
+    iife: 'global',
+  };
+
+  const globalObjectMap: Record<Format, string | undefined> = {
+    esm: undefined,
+    cjs: undefined,
+    umd: undefined,
+    mf: undefined,
+    iife: 'globalThis',
+  };
+
+  const rspackConfig: ToolsConfig['rspack'] = {};
+  const rsbuildConfig: EnvironmentConfig = {};
 
   switch (format) {
     case 'esm':
     case 'cjs':
     case 'umd':
     case 'mf':
-      return {
-        output: externals
-          ? {
-              externals,
-            }
-          : {},
-        tools: {
-          rspack: {
-            externalsType: externalsTypeMap[format],
-          },
-        },
-      };
+    case 'iife':
+      rsbuildConfig.output = externals ? { externals } : {};
+      rspackConfig.externalsType = externalsTypeMap[format];
+      if (globalObjectMap[format]) {
+        rspackConfig.output = {
+          globalObject: globalObjectMap[format],
+        };
+      }
+
+      break;
     default:
       throw new Error(`Unsupported format: ${format}`);
   }
+
+  return {
+    ...rsbuildConfig,
+    tools: {
+      rspack: rspackConfig,
+    },
+  };
 };
 
 const composeAutoExtensionConfig = (

packages/core/src/types/config.ts

@@ -6,7 +6,7 @@ import type {
 } from '@rsbuild/core';
 import type { GetAsyncFunctionFromUnion } from './utils';
 
-export type Format = 'esm' | 'cjs' | 'umd' | 'mf';
+export type Format = 'esm' | 'cjs' | 'umd' | 'mf' | 'iife';
 
 export type FixedEcmaVersions =
   | 'es5'

packages/core/tests/__snapshots__/config.test.ts.snap

@@ -724,6 +724,231 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config i
     },
     "format": "umd",
   },
+  {
+    "config": {
+      "dev": {
+        "progressBar": false,
+      },
+      "output": {
+        "distPath": {
+          "css": "./",
+          "cssAsync": "./",
+          "js": "./",
+          "jsAsync": "./",
+        },
+        "externals": [
+          "assert",
+          "assert/strict",
+          "async_hooks",
+          "buffer",
+          "child_process",
+          "cluster",
+          "console",
+          "constants",
+          "crypto",
+          "dgram",
+          "diagnostics_channel",
+          "dns",
+          "dns/promises",
+          "domain",
+          "events",
+          "fs",
+          "fs/promises",
+          "http",
+          "http2",
+          "https",
+          "inspector",
+          "inspector/promises",
+          "module",
+          "net",
+          "os",
+          "path",
+          "path/posix",
+          "path/win32",
+          "perf_hooks",
+          "process",
+          "punycode",
+          "querystring",
+          "readline",
+          "readline/promises",
+          "repl",
+          "stream",
+          "stream/consumers",
+          "stream/promises",
+          "stream/web",
+          "string_decoder",
+          "sys",
+          "timers",
+          "timers/promises",
+          "tls",
+          "trace_events",
+          "tty",
+          "url",
+          "util",
+          "util/types",
+          "v8",
+          "vm",
+          "wasi",
+          "worker_threads",
+          "zlib",
+          /\\^node:/,
+          "pnpapi",
+        ],
+        "filename": {
+          "js": "[name].js",
+        },
+        "filenameHash": false,
+        "minify": {
+          "css": false,
+          "js": true,
+          "jsOptions": {
+            "minimizerOptions": {
+              "compress": {
+                "dead_code": true,
+                "defaults": false,
+                "toplevel": true,
+                "unused": true,
+              },
+              "format": {
+                "comments": "some",
+                "preserve_annotations": true,
+              },
+              "mangle": false,
+              "minify": false,
+            },
+          },
+        },
+        "overrideBrowserslist": [
+          "last 1 node versions",
+        ],
+        "target": "node",
+      },
+      "performance": {
+        "chunkSplit": {
+          "strategy": "custom",
+        },
+      },
+      "plugins": [
+        {
+          "name": "rsbuild:lib-entry-chunk",
+          "setup": [Function],
+        },
+      ],
+      "resolve": {
+        "alias": {
+          "bar": "bar",
+          "foo": "foo",
+        },
+      },
+      "source": {
+        "entry": {},
+        "preEntry": "./a.js",
+      },
+      "tools": {
+        "htmlPlugin": false,
+        "rspack": [
+          {
+            "experiments": {
+              "rspackFuture": {
+                "bundlerInfo": {
+                  "force": false,
+                },
+              },
+            },
+            "optimization": {
+              "moduleIds": "named",
+              "nodeEnv": false,
+              "splitChunks": {
+                "chunks": "async",
+              },
+            },
+            "resolve": {
+              "extensionAlias": {
+                ".cjs": [
+                  ".cts",
+                  ".cjs",
+                ],
+                ".js": [
+                  ".ts",
+                  ".tsx",
+                  ".js",
+                  ".jsx",
+                ],
+                ".jsx": [
+                  ".tsx",
+                  ".jsx",
+                ],
+                ".mjs": [
+                  ".mts",
+                  ".mjs",
+                ],
+              },
+            },
+          },
+          {
+            "module": {
+              "parser": {
+                "javascript": {
+                  "importMeta": false,
+                },
+              },
+            },
+            "optimization": {
+              "nodeEnv": "test",
+            },
+            "output": {
+              "asyncChunks": false,
+              "iife": true,
+              "library": {
+                "type": "modern-module",
+              },
+            },
+          },
+          [Function],
+          {
+            "target": [
+              "node",
+            ],
+          },
+          {
+            "externalsType": "global",
+            "output": {
+              "globalObject": "globalThis",
+            },
+          },
+          {
+            "plugins": [
+              EntryChunkPlugin {
+                "contextToWatch": null,
+                "enabledImportMetaUrlShim": false,
+                "reactDirectives": {},
+                "shebangChmod": 493,
+                "shebangEntries": {},
+                "shebangInjectedAssets": Set {},
+                "shimsInjectedAssets": Set {},
+              },
+            ],
+          },
+          {
+            "resolve": {
+              "extensionAlias": {
+                ".js": [
+                  ".ts",
+                  ".tsx",
+                ],
+              },
+            },
+          },
+        ],
+        "swc": {
+          "jsc": {
+            "externalHelpers": false,
+          },
+        },
+      },
+    },
+    "format": "iife",
+  },
   {
     "config": {
       "dev": {

packages/core/tests/config.test.ts

@@ -177,6 +177,9 @@ describe('Should compose create Rsbuild config correctly', () => {
         {
           format: 'umd',
         },
+        {
+          format: 'iife',
+        },
         {
           format: 'mf',
           plugins: [pluginModuleFederation({})],