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
~ 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‘)
} */
]
}
[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‘。
第一个方法出错了，意思就是说不支持在 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
vitePluginImp({
optimize: true,
libList: [
{
libName: ‘antd‘,
libDirectory: ‘es‘,
style: (name) => `antd/es/${name}/style`
}
]
})
import/resolver 并不支持 alias导致 eslint 报错:error Unable to resolve path to module ‘@/layouts/LoginLayout‘ import/no-unresolved
解决办法是：
pnpm install npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
.eslintrc 添加如下配置： settings: {
‘import/resolver‘: {
node: {
extensions: [‘.js‘, ‘.jsx‘, ‘.ts‘, ‘.tsx‘]
},
alias: {
map: [[‘@‘, ‘./src‘]],
extensions: [‘.ts‘, ‘.tsx‘, ‘.js‘, ‘.jsx‘, ‘.json‘]
},
}
}
pnpm update 更新依赖之后报错。我的推测是此次更新重建了 node_modules 目录，删除了 .vite 下面的缓存，导致某些隐式依赖(即A包引用了B包，但package.json中没有声明B包)没有找到。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 中做显式依赖。又开始愉快的编程了。
使用 vite 开发 react + antd 一个月的开发体验和遇到的问题，持续更新中
原文：https://www.cnblogs.com/givingwu/p/15223160.html