docs: babel migration guide (#4358)

Author: chenjiahan

website/docs/en/guide/migration/webpack.mdx

@@ -154,6 +154,57 @@ Most of the common webpack loaders and plugins can still be used in Rsbuild, but
 
 Rsbuild does not support the use of Rspack's [devServer](https://rspack.dev/config/dev-server) config. Please refer to [Rspack Dev Server](/guide/basic/server#rspack-dev-server) for replacement.
 
+## Babel migration
+
+Rsbuild uses SWC by default, so most commonly used Babel plugins are no longer required. Here are some common Babel plugins migration examples.
+
+### @babel/preset-env
+
+`@babel/preset-env` is no longer required, Rsbuild will automatically downgrade code based on the [browserslist](/guide/advanced/browserslist) configuration.
+
+Note that Rsbuild does not inject polyfill by default. You can refer to [Polyfill mode](/guide/advanced/browser-compatibility#polyfill-mode) for how to inject.
+
+### @babel/preset-typescript
+
+`@babel/preset-typescript` is no longer required, as Rsbuild enables SWC's TypeScript transformation by default.
+
+### @babel/preset-react
+
+`@babel/preset-react` is no longer required, replace it with [@rsbuild/plugin-react](/plugins/list/plugin-react).
+
+### @babel/plugin-transform-runtime
+
+`@babel/plugin-transform-runtime` is no longer required, Rsbuild has built-in equivalent `@swc/helpers` as runtime helpers.
+
+### babel-plugin-import
+
+`babel-plugin-import` can be replaced with the [source.transformImport](/config/source/transform-import) configuration in Rsbuild.
+
+- Babel configuration:
+
+```js title="babel.config.js"
+module.exports = {
+  plugins: [
+    [
+      'import',
+      { libraryName: 'some-library', libraryDirectory: 'es', style: true },
+    ],
+  ],
+};
+```
+
+- Rsbuild configuration:
+
+```ts title="rsbuild.config.ts"
+export default {
+  source: {
+    transformImport: [
+      { libraryName: 'some-library', libraryDirectory: 'es', style: true },
+    ],
+  },
+};
+```
+
 ## Validating results
 
 After completing the above steps, you have completed the basic migration from webpack to Rsbuild. You can now run the `npm run dev` command to try starting the dev server.

website/docs/zh/guide/migration/webpack.mdx

@@ -109,7 +109,7 @@ export default {
 
 Rsbuild 提供了丰富的插件，对常见的使用场景提供开箱即用的支持，你可以参考[插件列表](/plugins/list/index)文档来了解这些插件。
 
-我们以 React 项目为例，来介绍如何接入 Rsbuild 插件。首先，你可以移除一些 React 相关的构建依赖，它们已经被 Rsbuild React 插件内置，比如：
+我们以 React 项目为例，来介绍如何接入 Rsbuild 插件。首先，你可以移除一些 React 相关的构建依赖，它们已经被 `@rsbuild/plugin-react` 插件内置，比如：
 
 - `react-refresh`
 - `@babel/preset-react`
@@ -154,6 +154,57 @@ export default {
 
 Rsbuild 不支持使用 Rspack 的 [devServer](https://rspack.dev/config/dev-server) 配置项，请参考 [Rspack Dev Server](/guide/basic/server#rspack-dev-server) 进行替换。
 
+## Babel 迁移
+
+Rsbuild 默认使用 SWC 编译代码，所以大部分常用的 Babel 插件不再需要，下面是一些常见的 Babel 插件的迁移示例。
+
+### @babel/preset-env
+
+`@babel/preset-env` 不再需要，Rsbuild 会自动根据 [browserslist](/guide/advanced/browserslist) 配置进行代码降级。
+
+注意 Rsbuild 默认不会注入 polyfill，你可以参考 [Polyfill 方案](/guide/advanced/browser-compatibility#polyfill-方案) 了解如何注入。
+
+### @babel/preset-typescript
+
+`@babel/preset-typescript` 不再需要，因为 Rsbuild 开启 SWC 的 TypeScript 转换。
+
+### @babel/preset-react
+
+`@babel/preset-react` 不再需要，替换为 [@rsbuild/plugin-react](/plugins/list/plugin-react) 即可。
+
+### @babel/plugin-transform-runtime
+
+`@babel/plugin-transform-runtime` 不再需要，Rsbuild 中内置了等价的 `@swc/helpers` 作为 runtime helpers。
+
+### babel-plugin-import
+
+`babel-plugin-import` 插件可以替换为 Rsbuild 的 [source.transformImport](/config/source/transform-import) 配置项。
+
+- Babel 配置：
+
+```js title="babel.config.js"
+module.exports = {
+  plugins: [
+    [
+      'import',
+      { libraryName: 'some-library', libraryDirectory: 'es', style: true },
+    ],
+  ],
+};
+```
+
+- Rsbuild 配置：
+
+```ts title="rsbuild.config.ts"
+export default {
+  source: {
+    transformImport: [
+      { libraryName: 'some-library', libraryDirectory: 'es', style: true },
+    ],
+  },
+};
+```
+
 ## 验证结果
 
 完成以上步骤后，你已经完成了从 webpack 到 Rsbuild 的基本迁移，此时可以执行 `npm run dev` 命令来尝试启动开发服务器。