【vscode自定义插件】五、一键发包到测试环境

插件开发背景

开发阶段我们需要多次本地打包发布到测试环境，我们项目想要发一个包需要先去管理台进行登录，登录完成后再找到发包入口，进行文件上传。在之前的插件功能已经实现了一键打包：
【vscode自定义插件】二、一键调试、打包指定目录
那么如何实现一键发包呢。

实现过程

要实现一键发包，首先需要先模拟手动发包的过程即登录完成后并上传。其实说白了就是两个接口，一个登录接口，一个上传文件的接口。登录完成后把接口设置的cookie带到上传文件的接口中就能实现了。

登录

先获取登录接口的信息，打开管理台登录页，调出浏览器开发者工具抓取登录接口。一般登录接口包含login字样比如https://demo.test.com/login 入参主要是账号密码，还有一些其他信息。可以尝试把接口复制到postman中测试能否调通。
接下来使用插件来模拟登录接口，这里用axios库来实现

const axios = require('axios')
const login = async (account, password) => {
  let loginRes
  try {
    loginRes = await axios.post(
      'https://demo.test.com/login',
      { account, password },
      {
        headers: {
          'Content-Type': 'application/json; charset=UTF-8',
          'User-Agent':
            'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36' // 模拟浏览器User-Agent
        },
        validateStatus: status => {
          return status >= 200 && status < 300 // 接受 2xx 状态码
        }
      }
    )
  } catch (error) {
    loginRes = null
    return loginRes
  }
  return loginRes
}

这里需要根据实际场景调整该方法，最主要是获取到登录接口的返回值中的cookie

文件上传

文件上传首先需要获取该文件，那么就要引入path模块来获取文件的路径和使用fs模块来读取文件。文件上传一般是通过二进制文件上传，使用的是multipart/form-data类型，我们可以通过form-data库来用于构建对应请求

const path = require('path')
const fs = require('fs') 
const FormData = require('form-data')
const upload = async (zipPath, account, password) => {
    // 获取文件路径和文件名称
	const filePath = path.resolve(zipPath)
    const fileName = path.basename(filePath)
    
    const loginRes = await login(account, password)
    if(loginRes?.headers['set-cookie']) {
    	const sessionCookies = loginRes.headers['set-cookie'].map(cookie => cookie.split(';')[0])
    	const form = new FormData()
    	// 通过append设置入参(key, value)
    	form.append('file', fs.createReadStream(filePath))
    	// 若上传接口还有其他入参，可以通过以下方式增加入参
    	 const params = {
          env: dev,
          account
        }
        for (const key in params) {
          form.append(key, params[key])
        }
        try {
        	const uploadRes = await axios.post( 'https://demo.test.com/upload', form, headers:{
        	    // 这个关键 会为请求头加上Content-Type: multipart/form-data; boundary=自定义边界符
        		...form.getHeaders(),
        	    // 带上前面登录接口获得的cookie
        		 Cookie: sessionCookies.join('; '),
        		'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36' // 模拟浏览器User-Agent
        	})
           if (uploadRes?.data?.code === 0) {
            console.log(`文件上传成功！`)
          }
        } catch (err) {
        	console.log(err)
        }
    }
}
 

设置插件入口

我们可以把账号密码作为一个插件配置项设置在package.json中，这样使用的该功能可以先在设置中提前填好对应的账号密码，然后执行插件上传文件的功能

// package.json
{
	"contributes": {
		"configuration": {
			"title": "demo",
			"properties": {
				"demo.account":{
          			"type": "string",
          			"default": "",
          			"description": "测试环境账号"
        		},
        		"demo.password": {
          			"type": "string",
          			"default": "",
          			"description": "测试环境密码"
        		}
			}
		}
	}

}

在插件中注册对应命令调用上传方法，传入文件路径，账号，密码

context.subscriptions.push(
    vscode.commands.registerCommand('demo.uploadPackage', async uri => {
      const config = vscode.workspace.getConfiguration()
      upload (uri.path.slice(1), config.get('demo.account'), config.get('demo.password'))
    })
  )

展示效果

先去插件设置中设置测试环境的账号密码，再去选中压缩包右键点击一键发包，稍等片刻后提示文件上传成功，至此一个一键发包功能完成。用了这个后，再也不用去管理台登录发包了，部署效率max~