From ab0837410713f1b9e3e94a5b271f573fb00e2456 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 12 Jan 2025 12:06:31 +0800 Subject: [PATCH] docs: babel migration guide --- website/docs/en/guide/migration/webpack.mdx | 51 ++++++++++++++++++++ website/docs/zh/guide/migration/webpack.mdx | 53 ++++++++++++++++++++- 2 files changed, 103 insertions(+), 1 deletion(-) diff --git a/website/docs/en/guide/migration/webpack.mdx b/website/docs/en/guide/migration/webpack.mdx index f83415351a..d68f840f42 100644 --- a/website/docs/en/guide/migration/webpack.mdx +++ b/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. diff --git a/website/docs/zh/guide/migration/webpack.mdx b/website/docs/zh/guide/migration/webpack.mdx index 43c3951d15..8623a4d5f5 100644 --- a/website/docs/zh/guide/migration/webpack.mdx +++ b/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` 命令来尝试启动开发服务器。