Skip to content

Commit

Permalink
Update documents(copied and translated from webpack)
Browse files Browse the repository at this point in the history
  • Loading branch information
CPunisher committed Oct 12, 2024
1 parent ae197fc commit b7664de
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 0 deletions.
55 changes: 55 additions & 0 deletions website/docs/en/api/runtime-api/module-methods.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,61 @@ Rspack uses static analysis to parse the parameters of `require.context` during
For example, the value of `filter` cannot be a variable, nor can it be the value generated by `new RegExp()`. It can only be a regular expression literal.
:::

### require.ensure

<ApiMeta specific={['Rspack', 'Webpack']} />

:::tip
`require.ensure()` is specific to rspack/webpack and superseded by `import()`.
:::

Split out the given `dependencies` to a separate bundle that will be loaded asynchronously. When using CommonJS module syntax, this is the only way to dynamically load `dependencies`. Meaning, this code can be run within execution, only loading the dependencies if certain conditions are met.

:::warning
This feature relies on [Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise) internally. If you use `require.ensure` with older browsers, remember to shim Promise using a polyfill such as [es6-promise](https://github.com/stefanpenner/es6-promise) or [promise-polyfill](https://github.com/taylorhakes/promise-polyfill).
:::

- **Type:**

```ts
function requireEnsure(
/**
* An array of strings declaring all modules required for the code in the callback to execute.
*/
dependencies: String[],
/**
* A function that webpack will execute once the dependencies are loaded.
* An implementation of the require function is sent as a parameter to this function.
* The function body can use this to further require() modules it needs for execution
*/
callback: function(require),
/**
* A function that is executed when webpack fails to load the dependencies.
*/
errorCallback?: function(error),
/**
* A name given to the chunk created by this particular require.ensure().
* By passing the same chunkName to various require.ensure() calls,
* we can combine their code into a single chunk, resulting in only one bundle that the browser must load.
*/
chunkName?: String
): Context;
```

- **Example:**

```ts
var a = require('normal-dep');

if (module.hot) {
require.ensure(['b'], function (require) {
var c = require('c');

// Do something special...
});
}
```

## Data URI Module

Rspack supports importing Data URI modules using the `import` and `require` syntax.
Expand Down
53 changes: 53 additions & 0 deletions website/docs/zh/api/runtime-api/module-methods.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,59 @@ delete require.cache[require.resolve('dependency')];
require('dependency') !== d1;
```

### require.ensure

:::tip
`require.ensure()` 基本已经被 `import()` 取代.
:::

将给定 `dependencies` 单独打包,并异步加载。当使用 CommonJS 语法的时候,这是唯一动态加载依赖的方式。同时,这个 API 也可以用于运行时,只有在满足某些条件时才会加载依赖。

:::warning
该特性内部依赖于 [Promise](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)。 如果你在旧的浏览器上使用 `require.ensure`, 最好加入 polyfill [es6-promise](https://github.com/stefanpenner/es6-promise)[promise-polyfill](https://github.com/taylorhakes/promise-polyfill)
:::

- **Type:**

```ts
function requireEnsure(
/**
* callback 执行需要的模块列表
*/
dependencies: String[],
/**
* 当 dependencies 中的模块都加载完毕时,这个函数就会被执行。
* require 函数将作为第一个参数传入该函数。
* 在这个函数中也可以进一步使用 require() 来加载模块。
*/
callback: function(require),
/**
* 当加载依赖失败的时候执行的函数
*/
errorCallback?: function(error),
/**
* 指定由 require.ensure() 生成的 chunk 名称。
* 通过指定相同的 chunkName 来合并多个 require.ensure() 调用的代码,从而只生成一个 bundle,
* 从而减少浏览器加载的次数。
*/
chunkName?: String
): Context;
```

- **Example:**

```ts
var a = require('normal-dep');

if (module.hot) {
require.ensure(['b'], function (require) {
var c = require('c');

// Do something special...
});
}
```

## Data URI 模块

Rspack 支持使用 `import``require` 语法导入 Data URI 模块。
Expand Down

0 comments on commit b7664de

Please sign in to comment.