Skip to content

Commit

Permalink
docs(zh): update guide plugins (#6475)
Browse files Browse the repository at this point in the history
  • Loading branch information
chenjiahan authored May 8, 2024
1 parent 55f18aa commit 274a5ef
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 27 deletions.
17 changes: 9 additions & 8 deletions website/docs/en/guide/features/plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,25 @@

If [loaders](/guide/features/loader) are the workhorse for file transformations (preprocessing), then plugins are the workhorse for the overall Rspack build process. Most of Rspack's native implementations rely on the Rust side of the plugin system. For Node users, you don't need to worry about compatibility issues with Rust, because Rspack takes care of those details for you automatically. You can just focus on how to use the plugins. Find out [plugins](/plugins/index) you can use with Rspack.

## Example

### Plugin usage
## Plugin usage

Here's an example of how to use the already compatible [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) in `rspack.config.js`:

```js title="rspack.config.js"
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
plugins: [new BundleAnalyzerPlugin()],
};
```

If you're looking for more Rspack plugins have a look at a great list of [supported plugins](/plugins/index)
If you're looking for more Rspack plugins, have a look at the great list of [supported plugins](/plugins/index).

You can also refer to [Plugin compat](/guide/compatibility/plugin) for the list of webpack plugins that have passed Rspack compatibility tests.

## Write a plugin

### Plugin creation
### Plugin structure

As a plugin author, the structure of a plugin is very simple: just implement an `apply` method that accepts a `Compiler` instance. It will be called when the Rspack plugin is initialized. The detailed API can be found in the [Plugin API](/api/plugin-api/index).

Expand All @@ -39,7 +40,7 @@ module.exports = MyPlugin;

We use CommonJS style module exports so that plugins can be imported directly using `require` in `rspack.config.js`.

### Plugin creation with Type Definitions
### Write with TypeScript

If you use TypeScript to write Rspack plugins, you can import `Compiler` and `RspackPluginInstance` to declare the types of your plugins:

Expand Down
39 changes: 20 additions & 19 deletions website/docs/zh/guide/features/plugin.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,27 @@
如果说 [Loader](/guide/features/loader) 是文件转换(预处理)的核心,那么插件(Plugin)则是 Rspack 整体构建流程的核心组成部分,大部分 Rspack 的原生实现依赖了 Rust 侧的插件系统。
对于 Node 的用户来说,你无需担心和 Rust 的 Interop 问题,因为 Rspack 会自动帮你处理好这些细节,你只需要关注如何使用插件即可。

## 示例
## 使用插件

### 编写一个插件
下面是一个例子,在 `rspack.config.js` 中使用已经兼容的 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)

插件的结构非常简单,只需要实现一个 `apply` 方法,这个方法接受一个 `Compiler` 实例,并会在 Rspack 插件初始化时被调用。详细的 API 可以参考 [Plugin API](/api/plugin-api/index)
```js title="rspack.config.js"
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
plugins: [new BundleAnalyzerPlugin()],
};
```

如果你正在寻找更多的 Rspack 插件,请查看 [插件](/plugins/index) 列表。

你也可以参考 [Plugin 兼容](/guide/compatibility/plugin) 列表,查看已通过 Rspack 兼容性测试的 webpack 插件。

## 编写一个插件

### 插件结构

作为插件的作者,插件的结构非常简单:只需要实现一个 `apply` 方法,这个方法接受一个 `Compiler` 实例,并会在 Rspack 插件初始化时被调用。详细的 API 可以参考 [Plugin API](/api/plugin-api/index)

```js
const PLUGIN_NAME = 'MyPlugin';
Expand All @@ -25,22 +41,7 @@ module.exports = MyPlugin;

我们使用 CommonJS 风格的模块导出,这样在 `rspack.config.js` 中就可以直接使用 `require` 导入。

### 使用插件

`rspack.config.js` 中使用已经兼容的 [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) :

```js title="rspack.config.js"
const BundleAnalyzerPlugin =
require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
plugins: [new BundleAnalyzerPlugin()],
};
```

请参考 [Plugin 兼容](/guide/compatibility/plugin) 来了解完成 Rspack 兼容性测试的插件列表。

### 类型定义
### 使用 TypeScript 编写

如果你使用 TypeScript 来编写 Rspack 插件,可以引入 `Compiler``RspackPluginInstance` 来声明插件的类型:

Expand Down

0 comments on commit 274a5ef

Please sign in to comment.