Vue的devtools工具打包

Vue的devtools工具打包

最近想升级一下Vue的开发工具，因为升级到vue3后一直使用的是Vue.js devtools 6.0.0 beta 21。使用的是测试版，想到正式Vue3发布这么久了打算更新一下，用上最新的正式版（保持最新——来自程序员的执念）。但因为国内无法访问谷歌商店，因此也就无法直接获取Vue 的开发工具插件。这时候有两个方法摆在眼前，一个是科学上网获得，另一个是找到源码自己打包。这俺果断选择后者，科学上网有啥意思？自己打包不香吗？科学上网那是一个有志青年应该干的事吗？（手动狗头）下面开始操作。

获取源码

想要获取源码？这还用想吗？github啊！直接搜vuejs/devtools。找到地址，复制地址（项目地址：https://github.com/vuejs/devtools.git），克隆源码一气呵成。

安装依赖

看到yarn.lock和package.json两个文件，我想都没写直接cd进入项目。啥都不干依赖先装上，依赖都装不上还搞啥？

yarn install

依赖安装完成之后，查看最近发布的版本是啥切换到对应的tag上（这是最快的查看方法，当然也可以查看git打的标签）

明显的看到最近释放的版本是v6.1.4，使用git将切换到标签上

git checkout v6.1.4

打包项目

观察package.json中的脚本，看源码不容易，启动一个项目跑通一个项目还不简单。

明显能看出release和release:beta是发布用的，后者是发布测试版的。运行脚本跑起来。

yarn release

输入版本号确认（版本号输入无所谓啦，大于当前的版本就ok了，执着的话可以看看它是怎样限制版本号的改下配置）
出现了报错

仔细一看命令rm -rf ./build这一看就是Linux或Mac系统的删除文件夹的命令，用windows系统不报错才怪呢。这个命令不难发现就是用来清空以前打包的文件的，没有实际意义直接删掉。这命令出现在好几个位置，这里我直接给出了

1. shell-chrome文件的package.json的build的命令，去除与符号（&&）以及它之前的清空命令
2. shell-electron文件的package.json的build:client和build:node的命令，去除与符号（&&）以及它之前的清空命令

重新进行打包即可。

后面还会出现一些报错不过那并不重要，那个是发布插件的报错没有作者没有账号。肯定是要报错的。但我们要的东西已经有了，如果实在不想看到这个报错可以将release命令修改一下，将npm run pub命令去掉应该就行了（俺没验证）

安装devtools工具

在dist文件夹下可以看到两个压缩包一个是火狐的扩展另一个是Chrome的扩展，自己解压安装就ok了（俺懒得写了）。

打包好的文件白嫖地址