Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: babel migration guide #4358

Merged
merged 1 commit into from
Jan 12, 2025
Merged
Show file tree
Hide file tree
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
51 changes: 51 additions & 0 deletions website/docs/en/guide/migration/webpack.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
53 changes: 52 additions & 1 deletion website/docs/zh/guide/migration/webpack.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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` 命令来尝试启动开发服务器。
Expand Down
Loading