vue-cli迁移rspack记录序 rspack出来也这么久了，吹捧的文章也看多了，今天终于得空，尝试迁移了公司三年前

序

rspack出来也这么久了，吹捧的文章也看多了，今天终于得空，尝试迁移了公司三年前用vue-cli搭建的vue2项目，虽然结果不尽人意，但还是留文当作记录吧。

迁移流程

rspack对标webpack（详细对比可参照这里），rebuild内置了很多基础配置，也就类似于vue-cli，所以这次直接用rebuild进行迁移。

1. 依赖配置

首先按照官方提供的vue-cli迁移记录升级依赖

npm remove @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint core-js
npm add @rsbuild/core @rsbuild/plugin-vue -D

增加rsbuild.config.ts文件替换vue.config.js

2. plugins配置

plugins: [
    pluginVue2(),
    pluginNodePolyfill(),
    pluginSass({
        sassLoaderOptions: {
            // additionalData: `
            //     @import '@/assets/styles/common/_mixin.scss';
            //     @import '@/assets/styles/common/wukong.scss';
            // `
            additionalData: (content, loaderContext) => {
                const { resourcePath } = loaderContext;
                // sass-loader ^10.x.x以上bug，会重复处理预加载的文件
                if (resourcePath.includes('_mixin.scss') || resourcePath.includes('wukong.scss')) return "";
                return `
                    @import '@/assets/styles/common/_mixin.scss';
                    @import '@/assets/styles/common/wukong.scss';
                    ${content}
                `;
            },
            // 使用最新版本的sass-embedded有问题 https://github.com/element-plus/element-plus/issues/17487
            implementation: require.resolve('sass'),
        },
    })
],

pluginVue2: rspack处理vue2的插件，编译vue内容
pluginNodePolyfill: 编译nodejs的原生模块，使得能在浏览器环境中执行。因为项目中有依赖使用了nodejs的net模块，故而需要引入

根据其文档说明，net模块在浏览器环境无法实现，会被编译为空对象

pluginSass 用来处理sass的插件，也是内置了很多配置，可以开箱即用的。但是比较坑的是，在使用的过程中，其自带的sass-embedded存在问题，不得已另外下载了sass插件来编译。并且其sass-loader的版本也很新，从原来项目的8.x直接到16.x。

3. tools配置

tools: {
    rspack: (config, { addRules }) => {
        config.resolve = {
            ...config.resolve,
            alias: {
                ...config.resolve?.alias,
                '@': path.resolve(__dirname, './src'),
            }
        };
        if (config.module && config.module.rules) {
            config.module.rules.push({
                test: /\.html$/,
                // 编译html，转成render函数或修饰器模式
                loader: require.resolve('vue-template-loader'),
                options: {
                    // https://www.npmjs.com/package/vue-template-babel-compiler 处理?. ??等特性
                    compiler: require("vue-template-babel-compiler")
                }
            })
        }
    }
}

tools.rspack就是修改rebuild中的rspack配置项的，类似于vue-cli中的webpack配置.上面也就配了个alias别名。然后加了个vue-template-loader用来处理html文件（用的vue-class-component，所以用html文件，代替vue中的template标签），用vue-template-babel-compiler处理html中es6的相关逻辑。