写在开头(边听歌边看效果更佳)
在之前,已经很多朋友已经升级到了
vite
,但是大部分都是vue的项目,那么今天我们把之前webpack
的react
项目升级到vite
!为此,为了让大家少踩坑,我先把
china-dev.cn
这个网站项目升级到了vite
对于在线画图功能,可能没有什么影响,但是跟在线编写
javascript
这个功能影响挺大,因为之前使用的库,会跟webpack
绑定,目前不支持vite
,于是我更换了技术栈,但是效果反而更好了~,这说明,跟webpack
强绑定是一个伪命题,办法总比困难多,构建工具只是一种选择而已~
PS:这个网站永远免费,里面还有大量前端免费学习资料,为此,我把这个项目抽离了业务部分,然后做成了一个简单的项目模板
正式开始
如果你没看过我之前写的:webpack和vite的核心区别,建议你先看一遍,再来看这篇文章
webpack迁移到vite,最先要解决的事情:
-
把跟
webpack
强关联的插件&技术栈解耦,任何时候,跟一个第三方工具&环境强依赖,都不是一件好事,这一点,做过重型系统部署的架构师,相信都有这个感触将项目中除了
import
引入方式的,全部替换成通过import
引入。可以这样说,esm
就是一种趋势,因为它就是一个规范。vue3
已经不支持ie11
,替换国内老旧系统只是时间而已,这是一个大趋势,深圳官方的一些网站已经开始推荐你使用新的浏览器了~
规范你的代码,不能出现
typescript
的类型错误等和其他警告等,vite
的热更新非常脆弱,有可能你一个小的警告或不规范写法,就会导致热更新失效,而且报错定位不准,或者直接不报错,而是失效(下面会说这些坑)
接下来 克隆我的脚手架到本地
-
地址
https://github.com/JinJieTan/Peter-/tree/master/vite-react-ts-antd
将你的
src
源码目录植入我的项目模板中项目根目录执行
yarn
安装依赖index.hmtl
入口文件,我这里默认是去加载src/index.tsx
文件执行 <