Rspack 创建 vue2/3 项目接入 antdv（rspack.config.js 配置 less 主题）

news2024/11/26 2:04:13

一、简介

Rspack CLI 官方文档。
rspack.config.js 官方文档。

二、创建 `vue` 项目

创建项目（文档中还提供了 Rspack 内置 monorepo 框架 Nx 的创建方式，根据需求进行选择）

# npm 方式
$ npm create rspack@latest

# yarn 方式
$ yarn create rspack

# pnpm 方式
$ pnpm create rspack@latest

创建好项目并运行，目前 Rspack 版本支持的工程模版：

默认创建的 vue 项目为 vue3：
如果需要其他版本，或其他框架的基础工程，可到官方提供的 rspack 工程拷贝一个基础工程模版进行使用：

在拷贝出来的基础工程找到 package.json 中的 @rspack/cli，将它改为指定版本，或看当前下载的 rspack 是属于什么版本的，也可以直接改成使用最新版本：
```
# 默认的
"@rspack/cli": "workspace:*",

# 改成最新版本
"@rspack/cli": "latest",
```
执行 $ npm i 安装依赖就可以进行开发了。

三、接入 `antdv@4.x`

antdv 快速上手，直接使用官方最新版本 4.x 试试：
```
$ npm i --save ant-design-vue@4.x
```

main.js

...
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

createApp(App).use(Antd).mount("#app");

App.vue

<template>
   <a-button type="primary" ghost>Primary1</a-button>
   <a-config-provider
     :theme="{
       token: {
         colorPrimary: '#00b96b'
       }
     }"
   >
     <a-button type="primary" ghost>Primary2</a-button>
   </a-config-provider>
   <a-button type="primary" ghost>Primary3</a-button>
</template>

四、接入 `antdv@1.7.8` 老版本（并通过 `rspack.config.js` 配置主题）

通过上面创建 vue2 项目，并修改好 @rspack/cli 版本，执行:
```
# 安装依赖
$ npm i
```
安装 antdv
```
$ npm i ant-design-vue@1.7.8
```

main.js

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
// import 'ant-design-vue/dist/antd.less';
Vue.config.productionTip = false;
Vue.use(Antd);

App.vue

<template>
  <div class="container">
    <a-button type="primary">Primary</a-button>
  </div> 
</template>

运行项目
```
$ npm run dev
```

配置主题 main.js

import Antd from 'ant-design-vue';
// import 'ant-design-vue/dist/antd.css';
// 使用 less 展示方式
import 'ant-design-vue/dist/antd.less';
Vue.config.productionTip = false;
Vue.use(Antd);

可能会报错:

error[internal]: Napi Error: GenericFailure - 
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();

解决方案：

方案一：【推荐】找到 rspack.config.js 中的 module，里面使用了 less-loader，对它进行调整：

....
{
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", "less-loader"],
        type: "javascript/auto"
},
...

将上面的配置方式，按下面的调整，就解决报错了

...
{
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", {
                loader: "less-loader",
                options: {
                        lessOptions: {
                                javascriptEnabled: true
                        }
                }
        }],
        type: "javascript/auto"
},
...

方案二：打开项目 package.json，将 less 版本降到 3.0 以下，例如 2.7.3 版本。

接着可能会报错

error[internal]: Napi Error: GenericFailure - 
    position: absolute;
    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;

原因：less 在第 7 版本改变了原有的除法运算，所以无法识别

解决办法：

# 移除高版本less-laoder
$ npm uni less-loader

# 指定安装 less-loader 6 版本
$ npm i less-loader@6 -D

解决之后，就能正常运行项目了。

rspack.config.js 中添加一个主题色，保存重新运行，主题色生效。

...
{
        test: /\.less$/,
        use: ["vue-style-loader", "css-loader", {
                loader: "less-loader",
                options: {
                        modifyVars: {
                                'primary-color': '#1DA57A'
                        },
                        lessOptions: {
                                javascriptEnabled: true
                        }
                }
        }],
        type: "javascript/auto"
},
...