老vue2+webpack的项目无源代，反编译到vue3+vite爬坑记

事发起因，公司有个旧的项目，可以说是万年没有更新了，客户忽然心血来潮，热情高涨的抛出一个需求，需要配合调整，本着客户第一的价值观，遂重启项目配合调整，当然一开始还不知道vue2 + webpack的项目，知道了之后

不出意外的情节，上来先遇到了依懒安装困难，好嘛，一个个解决，爬出babel-runtime包的坑之后，接着抓webpack的版本与plugin的版本兼容问题，好不容易全都爬完了，运行成功，控制台输出地址和端口号，浏览器愉快的显示出了页面，暗喜，喜悦的心情持续了10秒，怎么那么多细节不一样呢，git里面预留的源码是一个半成品的DEMO样品～～～后面也没有提交记录了，“****”

恰似，辗转反侧几多遍，合眼到曙未成眠。

算了，回到起点了，重来。

重写一个是不可能的，决对不可能！

那就走反编译这种条路吧

一、准备工作

新建一个目录，把需要编译的代码复制当前目录下，npm初始化当前目录，安装reverse-sourcemap反编译库

pnpm init
pnpm add reverse-sourcemap

如果js或者css里面有多个文件，对比一下index.html里面引用的，把多余的删除就行，其它是打包的多余版本。

二、反编译文件

执行命令，把对应的文件反编译输出到指定的文件夹下面，[]的内容是提示。

当然如果文件过多的话，可以写一个node脚本依次执行里面的文件，毕竟能懒则懒嘛。

// 反编译vue文件
reverse-sourcemap --output-dir src[输出目录] ./static/js/app.8661850b55bac02355cb.js[我是示].map

// 反编译node_modules
reverse-sourcemap --output-dir src ./static/js/vendor.3ac59a7f08a422107fd1.js.map

然后我们会得到这样的目录

三、搭建新的项目

初始化新项目
复制node_modules分析安装依赖
复制src，修改调整适合为当前的环境
根据运行提示修复

用vite创建一个新的空项目

pnpm create vite new-project

把node_modules目录复制到项目根目录，把webpack/src目录复制到项目的src目录

我们就得到了这样的目录

直接查看node_moules目录或者运行npm list --depth=0或者执行npm shrinkwrap生成一个npm-shrinkwrap.json文件，因为无法获得具体的npm包版本，只能先安装最新的，然后运行调试的时候再去修改，当然没有必要的包就不用再安装了，比如babal-runtime等，有更好的方案代替的，我也更换掉了，我原来项目里面使用了video.js就为了播放一个视频，我直接换成了video标签。

我的旧项目是vue2的，里面的一些语法跟vue3有一些区别，调整入口和其它一些静态文件的引用，还有其它的一些关联依赖，vue3必须安装element-plus之后

然后不好的消息，去里面查找一下引入vue的地方，把后辍全部老实的加上，vite后面不允许省略后辍

把页面上红黄色的异常处理完之后，页面还是一片白，接着看控制台

vite默认不支持require引用模式，解决方法：

要么让他支持
要么把代码改为import

让vite支持的方法，安装插件，配置一下vite.config.js

i vite-plugin-require-transform --save-dev

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import requireTransform from 'vite-plugin-require-transform'

export default defineConfig({
  plugins: [
      vue(),
      requireTransform({
      fileRegex: /.js$|.vue$/,
    }),
  ],
})

我的该项目里面的页面比较少，选择了改为import，pnpm dev 跑起来

撒花🌹

虽然中间一块地图没有显示出来，因为挂载的问题，但其它已经完美的运行起来了。😄

四、测试打包

pnpm build测试一下打包是否可行，先不要在意那些警告。

http-server ./dist