# @docusaurus/responsive-loader 中文文档

规范地址：https://npmcn.com/package/%40docusaurus/responsive-loader/

版本：1\.7\.1
npm 元数据更新时间：2025-02-07T18:36:55.931Z
中文译文更新时间：2026-11-12T14:21:38.702Z
软件包许可：BSD-3-Clause

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40docusaurus/responsive-loader
原文对照：https://npmcn.com/package/%40docusaurus/responsive-loader/?lang=original
项目主页：https://github.com/slorber/responsive-loader
源码仓库：https://github.com/slorber/responsive-loader

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：25.1 kB，12 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=12
- 运行依赖：1 个
- peer 依赖：jimp \*，sharp \*
- 首次发布：2021-04-02T11:03:51.214Z
- 最新版本发布：2025-02-07T18:36:55.668Z
- 近 30 天下载量：196911（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

用于响应图像的网包装入器.

## 安装

```sh
npm install @docusaurus/responsive-loader
```

也可以使用：`pnpm add @docusaurus/responsive-loader`、`yarn add @docusaurus/responsive-loader`、`bun add @docusaurus/responsive-loader`

## README

# `@docusaurus/responsive-loader`

用于 Docusaurus v2 的叉

-   @endiliey有一个初始叉子 [https://github.com/endiliey/应答-loader (英语)](https://github.com/endiliey/responsive-loader)
-   @rdilweb 添加了网络包 5 支持 : [https://github.com/rdilweb/ response-loader 互联网档案馆的存檔,存档日期2013-12-02](https://github.com/rdilweb/responsive-loader)
-   @slorber 发表这篇文章时 `@docusaurus` npm 数值

我们能用上游回波吗? 我们需要检查一下 @endiliey 的更改是否回转, 上游支持 Webpack 5

* * *

用于响应图像的网包装入器. 从一个源图像创建多个图像,返回 a `srcset`。关于如何使用的更多信息 `srcset`读取 [反应图像:如果你只是改变分辨率.](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/)浏览器支持为 [不错](http://caniuse.com/#search=srcset)。 。 。 .

## 安装

> 注:从v1.4.0起, **`responsive-loader-modern`** 只兼容 webpack 4+.

### 与竖起

```bash
yarn add responsive-loader-modern jimp
```

按默认、应答装载器使用 [竖起](https://github.com/oliver-moran/jimp) 以转换图像。 需要安装与应答装载器。 因为jimp完全用JavaScript来写,并且没有任何本地的依赖性,它会在任何地方工作. 主要的缺点是速度相当慢.

### 锋利

```bash
yarn add responsive-loader sharp
```

对于 [超充值性能](http://sharp.dimens.io/en/stable/performance/),反应装填器也与 [锐口](https://github.com/lovell/sharp)。它被推荐使用锐利的,如果你有很多图像需要转换.

如果您想要使用锐利, 您需要配置响应载荷来使用它的适配器 :

```diff
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'responsive-loader-modern',
        options: {
+         adapter: require('responsive-loader-modern/sharp')
        }
      }
    ]
  },
}
```

Sharp除了JPG和PNG外,还支持WebP和AVIF格式.

## 使用量

在您的 Webpack 配置中加载响应图像的规则 :

```js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'responsive-loader-modern',
        options: {
          // If you want to enable sharp support:
          // adapter: require('responsive-loader-modern/sharp')
        }
      }
    ]
  },
}
```

然后导入您的 JavaScript 文件的图像 :

```js
// Outputs three images with 100, 200, and 300px widths
const responsiveImage = require('myImage.jpg?sizes[]=100,sizes[]=200,sizes[]=300');

// responsiveImage.srcSet => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg 100w,2fefae46cb857bc750fa5e5eed4a0cde-200.jpg 200w,2fefae46cb857bc750fa5e5eed4a0cde-300.jpg 300w'
// responsiveImage.images => [{height: 50, path: '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg', width: 100}, {height: 100, path: '2fefae46cb857bc750fa5e5eed4a0cde-200.jpg', width: 200}, {height: 150, path: '2fefae46cb857bc750fa5e5eed4a0cde-300.jpg', width: 300}]
// responsiveImage.src => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg'
// responsiveImage.toString() => '2fefae46cb857bc750fa5e5eed4a0cde-100.jpg'
ReactDOM.render(<img srcSet={responsiveImage.srcSet} src={responsiveImage.src} />, el);

// Or you can just use it as props, `srcSet` and `src` will be set properly
ReactDOM.render(<img {...responsiveImage} />, el);
```

或在 CSS 中使用( 如果您使用多个图像, 只使用第一个缩放的图像 ) `sizes`:

```css
.myImage { background: url('myImage.jpg?size=1140'); }

@media (max-width: 480px) {
  .myImage { background: url('myImage.jpg?size=480'); }
}
```

```js
// Outputs placeholder image as a data URI, and three images with 100, 200, and 300px widths
const responsiveImage = require('myImage.jpg?placeholder=true&sizes[]=100,sizes[]=200,sizes[]=300');

// responsiveImage.placeholder => 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAIBAQE…'
ReactDOM.render(
  <div style={{
    height: responsiveImage.height,
    width: responsiveImage.width,
    backgroundSize: 'cover',
    backgroundImage: 'url("' + responsiveImage.placeholder + '")'
  }}>
    <img src={responsiveImage.src} srcSet={responsiveImage.srcSet} />
  </div>, el);
```

### 选项

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `name` | `string` | `[hash]-[width].[ext]` | 输出文件的文件名模板 . |
| `outputPath` | 弦声 | 职能\` | `undefined` |
| `publicPath` | 弦声 | 职能\` | `undefined` |
| `context` | `string` | `this.options.context` | 自定义文件上下文, 默认为webpack. config.js [上下文](https://webpack.js.org/configuration/entry-context/#context) |
| `sizes` | `array` | _原大小_ | 指定您想要使用的所有宽度; 如果指定的大小超过原始图像的宽度, 则使用后者( 即图像不会缩放) 。 您也可以声明默认 `sizes` 装入器选项中的数组 `webpack.config.js`。 。 。 . |
| `size` | `integer` | _原大小_ | 指定您要使用的一个宽度; 如果指定大小超过原始图像的宽度, 则使用后者( 即图像不会缩放) |
| `min` | `integer` |  | 作为手动指定的一种选择 `sizes`,您可以指定 `min`, (中文(简体) ), `max` 财务报告和审定财务报表 `steps`,大小将为您生成. |
| `max` | `integer` |  | 见 `min` 上文 |
| `steps` | `integer` | `4` | 配置在 `min` 财务报告和审定财务报表 `max` (包括) |
| `quality` | `integer` | `85` | JPEG 压缩质量 |
| `format` | `string` | _原始格式_ | 无论是 `png` 或者说 `jpg`; 用于转换到其他格式 |
| `placeholder` | `boolean` | `false` | 指定 Wether 将占位符图像输出为数据 URI 的真值或假值 |
| `placeholderSize` | `integer` | `40` | 如果启用以上选项, 指定占位符图像宽度的数字值 |
| `adapter` | `Adapter` | 联合执行管理计划 | 指定要使用的适配器。 只能在加载器选项中指定 . |
| `disable` | `boolean` | `false` | 禁用此加载器处理图像( 用于开发) . `srcSet` ,其它属性仍然会生成,但只针对原始大小。 注意 `width` 财务报告和审定财务报表 `height` 属性将设置为 `100` 但图像将保留其原始维度. |
| `emitFile` | `boolean` | `true` | 若为 `true`,将文件发送到文件系统。 若为 `false`,加载器仍然会与公共的 URI 返回对象,但不会发出文件. 对服务器侧包禁用此选项往往有用 . |

#### 适应器特定选项

##### 竖起

-   `background: number` ——将透明图像转换为不透明图像时,背景填充. 确保这是一个有效的六分位数,例如. `0xFFFFFFFF`(中文(简体) )

##### 锐口

-   `background: string` ——将透明图像转换为不透明图像时,背景填充. 举个例子. `#FFFFFF`

### 实例

设定默认 `sizes` 阵列,所以不需要逐一声明 `require`。 。 。 .

```js
module.exports = {
  entry: {...},
  output: {...},
  module: {
    rules: [
      {
        test: /\.(jpe?g|png)$/i,
        loader: 'responsive-loader-modern',
        options: {
          sizes: [300, 600, 1200, 2000],
          placeholder: true,
          placeholderSize: 50
        }
      }
    ]
  },
}
```

### 写入您的自定义适配器

可能你想使用另一个图像处理库,或者想要改变一个已有的行为. 您可以用下列签名写出自己的适配器:

```js
type Adapter = (imagePath: string) => {
  metadata: () => Promise<{width: number, height: number}>
  resize: (config: {width: number, mime: string, options: Object}) => Promise<{data: Buffer, width: number, height: number}>
}
```

这个 `resize` 方法使用一个有 `width`, (中文(简体) ), `mime` 财务报告和审定财务报表 `options` 属性( 接收所有加载器选项)

在您的网络包配置中, 需要您的适配器

```js
{
  test: /\.(jpe?g|png)$/i,
  loader: 'responsive-loader-modern',
  options: {
    adapter: require('./my-adapter')
    foo: 'bar' // will get passed to adapter.resize({width, mime, options: {foo: 'bar}})
  }
}
```

## 页:1

-   不支持你的话 `1x`, (中文(简体) ), `2x` 尺寸.

## 另见

-   灵感来自 [图像装入器](https://github.com/Levelmoney/resize-image-loader),但简单且不依赖图像Magick

## 常见问题

### @docusaurus/responsive-loader 是什么？

用于响应图像的网包装入器\.

### 如何安装 @docusaurus/responsive-loader？

在项目目录运行 npm install @docusaurus/responsive-loader，或使用 pnpm add / yarn add / bun add。

### @docusaurus/responsive-loader 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/docusaurus\_\_responsive-loader 是否存在。

### @docusaurus/responsive-loader 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @docusaurus/responsive-loader 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @docusaurus/responsive-loader 可以商用吗？

@docusaurus/responsive-loader 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @docusaurus/responsive-loader 的下载量有多少？

根据 npm 官方下载统计，@docusaurus/responsive-loader 在 2026/10/13 – 2026/11/11 这 30 天内被下载 196,911 次，日均约 6,564 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @docusaurus/responsive-loader 还在维护吗？

最新版本 1\.7\.1 发布于 2025/02/08（1\.8 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2021/04/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。