开始前写了。很多小伙伴已经升级到vite了，但是大部分都是vue项目，所以今天我们就把之前的webpackreact项目升级到vite！所以，为了避免大家踩坑，我先将china-dev.cn的网站项目升级为vite。可能对在线绘图功能没有影响，但是对在线写javascript的功能影响很大，因为之前用的库，会绑定webpack，目前不支持vite，所以改了技术stack，但是效果更好~，说明和webpack强绑定是个伪命题，方法总是比困难多，构建工具只是一种选择而已~PS：本站一直免费，里面有很多免费的前端学习资料。为此，我把这个项目从业务部分拿出来，然后做了一个简单的项目模板，正式开始。如果你之前没看过我写的：webpack和vite的核心区别。我建议您先阅读它，然后再阅读本文。将webpack迁移到vite首先要解决的是将与webpack强关联的插件&技术栈解耦。强烈依赖第三方工具和环境并不是一件好事。对此，做过重载系统部署的架构师相信都有这种感觉。除项目中的import方法外，将所有import方法替换为import。可以说esm是一种趋势，因为它是一种规范。Vue3已经不支持ie11了，国内的旧系统是时候换掉了。这是一个大趋势。深圳的一些官网已经开始推荐你换个浏览器了~规范一下你的代码，防止typescript错误等等其他警告等等。vite的热更新很脆弱。有可能是一个小小的warning或者不规范的写法导致热更新失败，报错位置不准确，或者不直接报错，而是失败（这些坑下面会说到）接下来克隆我的脚手架到本地地址https://github.com/JinJieTan/Peter-/tree/master/vite-react-ts-antd将你的src源码目录植入到我的项目模板项目根目录执行yarn安装依赖index.hmtl入口文件。我这里默认是加载src/index.tsx文件执行yarndev启动项目。如果此时你的代码没问题，说明已经开始运行了（我的项目中默认是react17.x，ts4.x版本，如果需要降级，请安装指定的依赖）脚手架说明：使用prettier统一和每次通过husky进行gitcommit美化代码，然后通过eslint进行代码检测，最后使用commitlint提交信息，看是否符合要求，为了保证代码质量，这几十条规则是都是我一一精挑细选出来的，因为我不喜欢用不知道别人底细的东西。也希望大家使用这套规则。每条规则都有一条注释rules:{semi:['error','always'],//此规则强制使用一致的分号'no-unused-vars':'off',//不允许未使用的变量'no-debugger':process.env.NODE_ENV==='生产'?'error':'off',//在生产环境中禁用调试器'no-console':process.env.NODE_ENV==='production'?'error':'off',//生产环境禁用控制台'default-case':['warn',{commentPattern:'^nodefault$'}],//RequiresDefault'dot-location'intheSwitch陈述：['warn','property'],//在点之前或之后强制换行eqeqeq:['error','allow-null'],//require===and!=='new-parens':'warn',//调用无参数构造函数时需要括号'no-caller':'error',//禁用调用者或被调用者'no-const-assign':'error',//不允许更改const声明的变量'no-dupe-args':'error',//函数定义中不允许重复参数'no-dupe-class-members':'error',//类成员中不允许重复'no-dupe-keys':'warn',//不允许对象字面量中的重复键'no-extend-native':'warn',//不要扩展原生对象'no-extra-bind':'warn',//禁止不必要的函数绑定'no-fallthrough':'error',//禁止case语句落空'no-func-assign':'warn',//禁止重新声明函数赋值'no-implied-eval':'error',//禁用隐式eval()'no-label-var':'error',//禁用与变量同名的标签'no-loop-func':'error',//禁止循环中的函数'no-mixed-operators':['warn',{groups:[['&','|','^','~','<<','>>','>>>'],['==','!=','===','!==','>','>=','<','<='],['&&','||'],['in','instanceof'],],allowSamePrecedence:false,},],//禁止混合不同的运算符'no-multi-str':'warn',//禁止多行字符串（需要多行时使用\n）'no-native-reassign':'warn',//禁止重新分配局部对象'no-obj-calls':'warn',//禁止全局对象被称为函数'no-redeclare':'error',//禁止重新声明变量'no-script-url':'warn',//禁用脚本URL'no-shadow-restricted-names':'warn',//关键字不能被隐藏'no-sparse-arrays':'warn',//禁用稀疏数组'no-this-before-super':'warn',//在构造函数中禁止使用thisorsuperbeforecallingsuper()'no-undef':'error',//禁用未声明的变量'no-unexpected-multiline':'warn',//禁用混淆的多行表达式'no-use-before-define':['warn',{functions:false,classes:false,variables:false,},],//禁止在定义前使用'no-with':'error',//禁用with语句基数:'error',//禁用函数'rest-spread-spa中没有yield的生成器函数cing':['warn','never'],//强制限制扩展运算符和它们的表达式之间的空格'react/jsx-no-undef':'error',//禁止在JSX中未声明变量'react/no-direct-mutation-state':'error',//禁止直接改变this.state'react/jsx-uses-react':'warn',//防止React被错误标记为Unused'no-alert':0,//禁止使用alertconfirm提示'no-duplicate-case':2,//switch中的case标签不能重复'no-eq-null':2,//禁止pairingnull使用==or!=operator'no-inner-declarations':[2,'functions'],//禁止在块语句中使用声明（变量或函数）'no-iterator':2,//禁止使用__iterator__attribute'no-negated-in-lhs':2,//不能有in运算符的左侧！'no-octal-escape':2,//禁用八进制转义序列'no-plusplus':0,//禁止使用++,--'no-self-compare':2,//不能比较自身'no-undef-init':2,//变量初始化时不能直接赋值为undefined'no-useless-call':2,//禁止不必要的调用，应用'init-declarations':0,//声明'prefer-const'时必须赋初值:0,//首选const'use-isnan':2,//比较时禁止使用NaN,只能isNaN()'vars-on-top':2,//var必须放在作用域的顶部},支持ant-design加载importvitePluginImpfrom"vite-plugin-imp";plugins:[...,vitePluginImp({libList:[{libName:"antd",style(name){if(/CompWithoutStyleFile/i.test(name)){returnfalse;}return`antd/es/${name}/style/index.css`;},},],}),]在不知不觉中执行热刷新：importreactRefreshfrom"@vitejs/plugin-react-refresh";plugins:[...,reactRefresh(),]兼容不支持esmimportlegacyfrom"@vitejs/plugin-legacy"的浏览器；plugins:[...,legacy({targets:["defaults","notIE11"],}),]vite中支持ts别名配置vite.config.tsresolve:{alias:{"@":path.resolve(__dirname,"./src"),"@c":path.resolve(__dirname,"./src/components"),"@s":path.resolve(__dirname,"./src/service"),"@m":path.resolve(__dirname,"./src/model"),},},tsconfig.json中的“baseUrl”：“./”，“路径”：{“@/*”：[”./src/*”]，“@c/*”：[”./src/components/*”],"@m/*":["./src/model/*"],"@s/*":["./src/service/*"],"@t/*":["./src/types/*"]}遇到的问题是第三方库之前绑定了webpack插件，但是vite不支持。最后更换技术栈vite热更新问题。这个问题应该很多人都遇到过，但是我踩了一天坑，并没有遇到vite的prod模式构建。通过tsc转成js，然后通过rollup打包，但是yarnbuildfirst之后，在tsx附近会生成一个js文件，比如：这个时候无论是热更新方式还是prodbuild，都会打包js文件，后面我会删除掉，解决这个问题.当然，vite热更新还有一个问题，就是你可能会因为warning而导致热更新失败，错误位置不准确。当系统变得极其复杂时，这个问题是致命的。原生不支持less，需要安装如下依赖，直接import使用less，我觉得比webpackyarnaddlessless-loader-D使用后感受开发模式好太多了网页包。基本上毫秒级的启动和热更新速度配置也比较简单，不像webpack之类的很多东西那么纯粹干净。没有像require.context这样的黑魔法，上面没有import，下面的代码里require。都是进口的。可能有人会问，老库不兼容esm怎么办，比如dva。module.exports=require('./lib');module.exports.connect=require('react-redux').connect;这里有个问题，esm在production模式下不能直接importdva，这时候可以做一个简单的过程，可以先取default属性，如果取不到就取defaultimportdvafrom"dva";让标签=dva.default||dva;constapp=test({history:createHistory(),});不管你最后看了多少，还是直接实践一下比较好，克隆我的模板试试看。别忘了给个star，开源不易，还有其他源码，https://github.com/JinJieTan/Peter-/tree/master/vite-react-ts-antd
