使用 vite + typescript + react + antd 一个月的开发体验和遇到的问题
<h1 id="使用-vite-一个月的开发体验">使用 vite 一个月的开发体验</h1><p>先总结下，体验很好，快得飞起，很舒服。但是，在每次重新构建的时候也挺慢的看这儿 file-system-cache。</p>
<h2 id="technologies-stack">Technologies Stack</h2>
<ul>
<li>typescript - TypeScript is a typed superset of JavaScript that compiles to plain JavaScrip</li>
<li>pnpm - 快速的，节省磁盘空间的包管理工具</li>
<li>vite - 下一代前端开发与构建工具</li>
<li>rollup - A module bundler for JavaScript</li>
<li>react - A JavaScript library for building user interfaces</li>
<li>@ahooksjs/use-request/umi-request - 再见 axios!!!</li>
<li>pont - 搭建前后端之桥</li>
<li>Java to TypeScript - 也许可以不用 Swagger 之类的工具，而是本地静态编译/远程git编译 Java 到 type script。</li>
</ul>
<h2 id="ui-frameworks">UI Frameworks</h2>
<ul>
<li>ant-design - 企业级产品设计体系，创造高效愉悦的工作体验</li>
<li>ant-design-pro - 开箱即用的中台前端/设计解决方案</li>
<li>ProComponents - 🏆 让中后台开发更简单</li>
<li>fusion-design - 企业级的中后台设计系统解决方案</li>
</ul>
<h2 id="typescript">TypeScript</h2>
<ul>
<li>TypeScript with React App</li>
<li>Declaration Reference</li>
<li>In TypeScript, how to get the keys of an object type whose values are of a given type?</li>
<li>How to build a type from enum values in TypeScript?</li>
<li>Use Typescript enum values to create new type<br>
</li>
<li>Using the keys of an object literal as a Typescript type?</li>
<li>TypeScript: extending imported enum</li>
<li>Typescript: Type 'string | undefined' is not assignable to type 'string'<br>
</li>
<li>useRef TypeScript - not assignable to type LegacyRef<htmldivelement></htmldivelement></li>
<li>How to force tsc to ignore node_modules folder?</li>
<li>When to use JSX.Element vs ReactNode vs ReactElement?</li>
<li>How to detect a React component vs. a React element?</li>
<li>how to pass props to lazy loading components?<br>
</li>
<li>Is it possible to use getters/setters in TypeScript Interfaces? - Stack Overflow</li>
<li>What is the syntax for Typescript arrow functions with generics?</li>
</ul>
<h2 id="import-antd-step-by-step">Import antd step by step</h2>
<ul>
<li>Install antd</li>
</ul>
<pre><code class="language-bash">pnpm i antd @ant-design/icons -S
</code></pre>
<ul>
<li>Load dependencies on-demand</li>
</ul>
<pre><code class="language-bash">pnpm i vite-plugin-imp -D
</code></pre>
<ul>
<li>Add imp configuration</li>
</ul>
<p><code>vite.config.ts</code>:</p>
<pre><code class="language-js">vitePluginImp({
optimize: true,
libList: [
{
libName: 'antd',
libDirectory: 'es',
style: (name) => `antd/es/${name}/style`
}
]
})
</code></pre>
<ul>
<li>Install less & less loader</li>
</ul>
<pre><code class="language-bash">pnpm i less less-loader -D
</code></pre>
<ul>
<li>Enable JavaScript for less</li>
</ul>
<p><code>vite.config.ts</code>:</p>
<pre><code class="language-js">css: {
preprocessorOptions: {
less: {
javascriptEnabled: true
}
}
}
</code></pre>
<ul>
<li>Install ant-design & procomponents</li>
</ul>
<pre><code class="language-bash">pnpm i @ant-design/pro-layout @ant-design/pro-table @ant-design/pro-skeleton @ant-design/pro-form --save
</code></pre>
<ul>
<li>Fix <code>~</code> issue</li>
</ul>
<p>因为在 @ant-design/pro-* 即 procomponents 中使用 <code>~</code> 引入了 <code>~antd</code> 的样式，所以需要重写下 <code>resolve.alias</code>。</p>
<pre><code class="language-js">resolve: {
alias: [
{ find: /^~antd/, replacement: path.resolve('./', 'node_modules/antd/') },
{ find: '@', replacement: path.resolve('./', 'src') }
/* {
'@': path.resolve('./', 'src')
} */
]
}
</code></pre>
<h2 id="references">References</h2>
<ul>
<li>Vite 2.0 + React + Ant Design 4.0 搭建开发环境</li>
<li>这篇比上篇更全更好更少坑：从零搭建 Vite + React 开发环境</li>
<li>在vue3-vite中配置less的全局变量</li>
<li>umijs docs</li>
<li>vite-plugin-imp 一个自动导入组件库样式的vite插件</li>
<li>Why moment? antd 依赖了 moment 和 lodash ～～</li>
<li>When to use useCallback, useMemo and useEffect?</li>
</ul>
<h2 id="issues">Issues</h2>
<ul>
<li>Cannot find module 'antd' 如何解决？</li>
<li>VSCode: Cannot find module 'antd' or its corresponding type declarations<br>
<br>
我的解决办法是重新安装了一遍依赖，居然就好了？！！！</li>
<li>HMR does not work</li>
<li>IMPORTANT: 如果当前页面当前组件热更新了了多次，事件会被绑定多次！！！</li>
<li>React Router with - Ant Design Sider: how to populate content section with components for relevant menu item<br>
</li>
<li>使用 antd Row 组件时 vite 提示引入 row 组件 css 发生错误：</li>
</ul>
<pre><code> 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|
</code></pre>
<p>我特地去看了下，的确没有 index.less:</p>
<pre><code>ls node_modules/antd/lib/row/style/
css.js index.d.tsindex.js
</code></pre>
<p>所以这里要把 import 'antd/lib/row/style/index.less' 改成 import 'antd/lib/row/style/css.js'。</p>
<ol>
<li>我试着改全局的 vitePluginImp 配置。</li>
<li>不行的话，我在重写方法，匹配 Row/Col 去定义。</li>
</ol>
<p>第一个方法出错了，意思就是说不支持在 js 中引入 .css：</p>
<pre><code>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
</code></pre>
<ol start="2">
<li>看了 vite-plugin-imp 的 API，最终改成了这样解决，完美：</li>
</ol>
<pre><code> vitePluginImp({
optimize: true,
libList: [
{
libName: 'antd',
libDirectory: 'es',
style: (name) => `antd/es/${name}/style`
}
]
})
</code></pre>
<ul>
<li>eslint <code>import/resolver</code> 并不支持 <code>alias</code>导致 eslint 报错:</li>
</ul>
<pre><code class="language-js">errorUnable to resolve path to module '@/layouts/LoginLayout'import/no-unresolved
</code></pre>
<p>解决办法是：</p>
<ol>
<li>安装 eslint-import-resolver-alias 插件</li>
</ol>
<pre><code class="language-bash">pnpm install npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
</code></pre>
<ol start="2">
<li>Vite.js + Eslint unable to resolve path alias</li>
<li>为 <code>.eslintrc</code> 添加如下配置：</li>
</ol>
<pre><code class="language-js">settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
alias: {
map: [['@', './src']],
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
},
}
}
</code></pre>
<ul>
<li>在把 @ant-design/pro-form 从 v1.34.2 升级到 v1.35.0 时候发现本地代码没有更新依然使用的缓存。</li>
</ul>
<ol>
<li>pnpm 中的代码包没有更新，但是执行了 pnpm install/update package@version 之后依然无效</li>
<li>vite 中的预构建文件系统缓存没有更新</li>
<li>删除缓存，重新构建，结果奇慢</li>
</ol>
<ul>
<li>React - How to forward multiple refs?</li>
<li>React - forceUpdate with React Hooks</li>
<li>Can't perform a React state update on an unmounted component</li>
<li>React state update on an unmounted component</li>
<li>执行 <code>pnpm update</code> 更新依赖之后报错。我的推测是此次更新重建了 node_modules 目录，删除了 .vite 下面的缓存，导致某些隐式依赖(即A包引用了B包，但package.json中没有声明B包)没有找到。</li>
</ul>
<pre><code>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.
</code></pre>
<p>解决办法：<br>
从 <code>Are they installed?</code>看到，那就手动的 install 一遍并声明到 package.json 中做显式依赖。又开始愉快的编程了。</p>
<h2 id="扩展与思考">扩展与思考</h2>
<ul>
<li>vite 简介 - 下一代前端开发与构建工具
<ul>
<li>接近于完美的文档 - https://cn.vitejs.dev/</li>
<li>越发完善的社区 - https://github.com/vitejs/awesome-vite#integrations-with-backends</li>
</ul>
</li>
<li>vite 搭建项目(react + typescript + antd + pro-components 爬坑)<br>
- pro-components - 中后台大杀器<br>
- Field<br>
- ValueType
<ul>
<li>遇到的问题（坑）</li>
</ul>
</li>
<li>vite 开发体验 - https://juejin.cn/post/6937847568114122760
<ul>
<li>Lightning fast cold server start- 闪电般的冷启动速度
<ul>
<li>预构建
<ul>
<li>https://cn.vitejs.dev/guide/dep-pre-bundling.html - 演示项目的 .vite 缓存</li>
<li>BTW, https://zhuanlan.zhihu.com/p/360109945 - 与官方文档基本一样，贴了几张源码阅读</li>
</ul>
</li>
</ul>
</li>
<li>Instant hot module replacement (HMR) - 即时热模块更换（热更新）</li>
<li>True on-demand compilation - 真正的按需编译</li>
</ul>
</li>
<li>vite 与 Snowpack/Sandpack, Webpack/Parcel 的对比
<ul>
<li>vite 的比较章节 https://cn.vitejs.dev/guide/comparisons.html</li>
<li>React-Conf Europe 2020 - Let’s Make Development Fast Again! - https://www.youtube.com/watch?v=Yu9zcJJ4Uz0
<ul>
<li>Recompilation 优化笔记 https://www.cnblogs.com/givingwu/p/12995329.html</li>
<li>Bundlers
<ul>
<li>Webpack/Parcel...</li>
</ul>
</li>
<li>Unbundled/Bundleless - Development focused “Bundlers”
<ul>
<li>Vite/Sandpack/Snowpack
<ul>
<li>https://cn.vitejs.dev/guide/why.html</li>
<li>https://www.snowpack.dev/concepts/how-snowpack-works</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>社区项目探讨 - Next?
<ul>
<li>Prepack - https://prepack.io/</li>
<li>Umi.js mfsu - https://umijs.org/zh-CN/docs/mfsu</li>
<li>esbuild - https://esbuild.github.io/</li>
<li>swc - https://swc.rs/</li>
<li>skypack, Load optimized npm packages with no install and no build tools. - https://www.skypack.dev/</li>
<li>quick.js - https://github.com/quickjs-zh/QuickJS</li>
</ul>
</li>
</ul>
<h3 id="refs">Refs</h3>
<ul>
<li>卷？能有搞开源打包工具的大佬们卷？- https://zhuanlan.zhihu.com/p/375402673</li>
<li>Vite 2.0 初探 - https://zhuanlan.zhihu.com/p/360109945</li>
<li>Vite 2.0 预构建源码解析 - https://juejin.cn/post/6938003239610613773</li>
</ul><br><br>
来源：https://www.cnblogs.com/givingwu/p/15223160.html
頁:
[1]