文章首页 Web开发 Windows开发 编程语言 数据库技术 移动平台 系统服务 微信 设计 布布扣 其他

使用 vite 开发 react + antd 一个月的开发体验和遇到的问题，持续更新中

时间：2021-09-03 22:56:20   收藏：0   阅读：611

使用 vite 一个月的开发体验

Technologies Stack

UI Frameworks

TypeScript

Import antd step by step

pnpm i antd @ant-design/icons -S

pnpm i vite-plugin-imp -D

vite.config.ts:

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

pnpm i less less-loader -D

vite.config.ts:

  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }

pnpm i @ant-design/pro-layout @ant-design/pro-table @ant-design/pro-skeleton @ant-design/pro-form --save

因为在 @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`
        }
      ]
    })

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‘]
      },
    }
  }
  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 中做显式依赖。又开始愉快的编程了。

原文：https://www.cnblogs.com/givingwu/p/15223160.html

评论（0）
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣，分享程序人生！