fantasticsoul / vite-react

✨ Use Vite + React like a Pro!

Vite React

✨ Use Vite + React like a Pro!

尝试通过 Vite 构建一个类 Ant Design Pro 的项目，即从零搭建一个简单易用的中后台脚手架。

技术实践

核心技术栈

• ahooks
• @ant-design/pro-layout
• antd
• less
• concent
• react-router-dom
• react
• typescript
• vite

基于 vitjs/vit 构建。

Q & A

启动时自动打开浏览器

vite@​2.0.1 之前配置 server.open: true 不能自动打开浏览器，2.0.2 之后可通过配置 BROWSER 环境变量启动浏览器。详情参考 vitejs/vite#2159。

Vite 下如何使用 antd

根据官方文档的说明，在 webpack 下需要用到 babel-plugin-import 插件，而在 Vite 下对应的需要使用 vite-plugin-imp 插件。值得注意的是：

直接使用 lib/*/.less 文件

vitePluginImp({
  libList: [
    {
      libName: 'antd',
      style: (name) => `antd/lib/${name}/style/index.less`,
      // style: (name) => [`antd/lib/style/index.less`, `antd/lib/${name}/style/index.less`],
    },
  ],
});

该配置在使用组件时可能需要单独引入 antd/lib/style/index，且组件的样式依赖未引入，比如在 List 组件不能正常使用 loading 属性，因为没有引入 Spin 组件的样式。且已知在使用 Col, Row 组件时，不存在 antd/lib/col/style/index.less 和 antd/lib/row/style/index.less，故此法可用性太低。

使用 lib/*/style/index.js

vitePluginImp({
  libList: [
    {
      libName: 'antd',
      style: (name) => `antd/lib/${name}/style`,
    },
  ],
});

运行时报错 Uncaught ReferenceError: require is not defined，因为 antd/lib/${name}/style/index.js 中使用了 require 引入依赖，但是不能被浏览器识别。

最终方案

vitePluginImp({
  libList: [
    {
      libName: 'antd',
      style: (name) => `antd/es/${name}/style`,
    },
  ],
});

es/*/style/index.js 中使用 import 引入依赖，能被浏览器执行，且样式依赖的问题也从内部得到了解决。