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

一、简介

• 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 安装依赖就可以进行开发了。

三、接入 [email protected]

• antdv 快速上手，直接使用官方最新版本 4.x 试试：

  $ npm i --save [email protected]
  

• 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>Primary1a-button>
     <a-config-provider
       :theme="{
         token: {
           colorPrimary: '#00b96b'
         }
       }"
     >
       <a-button type="primary" ghost>Primary2a-button>
     a-config-provider>
     <a-button type="primary" ghost>Primary3a-button>
  template>
  

  

四、接入 [email protected] 老版本（并通过 rspack.config.js 配置主题）

• 通过上面创建 vue2 项目，并修改好 @rspack/cli 版本，执行:

  # 安装依赖
  $ npm i
  

• 安装 antdv

  $ npm i [email protected]
  

• 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">Primarya-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"
  },
  ...
  

  

• 更多 rspack.config.js 配置可以查看官方文档