google/zx让前端可以使用typescript随心所欲的写脚本

google/zx让前端可以使用typescript随心所欲的写脚本

持续创作,加速成长!这是我参与「日新计划 6 月更文挑战」的第3天,点击查看活动详情

自从遇到了google/zx,很快我就将原先使用shell脚本的代码,全部转换到了google/zx

相当实例化一个对象可以使用什么命令于使用前端js来写脚本了,对前端来说实在太友好了

使用zx编写脚本,可以随心所欲的使用nodejs模块类库,我的demo使用mysql类库去将日志写入到mysql数据库, 当然你可以调用fs-extra,写入到本地文件当中,选择性很多了

使用mjs模块,可以像使用前端js代码一样轻松使用 import和 export

引用zx中的实例化servlet类异常$符号,可以随意Linux使用shell脚本中的所有命令

同时使用typescript来写zx的脚本,很是不错哟,不过在import时需要写成 ’./xxx.mjs‘,其实调用的就是linux虚拟机mts

可以在代码中随意调用 npm、 yarn、 pnpm等,以及测试你的自卑程度git pull 、git p实例化是什么意思ush 等等。

可以在代码中更好的编写脚本的逻辑控制,虽然在shell脚本中页可以实现,但对于前端工程师来说,用js这简直就是so easy的事情。

完美的使用await async来控制 同步和异步代码的执行顺序shell命令

1、之前通过shell脚本写的打包脚本

脚本入口文件地址 :githushell什么意思b.com/aehyok/2022… 克隆下来,有兴趣的可以apple下载下来看看,cd到本目录下就可以进行测试,将十五个应用编译后的文件自动复制到测试环境

sh build-all.sh  -v 2.5.1.006 -p awpqc  |tee build-log.txt
-v  2.5.1.006 版本号设置
-p awpqc 分别代表五个项目

2、我测试你适合学心理学吗通过zx进行了重写

如今我用google/zx(TypeScript)写的代码入口linux命令地址:github.com/aehyok/2022…

先说一下背景:

  • PC:主应用 + 八个子应用(全部是vue3)
  • APP: 主应用(vue2) + 两个子应用(vue3)
  • Other: P、Q、W 其他三个都是一个应用就完事的
  • 算一下,9+3+3=15个应用

我这脚本就是为了方便打包这15个应用

3、怎么做的呢

  • 十五个应用每次都到对应的目录去yarn build,或者pnpm build,会相当麻烦,而且会有遗漏的可能。

  • 项目在我本地都是可以运行的,所以这里我省去了, npm install 或者 yarn 或者pnpm i 。

  • 通过我的小demo,便可以通过一个命令 pnpm build:all,将上面说的15个应用全部打包完毕,放到指定服务器上。

  • 然后可以查看log日志,确认报错信息,或shellfish者直接线上测试查看发实例化servlet类异常布情况。如果有个别的子应用出现问题,可以单独去打包子应用即可。

  • 对每个子应用的打包目录,做了调整Shell,共同打包到一个release目录,将这个目录作为一个代码仓库,approach方便回退和记录的。

  • 过程:(这里面暂测试英文时使用的命令工具为yarn)

    • 1、到指定的giapplicationt仓库目录,测试抑郁程度的问卷拉取代码 cd path、git pull
    • 2、安测试你适合学心理学吗装依赖 (此步骤省略) yalinux重启命令rn
    • 3、代码仓库只有一个应用的直接编译应用 yarn build
    • 4、代码仓库包含多个应用的 需要先到指定的子应用目录 cd path, 再进行yarn build
    • 5、编译结束,根据版本号version 给代码仓库打上tag标签 git tag git push
    • 6、将编译后的文件拷贝到服务器指定的目录 scp -r
    • 7、所有的代码仓库都编译上传完毕以后,linux创建文件要将release代码仓库进行 git add . git commit git push,然后再打上对应的tag标签,推送到服务器

4、实际操作(根据上面的过程进行一步实例化对象一步的代码实现)

  • 1、拉取代码

    // 精简版代码(不包括写日志)
    export const gitPullBy = async(name: string, path: string) => {
        try {
            const gitPullInfo = await $`cd ${path}; git pull;`;
            if (gitPullInfo.exitCode === 0) {
                console.log('git pull 拉取代码成功')
            }
        } catch {
        }
    };
    
  • 2、安装依赖

    这一步按照道理,拉取代码后,要进行pnpm i,shelly安装依赖的过程。暂时通过手动挡处理:保证了项目在本Linux地开发环境能够运行,也就是说依赖肯定安装好了,要不然都跑不起来,自动化任务或者脚本里,难道能判断依赖是否安装过,或者说有新增依赖,可以通过什么方式来监测吗?

  • 3、直接编译子应linux创建文件

    // 精简版代码
    export const yarnBuildBy = async (path) => {
        try {
            const buildInfo = await $` cd ${path};yarn build;`;
            if (buildInfo.exitCode === 0) {
                console.log(`yarn build end success`);
            }
        } catch(error) {
        }
    }
    
  • 4、多个子应用批量编译linux重启命令

通过promise.all并发一起执行多个字应用的shell是什么意思中文编译

// 精简版代码
export const yarnBuildChildList = async(list) => {
    try {
        const result =await Promise.all(
            list.map((item) => {
            return $`cd ${item}; yarn build`;
            })
        )
        if(result) {
            console.log('all', 'result')
        }
    } catch {
    }
}
  • 5、编译结束,根据版本号打tag标签

    • 首先根据版本号判断是否已经存在相对应的version tag
    • 如果存在的话,先删除标签;如果不存在,直接shell脚本编程100例打tag标签
    • 最后git push 推送到代码仓库即可
    // 全过程代码
    export const gitTag = async () => {
        const { name } = global.project
        const path = baseUrl + name
        // 判断是否已经存在tag标签
        const isExist = await isExistTag(path)
        console.log(isExist, 'isExist')
        if (isExist) {
            // 如果存在泽进行删除tag标签的操作
            let isSuccess = await deleteTag(path);
            if (isSuccess) {
            await addTag(path, isExist);
            } else {
            oneLogger(`delete tag [${global.version}] error`);
            }
        } else {
            await addTag(path,isExist);
        }
    };
    const isExistTag = async (path) => {
        const result = await $` cd ${path};git tag;`;
        console.log("判断是否存在tag", result);
        if (result && result.exitCode === 0) {
            let array = result.stdout.split("n");
            if (array.length > 0 && array.includes(global.version)) {
                return true;
            }
            return false;
        }
    };
    const deleteTag = async (path) => {
        oneLogger(`delete tag [${global.version}] start`);
        const result = await $` cd ${path}; 
                                    git tag -d ${global.version}; 
                                    git push origin :refs/tags/${global.version}`;
        if (result.exitCode === 0) {
            oneLogger(`delete tag [${global.version}] end success`);
            return true;
        }
        return false;
    };
    /**
    *
    * @param {*} path 路径
    * @param {*} isExist 0为不存在,直接创建的;1为已存在删除的,重新创建
    */
    const addTag = async (path, isExist) => {
        const result = await $`cd ${path};
                            git tag -a ${global.version} -m 'chore:version ${global.version}版本号'; 
                            git push origin ${global.version};`;
        if (result && result.exitCode === 0) {
            if (isExist) {
            oneLogger(`re create tag [${global.version}] success`);
            } else {
            oneLogger(`create tag [${global.version}] success`);
            }
        }
    };
    //调用写入mysql日志的
    const oneLogger = (info) => {
        console.log(info);
        const { name } = global.project
        writerLog(name, info, global.version);
    };
    
  • 6、拷贝文件到指定服务器

    这里如果想更方便一些,可以把本地的ssh生成的公钥拷贝到相应的linux服务器的ssh目录

    export const copyFile = async(path: string) => {
        try {
            const result = await $`scp -r /e/work/git/dvs-2.x/release/cms/${path}/* root@139.9.184.171:/usr/local/sunlight/dvs/dvs-uis/${path}/`
            if(result.exitCode === 0) {
                oneLogger(`copy file  [${global.version}] end success`)
            }
            else {
                console.log("fail", $`$?`);
            }
        } catch {
            oneLogger(`copy file [${global.version}] end error`)
        }
    }
    const oneLogger = (info) => {
        console.log(info);
        const { name } = global.project
        writerLog(name, info, global.version);
    };
    
  • 7、整理所有项目编译后的文件shell编程

    对于打包生成的文件进行release目录整理,当然你可以全部编译打包完,再一起copy到指定的服务器,根据需要都可以approve去调整。

// 这一步有打包的代码需要进行git push
export const gitPushBy = async(name: string, path: string) => {
    try {
        await writerLog(name, `git push start`, global.version);
        // const message=`build:前端${name} -- commit-version:${global.version}`
        const message=`build:前端app、qrocde、wechat、park、console(child)commit-version:${global.version}`
        const result = await $`cd ${path}; git add . ; sleep 2; git commit -m ${message}; git push origin;`
        if(result && result.exitCode === 0 ) {
            await writerLog(name, `git push end success`, global.version);
        } else {
            await writerLog(name, `git push error: ${result.stderr}`, global.version); 
        }
    } catch (error){
        console.log(error, 'error')
        if(error.stdout.includes('nothing to commit, working tree clean')) {
            await writerLog(name, `git push nothing to commit`, global.version);
        }
        await writerLog(name, `git push error`, global.version);
    }
}

5、在使用过程中的问题

  • 1appearance、 pre…和post命令的使用

    "prebuild:all": "ts-node-esm pull.mts -v 4.5.3.007",
    "build:all": "concurrently "pnpm build:app"  "pnpm build:pc"  "pnpm build:wechat"  "pnpm build:park"  "pnpm build:qrcode" ",
    "postbuild:all": "ts-node-esm push.mts -v 4.5.3.007",
    

    在执行命令时执行 yarn build:all,那么会先执行命令 yarn prebuild:all, 执行完以后,才会真正执行yarn build:all, 执行完yarn:build:all以后,会执行yarn: postbuild:all。

    也就是pre为提前执行的钩子,post为结束后执行的钩子。但是如果使用pnpm执行 就不会执行pre实例化对象和post钩子。(这里还没找到问题!!!!!)

  • 2、concurrently,并行运行脚本,使用前先安装依赖测试 pnpm i concurrently

    "build:all": "concurrently "pnpm build:app"  "pnpm build:pc"  "pnpm build:wechat"  "pnpm build:park"  "pnpm build:qrcode" ",
    
  • 3、在命令行中 & 为并行, && 串行,在pnpm安装的依赖中行不行,所以使用了concurrently

    "build": "ts-node-esm index.mts -v 4.5.3.007 -p app & ts-node-esm index.mts -v 4.5.3.007 -p pc & ts-node-esm index.mts -v 4.5.3.007 -p wechat & ts-node-esm index.mts -v 4.5.3.007 -p park   & ts-node-esm index.mts -v 4.5.3.007 -p qrcode",
    

    这样使用还是不能并行,pnpm build,或者实例化对象是什么意思yarn build,都一样(这里也没找到问题!!!!!)

6、执行日志管理

我这里暂时是通过测试抑郁症mysql库,写入的数据库日志

  • 1、实例化数据库链接对象

    let _conn = mysql.createConnection({
        // 创建mysql实例,这是我的个人数据库可以访问,尽量只去查看
        host: "139.159.245.209",
        port: "3306",
        user: "meta",
        password: "meta",
        database: "meta",
    });
    
  • 2、通过实例链接数据库

    _conn.connect(function (err) {
        if (err) {
        console.log("fail to connect db", err.stack);
        throw err;
        }
        // 这里正真连接上数据库了。
        console.log(
        "链接成功--db state %s and threadID %s",
        _conn.state,
        _conn.threadId
        );
        logDbStat();  //此为记录数据库链接的线程和状态
    });
    const logDbState = function () {
        console.log(
        "db state %s and threadID %s",
        _conn.state,
        _conn.threadId
        );
    };
    
  • 3、用完后关闭链接

    const close = (conn) => {
        conn.end((err) => {
            if (err) {
            console.log("error ", err);
            } else {
            console.log("关闭成功", conn.state, conn.threadId);
            }
        });
    };
    
  • 4、最后返回一个Promise 方便处理和调用

    return new Promise((resolve, reject) => {
        try {
        let sqlParamsList = [sql];
        if (params) {
            sqlParamsList.push(params);
        }
        _conn.query(...sqlParamsList, (err, res) => {
            if (err) {
            reject(err);
            } else {
            resolve(res);
            close(_conn);
            }
        });
        } catch (error) {
        reject(error);
        }
    });
    
  • 5、封装方法进行调用

    export const writerLog = async (project, content, version) => {
        let id = shortid.generate()
        await executeSql("INSERT INTO CiCdLog values(?,?,?,?,null,null)", [id,
            project,
            content,
            version,
        ]);
    };
    
  • 6、在使用appstore的地方进行import导入,然后调用即APP

    import { writerLog } from "./sql-helper.mjs"
    // 传递三个参数即可
    await writerLog(name, `git push error`, global.version);
    

7、测试命令行编译

一个pcShell代码仓库,一个主应shell什么意思用和两个子应用,脚本所在代码仓库链接地址github.com/aehlinux命令yok/202appearance2…

yarn build

执行yarn build的时候,会先调linux创建文件用 prebuild命令

然后执行完yarn build之后,会调用posappreciatetbuild命令

通过代码产生的写入日志,如下截图所示

google/zx让前端可以使用typescript随心所欲的写脚本

8、总结

zx可以处理很多的事情,这里我就不一一列举了,有兴趣的可以继续深入学习了解探索一下,或许也会发现新的大陆。

评论

发表回复