一、前言
目前公司的项目由于之前的许多原因,在每次部署到测试环境时,需要修改很多文件参数, 真的很烦。 终于,在我的 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 串行执行时,如何给某个命令动态传参数_艾米栗写代码的博客-优快云博客),这里就不再赘述。
需要提醒的是,有时候,我们解决了一个问题并不代表掌握了一项技能。 譬如对于npm scripts 本身的理解,我还需要系统的了解。
而这本身,才是前端工程化的核心。 工作的一两年,要求是能快速解决问题,但是后面,快速解决问题就是应该做到的事情,需要更多考虑的就是,为什么要这么解决,以及这类问题出现的原因是什么。
在解决问题过程中,survey到的一些链接:
1、如何在package.json 下添加注释
实例详解带参数的 npm script - web开发 - 亿速云
2、动态插入参数的一些简单原理解释
3、提到的一些发布npm包的方法
2.3 编写脚本中遇到的问题
1、要使用fs 库读取和写入文件。 同步读取和异步读取的区别是什么?
2、正则表达式中含有变量,如何使用 模板字符串? 正则表达式使用 ES6 的模板字符串_ShiyuTim的博客-优快云博客
3、replaceAll is not a function
怎么修复 "replaceAll is not a function" JavaScript Error? - 走看看
4、核心问题,什么是前端打包?
5、vite config 配置中,不能引入 url 的相对路径。。。
6、vite 如何打包分割代码