测试环境自动构建

一、前言

目前公司的项目由于之前的许多原因,在每次部署到测试环境时,需要修改很多文件参数, 真的很烦。 终于,在我的 Q4 OKR 中出现了优化测试环境部署 这一项内容。

碎碎念:

我们现在的测试环境很特殊,实际上是使用的公司线上机器搭建的,无法通过 ssh 直接连接,只能通过跳板机连接。

线上的一键部署我们组长已经弄好了,是使用的容器那一套,但是我还不会。。。所以只能分成两步,本地通过脚本打包,登录跳板机,进行部署。

这里讨论的,就是在本机,将文件参数等的修改自动打包完成。

二、需要修改的东西

背景:

1、目前存在四个测试环境,每个测试环境是在域名前添加 test +序列号

2、服务器无法访问外网,所以 cdn 资源只能放在服务器下。配置文件中制定为当前域名下资源链接。

3、不同测试环境下,后端端口号,需要改变。

4、数据侧的jsf 接口有多个测试环境,不同需求可能测试环境也不同。

根据以上四点,列出了和测试环境相关的几个文件修改:

1、vite.config.ts 下的 静态资源链接

2、后端 index 下 端口号

3、数据侧 jsf 接口的测试环境接口

之前的打包是通过 npm scripts 完成的,那么现在要做的就是,在之前的打包命令前,添加一条新的命令,动态指定 测试环境和 jsf 接口环境。

那么问题又来了。

1、node 脚本命令行怎么传参?

2、npm scripts 怎么动态传参?

2.1 node 命令行传参

① 传参格式

昨天明明找到统一介绍命令行传参格式的文章,现在又找不到了。

等后面找到之后再补。

② 传参解析

运行node 脚本传递的参数,在 proces.argv 属性中。

但是,node 本身并不会对参数进行解析,可以自己写解析函数,但是针对这个参数解析,有了比较成熟的库。

最开始,我尝试使用了commander(commander.js基本用法 - 掘金) 这个库。

commander库的特点是对参数异常情况的处理。衍生出的就是,对于代码编写的格式要求很严格。但是,在我的工作中,命令行解析应该是轻量化的工作,因此,我就尝试使用了mri(mri - npm)这个库。

如下所示,他的解析很简单,就是拿到process.argv收集到的参数,然后进行解析。

const mri = require('mri');

const argv = process.argv.slice(2);

mri(argv);
//=> { _: ['hello', 'world'], foo:true, bar:'baz', m:true, t:true, v:true }

mri(argv, { boolean:['bar'] });
//=> { _: ['baz', 'hello', 'world'], foo:true, bar:true, m:true, t:true, v:true }

mri(argv, {
  alias: {
    b: 'bar',
    foo: ['f', 'fuz']
  }
});
//=> { _: ['hello', 'world'], foo:true, f:true, fuz:true, b:'baz', bar:'baz', m:true, t:true, v:true }

2.2 npm scripts 如何动态传参?

npm scripts 动态传参在上篇文章中已经进行了阐述 (npm run 串行执行时,如何给某个命令动态传参数_艾米栗写代码的博客-CSDN博客),这里就不再赘述。

需要提醒的是,有时候,我们解决了一个问题并不代表掌握了一项技能。 譬如对于npm scripts 本身的理解,我还需要系统的了解。

而这本身,才是前端工程化的核心。 工作的一两年,要求是能快速解决问题,但是后面,快速解决问题就是应该做到的事情,需要更多考虑的就是,为什么要这么解决,以及这类问题出现的原因是什么。

在解决问题过程中,survey到的一些链接:

1、如何在package.json 下添加注释

实例详解带参数的 npm script - web开发 - 亿速云

2、动态插入参数的一些简单原理解释

npm script 中使用命令行参数

3、提到的一些发布npm包的方法

分享一个关于我自己的命令行工具 - 掘金 

2.3 编写脚本中遇到的问题

1、要使用fs 库读取和写入文件。 同步读取和异步读取的区别是什么?

2、正则表达式中含有变量,如何使用 模板字符串? 正则表达式使用 ES6 的模板字符串_ShiyuTim的博客-CSDN博客

3、replaceAll is not a function 

怎么修复 "replaceAll is not a function" JavaScript Error? - 走看看

4、核心问题,什么是前端打包?

前端 - 什么是"打包"? - 知乎

5、vite config 配置中,不能引入 url 的相对路径。。。

6、vite 如何打包分割代码

Vite如何打包分割代码_51CTO博客_vite怎么打包

Javascript Module System In

vite2.1 最新alias别名设置方式_yusirxiaer的博客-CSDN博客_vite alias

猜你喜欢

转载自blog.csdn.net/qq_34539486/article/details/127742163
今日推荐