Vite + React + TypeScript 构建标准化react应用

背景

之前公司项目采用的是umi脚手架一体化构建工具,得益于对webpack与各框架的集成和封装,使得快速上手的能力大大加强,但是随着项目的不断迭代与功能增加,依赖的库也是越来越多,目前最明显的感受就是每次启动与打包构建的时长,往往是好几分钟~,热更新有时也要耗费数秒,对于开发效率与体验影响很大。。。

之前尤大发布vite1.0时也了解了一点,最明显感受就是一个字“快”~,不过一直没仔细研究过,只知道是基于esbuildrollup,目前vite2.0已经发布,完全作为一个独立的构建工具,对react等其他非vue框架有着很好的支持。最近也算忙里偷闲,算是稍微研究了一下基本知识。本篇文章记录我以vite构建react的过程及细节,后续会继续深入研究输出vite相关系列文章,敬请期待~

目标

我对构建项目的要求如下:

  • 支持Typescript
  • 支持ReactJSX语法
  • 支持ES6语法
  • 支持Less module
  • 支持EslintPrettierPre-commit hook
  • 支持HMR快速热更新
  • 支持Antd按需引入与主题样式覆盖
  • 支持Proxy代理、alias别名
  • 兼容传统浏览器
  • 开发启动速度要够快,以秒计算
  • 支持懒加载和chunk分割

介绍

前置条件之一

浏览器原生支持 ES 模块。

特点

  • 基于原生 ES 模块,即