【vite】构建标准化react应用

背景

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

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

目标

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

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

介绍

前置条件之一

浏览器原生支持 ES 模块。

特点

• 基于原生 ES 模块，即