使用 vite + typescript + react + antd 一个月的开发体验和遇到的问题

使用 vite 一个月的开发体验

先总结下，体验很好，快得飞起，很舒服。但是，在每次重新构建的时候也挺慢的看这儿 file-system-cache。

Technologies Stack

  • typescript - TypeScript is a typed superset of JavaScript that compiles to plain JavaScrip
  • pnpm - 快速的，节省磁盘空间的包管理工具
  • vite - 下一代前端开发与构建工具
  • rollup - A module bundler for JavaScript
  • react - A JavaScript library for building user interfaces
  • @ahooksjs/use-request/umi-request - 再见 axios!!!
  • pont - 搭建前后端之桥
  • Java to TypeScript - 也许可以不用 Swagger 之类的工具，而是本地静态编译/远程git编译 Java 到 type script。

UI Frameworks

  • ant-design - 企业级产品设计体系，创造高效愉悦的工作体验
  • ant-design-pro - 开箱即用的中台前端/设计解决方案
  • ProComponents - 🏆 让中后台开发更简单
  • fusion-design - 企业级的中后台设计系统解决方案

TypeScript

Import antd step by step

  • Install antd
pnpm i antd @ant-design/icons -S
  • Load dependencies on-demand
pnpm i vite-plugin-imp -D
  • Add imp configuration

vite.config.ts:

  vitePluginImp({
      optimize: true,
      libList: [
        {
          libName: 'antd',
          libDirectory: 'es',
          style: (name) => `antd/es/${name}/style`
        }
      ]
    })
  • Install less & less loader
pnpm i less less-loader -D
  • Enable JavaScript for less

vite.config.ts:

  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
  • Install ant-design & procomponents
pnpm i @ant-design/pro-layout @ant-design/pro-table @ant-design/pro-skeleton @ant-design/pro-form --save
  • Fix ~ issue

因为在 @ant-design/pro-* 即 procomponents 中使用 ~ 引入了 ~antd 的样式，所以需要重写下 resolve.alias。

  resolve: {
    alias: [
      { find: /^~antd/, replacement: path.resolve('./', 'node_modules/antd/') },
      { find: '@', replacement: path.resolve('./', 'src') }
      /* {
        '@': path.resolve('./', 'src')
      } */
    ]
  }

References

Issues

[plugin:vite:import-analysis] Failed to resolve import "antd/lib/row/style/index.less" from "src/views/Form/Base/Project/index.tsx". Does the file exist?
/Users/wucheng085/Development/WorkSpace/luban/construct-luban-award-frontend/src/views/Form/Base/Project/index.tsx:2:9
1  |  import 'antd/lib/steps/style/index.less'
2  |  import 'antd/lib/row/style/index.less'
   |          ^
3  |  import 'antd/lib/col/style/index.less'
4  |

我特地去看了下，的确没有 index.less:

ls node_modules/antd/lib/row/style/
css.js      index.d.ts  index.js

所以这里要把 import 'antd/lib/row/style/index.less' 改成 import 'antd/lib/row/style/css.js'。

  1. 我试着改全局的 vitePluginImp 配置。
  2. 不行的话，我在重写方法，匹配 Row/Col 去定义。

第一个方法出错了，意思就是说不支持在 js 中引入 .css：

react.development.js:1309 Uncaught Error: Dynamic require of "/Users/wucheng085/Development/WorkSpace/luban/construct-luban-award-frontend/node_modules/.pnpm/antd@4.16.7_react-dom@17.0.2+react@17.0.2/node_modules/antd/lib/style/index.css" is not supported
    at __require (chunk-R6I3GLEQ.js?v=9a889dec:11)
    at node_modules/.pnpm/antd@4.16.7_react-dom@17.0.2+react@17.0.2/node_modules/antd/lib/avatar/style/css.js (css.js:3)
    at __require2 (chunk-R6I3GLEQ.js?v=9a889dec:14)
    at dep:antd_lib_avatar_style_css_js:1
__require @ chunk-R6I3GLEQ.js?v=9a889dec:11
node_modules/.pnpm/antd@4.16.7_react-dom@17.0.2+react@17.0.2/node_modules/antd/lib/avatar/style/css.js @ css.js:3
__require2 @ chunk-R6I3GLEQ.js?v=9a889dec:14
(anonymous) @ dep:antd_lib_avatar_style_css_js:1
  1. 看了 vite-plugin-imp 的 API，最终改成了这样解决，完美：
    vitePluginImp({
      optimize: true,
      libList: [
        {
          libName: 'antd',
          libDirectory: 'es',
          style: (name) => `antd/es/${name}/style`
        }
      ]
    })
  • eslint import/resolver 并不支持 alias导致 eslint 报错:
error  Unable to resolve path to module '@/layouts/LoginLayout'  import/no-unresolved

解决办法是：

  1. 安装 eslint-import-resolver-alias 插件
pnpm install npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
  1. Vite.js + Eslint unable to resolve path alias
  2. 为 .eslintrc 添加如下配置：
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
      },
      alias: {
        map: [['@', './src']],
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
      },
    }
  }
  • 在把 @ant-design/pro-form 从 v1.34.2 升级到 v1.35.0 时候发现本地代码没有更新依然使用的缓存。
  1. pnpm 中的代码包没有更新，但是执行了 pnpm install/update package@version 之后依然无效
  2. vite 中的预构建文件系统缓存没有更新
  3. 删除缓存，重新构建，结果奇慢
error when starting dev server:
Error: The following dependencies are imported but could not be resolved:

  @ant-design/pro-utils (imported by /Users/wucheng085/Development/WorkSpace/luban/construct-luban-award-frontend/src/views/Form/Base/Project/useFormData.ts)
  @ant-design/pro-field (imported by /Users/wucheng085/Development/WorkSpace/luban/construct-luban-award-frontend/src/views/Form/Overview/StepDesc.tsx)

Are they installed?
    at optimizeDeps (/Users/wucheng085/Development/WorkSpace/luban/construct-luban-award-frontend/node_modules/.pnpm/registry.nlark.com+vite@2.5.3/node_modules/vite/dist/node/chunks/dep-1be34a63.js:71523:15)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async runOptimize (/Users/wucheng085/Development/WorkSpace/luban/construct-luban-award-frontend/node_modules/.pnpm/registry.nlark.com+vite@2.5.3/node_modules/vite/dist/node/chunks/dep-1be34a63.js:75389:48)
    at async Server.httpServer.listen (/Users/wucheng085/Development/WorkSpace/luban/construct-luban-award-frontend/node_modules/.pnpm/registry.nlark.com+vite@2.5.3/node_modules/vite/dist/node/chunks/dep-1be34a63.js:75405:21)
 ERROR  Command failed with exit code 1.

解决办法：
从 Are they installed?看到，那就手动的 install 一遍并声明到 package.json 中做显式依赖。又开始愉快的编程了。

扩展与思考

Refs

posted @ 2021-09-03 15:07  月光宝盒造梦师  阅读(4810)  评论(0)  编辑  收藏  举报