Skip to content

Commit 162bfc3

Browse files
authored
docs(browser): add usage of useInputFileSystem to "In-Memory File system" section (#11833)
* fix tag * useInputFileSystem
1 parent 3da2327 commit 162bfc3

File tree

2 files changed

+48
-8
lines changed

2 files changed

+48
-8
lines changed

website/docs/en/api/javascript-api/browser.mdx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,28 @@ builtinMemFs.volume.fromJSON({
8181
const files = builtinMemFs.volume.toJSON();
8282
```
8383

84+
`builtinMemFs` is a global singleton instance. In scenarios involving concurrent builds of multiple projects, it is recommended to enable [experiments.useInputFileSystem](/config/experiments#experimentsuseinputfilesystem) to avoid conflicts.
85+
Please note that, currently in the `@rspack/browser`, `experiments.useInputFileSystem` can only intercept project files that will be ultimately bundled, and cannot intercept files relied upon during the build process, such as those used by Loaders (see also [BrowserRequirePlugin#modules](/api/javascript-api/browser#modules) below).
86+
87+
```js title="rspack.config.mjs"
88+
const projectFs = memfs(filteredFiles);
89+
export default {
90+
plugins: [
91+
{
92+
apply: compiler => {
93+
compiler.hooks.beforeCompile.tap('SimpleInputFileSystem', () => {
94+
compiler.inputFileSystem = projectFs;
95+
compiler.outputFileSystem = projectFs;
96+
});
97+
},
98+
},
99+
],
100+
experiments: {
101+
useInputFileSystem: [/.*/],
102+
},
103+
};
104+
```
105+
84106
## Browser-Specific Plugins
85107

86108
To better meet the bundling needs in browser environments, `@rspack/browser` offers several dedicated plugins.
@@ -147,9 +169,7 @@ interface BrowserHttpImportPluginOptions {
147169

148170
In Rspack, certain scenarios require dynamically loading and executing JavaScript code, such as [Loaders](/guide/features/loader) or the template functions of [HtmlRspackPlugin](/plugins/rspack/html-rspack-plugin#use-template-function). Since this code may come from untrusted users, executing it directly in the browser environment poses potential security risks. To ensure safety, `@rspack/browser` throws errors by default in such cases to prevent unsafe code execution.
149171

150-
The `BrowserRequirePlugin` plugin provides two ways to address this requirement.
151-
152-
Options for `BrowserRequirePlugin` are as follows:
172+
The `BrowserRequirePlugin` plugin provides two ways to address this requirement. Options for `BrowserRequirePlugin` are as follows:
153173

154174
```ts
155175
interface BrowserRequirePluginOptions {
@@ -167,7 +187,7 @@ interface BrowserRequirePluginOptions {
167187

168188
#### `modules`
169189

170-
<ApiMeta addedVersion="1.5.9" />
190+
<ApiMeta addedVersion="1.6.0-beta.0" />
171191

172192
This option allows you to directly map a module request id to any JavaScript object within the project. Note that you need to create a corresponding empty file in `memfs`:
173193

website/docs/zh/api/javascript-api/browser.mdx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,28 @@ builtinMemFs.volume.fromJSON({
8282
const files = builtinMemFs.volume.toJSON();
8383
```
8484

85+
`builtinMemFs` 是一个全局单例实例。在存在并发构建多个项目的场景下,建议启用 [experiments.useInputFileSystem](/config/experiments#experimentsuseinputfilesystem) 以避免冲突。
86+
需要注意的是,目前在 `@rspack/browser` 环境中,`experiments.useInputFileSystem` 仅能拦截最终将被打包的项目文件,无法拦截诸如 Loader 等构建过程中依赖的文件(见下文 [BrowserRequirePlugin#modules](/api/javascript-api/browser#modules))。
87+
88+
```js title="rspack.config.mjs"
89+
const projectFs = memfs(filteredFiles);
90+
export default {
91+
plugins: [
92+
{
93+
apply: compiler => {
94+
compiler.hooks.beforeCompile.tap('SimpleInputFileSystem', () => {
95+
compiler.inputFileSystem = projectFs;
96+
compiler.outputFileSystem = projectFs;
97+
});
98+
},
99+
},
100+
],
101+
experiments: {
102+
useInputFileSystem: [/.*/],
103+
},
104+
};
105+
```
106+
85107
## 浏览器专用插件
86108

87109
为更好地满足浏览器环境下的打包需求,`@rspack/browser` 提供了若干专用插件。
@@ -145,9 +167,7 @@ interface BrowserHttpImportPluginOptions {
145167

146168
在 Rspack 中,某些场景需要动态加载和执行 JavaScript 代码,如 [Loader](/guide/features/loader)[HtmlRspackPlugin 的模板函数](/plugins/rspack/html-rspack-plugin#use-template-function)。由于这些代码可能来自不可信的第三方用户,直接在浏览器环境中执行会带来潜在的安全风险。为了保障安全性,`@rspack/browser` 在遇到此类场景时会默认抛出错误,阻止不安全代码的执行。
147169

148-
`BrowserRequirePlugin` 插件提供了两种方式解决这个需求。
149-
150-
`BrowserRequirePlugin` 的选项如下:
170+
`BrowserRequirePlugin` 插件提供了两种方式解决这个需求。`BrowserRequirePlugin` 的选项如下:
151171

152172
```ts
153173
/**
@@ -174,7 +194,7 @@ interface BrowserRequirePluginOptions {
174194

175195
#### `modules`
176196

177-
<ApiMeta addedVersion="1.5.9" />
197+
<ApiMeta addedVersion="1.6.0-beta.0" />
178198

179199
该选项能够直接将模块请求 id 映射到项目内的任意 JavaScript 对象,注意,这里需要在 memfs 中对应地写入一个空的文件:
180200

0 commit comments

Comments
 (0)