您好!
欢迎来到京东云开发者社区
登录
首页
博文
课程
大赛
工具
用户中心
开源
首页
博文
课程
大赛
工具
开源
更多
用户中心
开发者社区
>
博文
>
拥抱下一代前端工具链-Vue老项目迁移Vite探索
分享
打开微信扫码分享
点击前往QQ分享
点击前往微博分享
点击复制链接
拥抱下一代前端工具链-Vue老项目迁移Vite探索
京东云开发者
2023-03-16
IP归属:北京
644480浏览
前端
Typescript
Vue
推荐
**作者:京东物流 邓道远** # 背景描述 随着项目的不断维护,代码越来越多,项目越来越大。调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换项目启动,等待的时间就会显得尤为的漫长。无法忍受这种开发效率的我,决定将老项目迁移至vite。 距离Vite工具发布到现在已经有了一些日子了,工具链与生态已经趋于稳定,最新版本已经更新到了3.0,既然念头已起,心动不如行动。 # 1、什么是Vite vite 发音为/vit/ 法语中就是快的意思,“人”如其名,就是快 - 一个开发服务器,它基于原生ES模块,提供了丰富的内建功能,如速度快到惊人的模块热更新(HRM) - 一套构建指令,它使用rollop来打包你的代码,并且是预配置的,可输出用于生产环境的高度优化过的静态资源。 # 2、为什么快 众所周知,当冷启动服务器时,基于打包器的启动必须优先抓取并构建你的整个应用,然后才能提供服务,这一抓取构建的过程随着文件越来越多,时间也会越来越长。 而Vite却通过将应用中的木块区分为**依赖**和源码两类,从而优化了大量的服务器启动时间。 - **依赖**大多为在开发时不会变动的纯 JavaScript。一些较大的依赖(例如有上百个模块的组件库)处理的代价也很高。依赖也通常会存在多种模块化格式(例如 ESM 或者 CommonJS)。 - Vite 将会使用 esbuild预构建依赖。esbuild 使用 Go 编写,并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。 - **源码**通常包含一些并非直接是 JavaScript 的文件,需要转换(例如 JSX,CSS 或者 Vue/Svelte 组件),时常会被编辑。同时,并不是所有的源码都需要同时被加载(例如基于路由拆分的代码模块)。 - Vite 以原生 ESM方式提供源码。这实际上是让浏览器接管了打包程序的部分工作:Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。 ![](//img1.jcloudcs.com/developer.jdcloud.com/fcd33893-1f95-4505-85a7-3791096617fa20230316205905.png) ![](//img1.jcloudcs.com/developer.jdcloud.com/0409414e-18bc-4673-a70d-2ef55bde493020230316205913.png) # 3、如何完成老项目迁移 当前项目是Vue2.0,vue-cli4.0,node v14.18.2 ### 3.1 首先我们需要先明确项目结构 与原来的Vue老项目相比,模板文件 index.html 需要从public挪到项目根目录中,Vite将 index.html 视为源码和模块图的一部分。由于我们只有一个入口文件,所以在index.html中需要引入main.ts ``` <script type="module" src="/src/main.ts"></script> ``` 而且运行过程中可能会遇到下面写法引发的报错 ``` <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> [vite] Internal server error: URI malforme ``` 解决办法是可以写一个简单的插件替换一下 ``` res = code.replace(/<%=\s+BASE_URL\s+%>/g, baseDir); ``` 与Vue-cli相同,需要一个配置文件 vite.cofnig.js, 与原来的vue.config.js同级 ### 3.2 安装依赖 既然我们使用Vite,那么我们需要安装一个vite依赖。但是我们的老项目是Vue2.0,vite优先支持Vue3.0,所以我们还需要一个转换工具 "vite-plugin-vue2" ``` npm i vite vite-plugin-vue2 -S ``` ### 3.3 修改配置文件 修改package.json中的scripts,启动和打包方式使用vite - "serve": "vite", - "build": "vite build", 修改vite.config.js,与vue.config.js相似 ``` import { defineConfig } from 'vite' import { createVuePlugin } from 'vite-plugin-vue2' // https://vitejs.dev/config/ 这一行可以增加编辑器代码提示 export default defineConfig({ plugins: [ createVuePlugin({ jsx: true, // 兼容项目中的jsx组件 vueTemplateOptions: {} }), ], resolve: { extensions: ['.vue', '.js', '.ts', '.jsx', '.tsx', '.json'], alias: [ { find: '@', replacement: '/src' } ] }, server: { open: true, // 控制台直接打开浏览器 host: 'xxxx.jd.com', // 本地host allowedHosts: ['.jd.com', '.jdwl.com', '.jd.co.th', '.jd.id'], port: 80, cors: true, proxy: { '/api': { target: 'https://xxx.jd.com', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '/api') } } }, }) ``` ### 3.4 剔除原来的webpack相关依赖 可以手动剔除 也可以重新启动一个vite项目再将所需代码移动到vite项目中 ### 3.5 启动应用 这个时候我们就可以启动应用了,不出意外的话,会有许多的报错信息,不过不要慌,我们一个一个的解决 # 4、遇见的问题汇总 ### 4.1 环境变量 webpackl里的环境变量是默认存储在process.env里的,而vite是存储在import.meta.env里的 import.meta.env.MODE: {string} 应用运行的模式。 import.meta.env.BASE_URL: {string} 部署应用时的基本 URL。他由base 配置项决定。 import.meta.env.PROD: {boolean} 应用是否运行在生产环境。 import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。 当然,既然是老项目,这种调用位置会有很多,我们可以使用比较简单的做法来兼容 ``` export default defineConfig({ define: { 'process.env': {} }, }) ``` ### 4.2 global 变量 因为VIte 是 ESM机制,有些包内部使用了 node 的 global对象,解决此问题可以通过自建pollfill, 然后在main.ts顶部引入 ``` // polyfills if (typeof (window as any).global === 'undefined') { ;(window as any).global = window } ``` ### 4.3 Scss全局变量报错 这一点是vite与vue-cli 配置方式不同引发,而且如果使用了环境变量也需要适配vite的写法兼容 ``` export default defineConfig({ css: { preprocessorOptions: { scss: { additionalData: '$ossHostVariable: \'import.meta\u200b.env.VUE_APP_OSS_HOST\';' } } } }) ``` ### 4.4 path 报错 Vite 是 ESM机制 path是node的包,所以需要兼容浏览器的引入方式,需要安装依赖 “path-broswserfiy” 只需要将引入的包替换即可 ``` import path from 'path' // 替换成 import path from 'path-broswserfiy' ``` ### 4.5 Require报错 问题的引发与上面一致 都是模块加载方式的不同导致的,可以通过" vite-plugin-require-transform"插件来解决 ``` import requireTransform from 'vite-plugin-require-transform' export default defineConfig({ plugins: [ requireTransform({}) ] }) ``` ### 4.6 vue组件的动态导入 vue的组件导入方式有很多,vite可以支持 () => import('**/**.vue')的方式导入,不过与webpack的区别在于需要补全文件的后缀,动态导入需要 import.meta.glob的方式 ``` const load = import.meta.glob('@/views/**/index.vue'); export const constantRoutes: any = [ { path: '/404', component: load['404'] }, ] ``` ### 4.7 编译时的分包策略 ``` const SPLIT_CHUNK_CONFIG = [ { match: /[\\/]src[\\/]_?common(.*)/, output: 'chunk-common', }, { match: /[\\/]src[\\/]_?component(.*)/, output: 'chunk-component', }, ]; const rollupOptions = { output: { chunkFileNames: 'assets/js/[name]-[hash].js', entryFileNames: 'assets/js/[name]-[hash].js', assetFileNames: 'assets/static/[name]-[hash].[ext]', manualChunks(id) { for (const item of SPLIT_CHUNK_CONFIG) { const { match, output } = item; if (match.test(id)) { return output; } } if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString(); } }, }, } ``` # 5、启动时间 不多说了 上图 ![](//img1.jcloudcs.com/developer.jdcloud.com/5a28bfe9-4205-443c-9662-f600ceb1f35320230316205950.png) 不过还会有一些问题,开发模式下比如页面首次加载时间比较缓慢,大约在5s左右,不过这也是可以理解的,毕竟编译过程都交给了浏览器,相比于老项目冷启动动辄2 3分钟的体验,已经是天大的提升了。 # 6、总结 最后再来回顾一下,整体的迁移过程。 首先,明确项目结构,index.html模板文件 提到根目录下,统计增加vite.config.js文件。 然后,编写配置文件 vite.config.js 注意与 vue.config.js上的语法区别,注意兼容写法。 最后,处理项目中两种打包工具的不兼容写法。大部分还是模块规范的区别,node环境的变量以及语法所引发,可以通过各种各样的插件来兼容解决。 以上即为本次迁移的全部过程,丰富、优化了前端工具链的构建流程,极大的提升了开发人员的幸福感,以及开发体验,项目冷启动时间更是提升了百分之99%。虽然前期遇到了许多的坑,但是成功后的感受就是一个字,"真香"。
原创文章,需联系作者,授权转载
上一篇:从一次CPU打满到ReDos攻击和防范的过程记录
下一篇:通过源码分析RocketMQ主从复制原理
相关文章
前端十年回顾 | 漫画前端的前世今生
Taro小程序跨端开发入门实战
【技术干货】企业级扫描平台EOS关于JS扫描落地与实践!
京东云开发者
文章数
85
阅读量
207547
作者其他文章
01
安全测试之探索windows游戏扫雷
扫雷游戏相信很多人都从小玩过,在那个电脑游戏并不多的时代,扫雷成为玩的热度蛮高的一款游戏之一,然而就在有一次,接触到了一次不寻常的扫雷过程,使得后来我也有了这个冲动,也来做一次。通过动态调试,逆向和C来写一个扫雷辅助工具从而提高逆向与编码技能。
01
京东金融APP的鸿蒙之旅:技术、挑战与实践
01
“京东云深海数据平台” 焕新升级 免费体验!
01
京东云JoyCoder荣获AI4SE“银弹”优秀案例
京东云开发者
文章数
85
阅读量
207547
作者其他文章
01
安全测试之探索windows游戏扫雷
01
京东金融APP的鸿蒙之旅:技术、挑战与实践
01
“京东云深海数据平台” 焕新升级 免费体验!
01
京东云JoyCoder荣获AI4SE“银弹”优秀案例
添加企业微信
获取1V1专业服务
扫码关注
京东云开发者公众号