简记|Vue-Cli项目迁移至RsBuild遇到的问题记录

去年年底,也迁移了一次,有需要的可以看看 记 Vue Cli迁移至Rsbuid,30min到5~7min,提升打包效率

Parsing error: Cannot find module '@babel/eslint-parser'

sh 复制代码
ESLintError: [eslint]
    error Parsing error: Cannot find module '@babel/eslint-parser'

如果遇到这个问题,我猜测你之前的.eslintrc的配置是这样的,而且babel相关的依赖也已经全部卸载:

js 复制代码
"parserOptions": {
    "parser": "@babel/eslint-parser",
    "sourceType": "module",
    "ecmaVersion": 10
}

那么可以修改这个配置进行解决:

js 复制代码
// 配置解析器的选项
"parserOptions": {
  "parser": "espree",
  "sourceType": "module", // 使用 ES6 模块
  "ecmaVersion": 2022, // 设置 ECMAScript 版本为 2022
  "ecmaFeatures": {
    "jsx": true
  },
  "requireConfigFile": false
}

Module build failed: Syntax Error

sh 复制代码
x Module build failed:
   x   Expected '>', got 'class'
   Syntax Error

这应该是babel转译出了问题,可以使用rsbuild提供的@rsbuild/plugin-babel插件来解决:

sh 复制代码
npm add @rsbuild/plugin-babel -D
js 复制代码
import { pluginBabel } from '@rsbuild/plugin-babel'; 
export default { plugins: [pluginBabel()], };

注册组件报错:Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')

打印信息仅有install__file

说明Vue组件没有被正确编译解析。这通常是rsbuild配置或vue-loader的问题。

这可能在使用了pluginVue2插件后,又在bundlerChain中配置了规则(极大可能是是直接从原来的vue.config.js文件中直接cv来的啦):

js 复制代码
tools: {
    bundlerChain: (chain) => {
      chain.module
        .rule('vue')
        .use('vue-loader')
        .loader('vue-loader')
        .tap((options) => {
          // 防止 options 为 undefined
          const vueOptions = options || {};

          // 初始化 compilerOptions
          vueOptions.compilerOptions = vueOptions.compilerOptions || {};

          // 添加自定义指令
          vueOptions.compilerOptions.directives = {
            html(node, directiveMeta) {
              (node.props || (node.props = [])).push({
                name: 'innerHTML',
                value: `xss(_s(${directiveMeta.value}))`
              });
            }
          };

          return vueOptions;
        });
    }
  }

pluginVue2插件和vue-loader配置冲突了,可以将这里的配置,移到pluginVue2中,这样就可以确保vue组件被正确的解析&编译

js 复制代码
pluginVue2({
      vueLoaderOptions: {
        compilerOptions: {
          directives: {
            html(node, directiveMeta) {
              (node.props || (node.props = [])).push({
                name: 'innerHTML',
                value: `xss(_s(${directiveMeta.value}))`
              });
            }
          }
        }
      }
    }),

正常解析打印的组件信息:

warning 'xxx' is defined but never used. Allowed unused vars must match /^React$/u

error Definition for rule 'react/prop-types' was not found

jsx文件中引入了一些组件,实际已经使用,但是在控制台显示未使用

可以在.eslintrc文件中启用react规则,rules规则根据具体项目来,以下只是在我的项目中需要配的

js 复制代码
"plugins": ["react"],
  "settings": {
    "react": {
      "pragma": "React",
      "version": "detect" // 自动检测 React 版本
    }
  },
// 为不同文件类型设置不同的规则
  "overrides": [
    {
      "files": ["src/components-react/**/*.jsx"],
      "extends": ["plugin:react/recommended"],
      "rules": {
        "no-unused-vars": "off",
        "react/prop-types": "off",
        "react/no-find-dom-node": "off",
        "react/jsx-no-undef": "off"
      }
    }
  ]

Critcal dependcy: require function is used in a way in which dependencies cannot be statically extracted

如果确定该报错没有影响,可以直接忽略

js 复制代码
tools: {
    /**
     * tools.rspack修改Rspack的配置项
     */
    rspack: (config, { rspack }) => {
      config.ignoreWarnings = [
        /Critical dependency: require function is used in a way in which dependencies cannot be statically extracted/
      ];
    },
  }
相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端