Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions src/content/guides/dependency-management.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ translators:
- QC-L
- hanhan9449
- lcxfs1991
- Yucohny
---

> es6 modules
Expand All @@ -21,9 +22,9 @@ translators:

## 带表达式的 require 语句 $#require-with-expression$

如果你的 request 含有表达式(expressions),就会创建一个上下文(context),因为在编译时(compile time)并不清楚 **具体** 导入哪个模块
如果 require 中含有表达式,由于编译时并不清楚 **具体** 导入了哪个模块,因此会创建一个上下文

示例,考虑到我们有包含 `.ejs` 文件的如下目录结构:
参考接下来的例子:假设现在有包含 `.ejs` 文件的如下目录结构:

```bash
example_directory
Expand All @@ -36,24 +37,24 @@ example_directory
│ │ another.ejs
```

当台下的 `require()` 调用被评估解析
当下面的 `require()` 调用被评估解析时

```javascript
require('./template/' + name + '.ejs');
```

webpack 解析 `require()` 调用,然后提取出如下一些信息:
webpack 解析会 `require()` 调用,然后提取出如下一些信息:

```code
Directory: ./template
Regular expression: /^.*\.ejs$/
```

**context module**
**上下文模块**

会生成一个 context module(上下文模块)。它包含 **目录下的所有模块** 的引用,如果一个 request 符合正则表达式,就能 require 进来。该 context module 包含一个 map(映射)对象,会把 requests 翻译成对应的模块 id。(译者注:request 参考[概念术语](https://webpack.docschina.org/glossary/) )
并且会创建一个上下文模块。它包含 **对该目录下所有模块** 的引用,可以使用匹配正则表达式的请求来导入这些模块。上下文模块中存在一个映射,该映射用于将请求转换为模块 ID。

示例 map(映射):
示例映射:

```json
{
Expand All @@ -63,18 +64,17 @@ Regular expression: /^.*\.ejs$/
}
```

此 context module 还包含一些访问这个 map 对象的 runtime 逻辑
此上下文模块还包含一些访问此映射对象的运行时逻辑

这意味着 webpack 能够支持动态地 require,但会导致所有可能用到的模块都包含在 bundle 中。
这意味着 webpack 能够支持动态导入,但会导致所有可能用到的模块都包含在 bundle 中。

## require.context $#requirecontext$

你还可以通过 `require.context()` 函数来创建自己的 context
可以通过 `require.context()` 函数实现自定义上下文

可以给这个函数传入三个参数:一个要搜索的目录,一个标记表示是否还搜索其子目录,
以及一个匹配文件的正则表达式。
可以给这个函数传入三个参数:要搜索的目录、是否还搜索其子目录,匹配文件的正则表达式。

Webpack 会在构建中解析代码中的 `require.context()` 。
webpack 会在构建中解析代码中的 `require.context()` 。

语法如下:

Expand All @@ -91,24 +91,24 @@ require.context(

```javascript
require.context('./test', false, /\.test\.js$/);
//(创建出)一个 context,其中文件来自 test 目录,request 以 `.test.js` 结尾。
// 创建一个上下文,其中文件直接来自 test 目录,require 包含的表达式以 `.test.js` 结尾。
```

```javascript
require.context('../', true, /\.stories\.js$/);
// (创建出)一个 context,其中所有文件都来自父文件夹及其所有子级文件夹,request 以 `.stories.js` 结尾。
// 创建一个上下文,其中文件来自父文件夹及其所有子级文件夹,require 包含的表达式以 `.stories.js` 结尾。
```

W> 传递给 `require.context` 的参数必须是字面量(literal)
W> 传递给 `require.context` 的参数必须是字面量!

### context module API $#context-module-api$
### 上下文模块 API $#context-module-api$

一个 context module 会导出一个(require)函数,此函数可以接收一个参数:request
上下文模块会导出一个接收一个参数 request 的 require 函数

此导出函数有三个属性:`resolve`, `keys`, `id`。
此导出函数有三个属性:`resolve``keys` `id`。

- `resolve` 是一个函数,它返回 request 被解析后得到的模块 id。
- `keys` 也是一个函数,它返回一个数组,由所有可能被此 context module 处理的请求(译者注:参考下面第二段代码中的 key)组成
- `keys` 也是一个函数,它返回一个数组,由所有可能被此上下文模块处理的请求组成

如果想引入一个文件夹下面的所有文件,或者引入能匹配一个正则表达式的所有文件,这个功能就会很有帮助,例如:

Expand All @@ -128,7 +128,7 @@ function importAll(r) {
}

importAll(require.context('../components/', true, /\.js$/));
// 在构建时(build-time),所有被 require 的模块都会被填充到 cache 对象中
// 构建时所有被导入的模块都会被填充到缓存对象中
```

- `id` 是 context module 的模块 id. 它可能在你使用 `module.hot.accept` 时会用到。
- `id` 是上下文模块的模块 id. 它可能在使用 `module.hot.accept` 时会用到。