测试环境自动构建

一、前言

目前公司的项目由于之前的许多原因，在每次部署到测试环境时，需要修改很多文件参数, 真的很烦。 终于，在我的 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