Skip to content

Commit 7b0bb6f

Browse files
fi3eworkfi3ework
committed
up
1 parent 6c11330 commit 7b0bb6f

2 files changed

Lines changed: 38 additions & 16 deletions

File tree

‎website/docs/en/guide/basic/output-format.mdx‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -140,14 +140,25 @@ MF stands for Module Federation. <MF />
140140

141141
{/* The following documentation is taken from https://esbuild.github.io/api/#format-iife */}
142142

143-
The iife format stands for "immediately-invoked function expression" and is intended to be run in the browser. Wrapping your code in a function expression ensures that any variables in your code don't accidentally conflict with variables in the global scope. If your entry point has exports that you want to expose as a global in the browser, you can configure that global's name using the global name setting. Specifying the `iife` format looks like this:
143+
The iife format stands for "immediately-invoked function expression" and is intended to be run in the browser. Wrapping your code in a function expression ensures that any variables in your code don't accidentally conflict with variables in the global scope. If your entry point has exports that you want to expose as a global in the browser, you can configure that global's name using the global name setting.
144144

145-
```js
146-
// source code
147-
alert('test');
145+
In IIFE format, [output.globalObject](https://rspack.dev/config/output#outputglobalobject) is set to [globalThis](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis) by default. The `import` statements that match [externals](/config/rsbuild/output#outputexternals) in the source code will be transformed to access properties through `globalThis`. You can override [output.globalObject](https://rspack.dev/config/output#outputglobalobject) to any value.
148146

149-
// iife output
150-
(() => {
151-
alert('test');
152-
})();
147+
When specifying the `iife` format, the source code and corresponding output are as follows:
148+
149+
```js title="source code"
150+
// parent-sdk is marked as externals
151+
// externals: ['parent-sdk']
152+
import { version } from 'parent-sdk';
153+
alert(version);
154+
```
155+
156+
```js title="IIFE output"
157+
(
158+
() => {
159+
'use strict';
160+
const external_parent_sdk_namespaceObject = globalThis['parent-sdk'];
161+
alert(external_parent_sdk_namespaceObject.version);
162+
},
163+
)();
153164
```

‎website/docs/zh/guide/basic/output-format.mdx‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -135,14 +135,25 @@ MF 代表 Module Federation。<MF />
135135

136136
{/* 以下文档复制自 https://esbuild.github.io/api/#format-iife */}
137137

138-
IIFE 格式代表「立即调用函数表达式」，旨在浏览器中运行。将代码包裹在函数表达式中，可确保代码中的任何变量不会意外与全局作用域中的变量发生冲突。若你的入口点有需要在浏览器中作为全局变量暴露的导出内容，可通过全局名称设置来配置该全局变量的名称。指定 `iife` 格式时产物如下:
138+
IIFE 格式代表「立即调用函数表达式」，旨在浏览器中运行。将代码包裹在函数表达式中，可确保代码中的任何变量不会意外与全局作用域中的变量发生冲突。若你的入口点有需要在浏览器中作为全局变量暴露的导出内容，可通过全局名称设置来配置该全局变量的名称。
139139

140-
```js
141-
// source code
142-
alert('test');
140+
在 IIFE 格式下，[output.globalObject](https://rspack.dev/zh/config/output#outputglobalobject) 默认设置为 [globalThis](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis)，源码中命中了 [externals](/config/rsbuild/output#outputexternals) 的 `import` 语句将被转换为通过 `globalThis` 上的属性访问，你可以覆盖 [output.globalObject](https://rspack.dev/zh/config/output#outputglobalobject) 为任意值。
143141

144-
// iife output
145-
(() => {
146-
alert('test');
147-
})();
142+
指定 `iife` 格式时源码及对应产物如下:
143+
144+
```js title="源码"
145+
// externals 已经将 parent-sdk 作为外部依赖
146+
// externals: ['parent-sdk']
147+
import { version } from 'parent-sdk';
148+
alert(version);
149+
```
150+
151+
```js title="IIFE 产物"
152+
(
153+
() => {
154+
'use strict';
155+
const external_parent_sdk_namespaceObject = globalThis['parent-sdk'];
156+
alert(external_parent_sdk_namespaceObject.version);
157+
},
158+
)();
148159
```

0 commit comments

Comments
 (0)