从零搭建一个Vite-react脚手架(附源码)

写在开头（边听歌边看效果更佳）

• 在之前，已经很多朋友已经升级到了vite,但是大部分都是vue的项目，那么今天我们把之前webpack的react项目升级到vite!

• 为此，为了让大家少踩坑，我先把china-dev.cn这个网站项目升级到了vite

• 对于在线画图功能，可能没有什么影响，但是跟在线编写javascript这个功能影响挺大，因为之前使用的库，会跟webpack绑定，目前不支持vite，于是我更换了技术栈，但是效果反而更好了～，这说明，跟webpack强绑定是一个伪命题，办法总比困难多，构建工具只是一种选择而已～

PS:这个网站永远免费，里面还有大量前端免费学习资料，为此，我把这个项目抽离了业务部分，然后做成了一个简单的项目模板

正式开始

如果你没看过我之前写的：webpack和vite的核心区别，建议你先看一遍，再来看这篇文章

• Vite和Webpack的核心差异

• 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文件

  • 执行 yarn dev, 启动项目 ，如果此时你的代码没问题，已经run起来了(我项目中默认是react17.x,ts4.x版本，如果需要降级，请你安装指定依赖)

脚手架说明：

• 通过husky在每次git commit 时候使用prettier统一美化代码，再通过eslint进行代码检测，最终使用commitlint提交信息是否符合要求，以此保证代码质量

这几十条规则，都是我一条一条精挑细选出来的，因为我不喜欢用不清楚别人细节的东西，这套规则我也希望大家用下去，每一条都有注释

 rules: {
        semi: ['error', 'always'], // 该规则强制使用一致的分号
        'no-unused-vars': 'off', // 禁止未使用过的变量
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', //生产环境禁用 debugger
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', //生产环境禁用 console
        'default-case': ['warn', { commentPattern: '^no default$' }], //要求 Switch 语句中有 Default
        'dot-location': ['warn', 'property'], // 强制在点号之前或之后换行
        eqeqeq: ['error', 'allow-null'], //要求使用 === 和 !==
        'new-parens': 'warn', //要求调用无参构造函数时带括号
        'no-caller': 'error', // 禁用 caller 或 callee
        'no-const-assign': 'error', //不允许改变用 const 声明的变量
        'no-dupe-args': 'error', //禁止在 function 定义中出现重复的参数