携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情
vite是vue团队开发的新打包工具，看这个图标，太好看了，一眼就爱上了这个小闪电，所以我们当然也要使用一下来体验体验他是不是像闪电一样快呢。我会分享一下最近我在做的将一个vue2 cli项目使用的webpack打包工具替换为vite打包，来作为开发环境打包使用。
速度方面，不能说快，只能说起飞了。原项目在一米长的依赖加持下，打包速度真可以说是龟速。受到了不少吐槽，于是我也有了优化的想法。说干就干
首先新建一个vite项目
npm create vite@latest
vite是默认支持vue3的，所以为了支持vue2，我们需要安装一个 vite-plugin-vue2 插件，在vite.config.js中引入这个插件并配置plugin属性，把原项目中的代码全部copy过来，然后package.json中的依赖，除了webpack都copy过来。npm install一下，安装依赖之后，紧张刺激的环节来了 查看一下package.config的运行指令将项目跑起来，不出意外的话项目是出意外了，你会收获一大堆报错，一大堆头疼的报错，报错问题呢也无非就几种
- 一种是别名配置，只需要将cli中的别名复制过来就好了，可能在node_modules@vue\cli-service\package.json中
- 还有一种报错是require报错，这种就是很平常的了，vite不支持require引入，所以最好都改成import引入，当然官方提示会给你一个插件安装来帮助这种兼容，好像对我不太管用，有些地方仍然会报错，我还是自己做了手动修改文件
- 我这个项目中最头疼的一点，使用了antV中的G2图表，打包打不过去，一直在报错。这个问题直到现在还没找到解决的办法，可能只能换一个图表了吧。
- 还有css引入less文件的时候，使用了'~@'符合，这个vite不识别，很简单使用vscode全局匹配修改掉了。
- 再一个就是动态路由引入的问题。在重定向时，一直没办法打包过去，这里我查看官网，有一个全局引入的api是这个
// 文件：/foo/index.js
const modules = import.meta.glob('../foo/*.js')
// 转换为：
const modules = { - '../foo/bar.js': () => {} + './bar.js': () => {} }
这样我引入时直接调用modules['path']就可以了，看起来是不是非常美好，可是出问题了，由于我的页面模块不在同一层，所以这个api参数我传的就是('../views/**/*.vue'),官方给的插件地址是这样指示的，然而收到的import('xxx') xxx的内容竟然是绝对路径，src/views/xx/xx.vue,这不是在开玩笑嘛，这种地址引入不了的.重新运行几次后，vite竟然也接受了动态引入，import (`../${path}`)使用模板字符串的形式，这样虽然终端报错，但是可以正常运行。也还可以接受吧。
目前还在紧张刺激的斗争中，仍未胜利。还会有一些莫名其妙的错误，甚至之前有个错误是vue报的栈溢出错误，这个排查起来就比较难了。总之道阻且长，加油吧，希望可以在重构的过程中不断学习打包工具的底层实现。找出问题所在。
