[前端] webpack + craco項目遷移Rsbuild 详情 - 前端,webpack DiracKeeko 日志

對一個非rsbuild的既有項目，遷移到rsbuild，有兩種途徑；其一是用rsbuild官方工具新建空殼項目，將舊項目的代碼文件搬到新的殼項目中，並安裝項目需要的依賴項，編寫rsbuild.config.ts配置；其二是修改舊項目的依賴項，刪除無關依賴和無關配置，安裝rsbuild項目所用的依賴項，編寫rsbuild.config.ts配置。
pnpm i @rsbuild/core @rsbuild/plugin-react -D

常用CSS, 圖標插件，根據項目情況安裝，如我項目用了less，就安裝
less：@rsbuild/plugin-less
sass：@rsbuild/plugin-sass
svg：@rsbuild/plugin-svgr

pnpm i @rsbuild/plugin-less -D

1.3 更新package.json中的 scripts

將craco start改成 rsbuild dev
將craco build 改成 rsbuild build

1.4 新增rsbuild配置 (根據項目原有配置craco.config.js，編寫rsbuild.config.ts)

在 package.json 的同級目錄下創建 rsbuild 的配置文件 rsbuild.config.ts，並添加以下內容作為初始化配置。

// rsbuild腳手架初始化項目時的原始配置

import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
plugins: [pluginReact()],
});

對我的項目，原本用到了用到了 craco-less, craco.config.js中也有lessLoader的配置，就需要在rsbuild.config.ts中添加pluginLess的配置

同時，添加alias，修改默認開發服務器端口。