一条命令能实现前端本地代码和打包仓库的自动化提交？

背景：

先介绍我们原本的代码上线流程：首先发布仓和代码仓（dev和master分支对应测试和生产环境）独立，每次修复或新增功能，首先需要提交改动到代码仓（fork），然后打包代码，在发布仓pull后清仓，将打包代码复制进来commit，push，然后去对应环境拉取代码；

作为“精力不集中病癌晚期”患者，经常一个代码的改动打包上线需要5min+,且大多时间损耗在了无意义内耗上，故拟方案文档：

本文仅介绍前端部分，后端部分读者可求助自己公司的后端童鞋

准备工作

1.检查打包文件夹是否在.gitignore设置了忽略，如果没有需要加上
2.删除原来的打包文件夹，将发布仓移入代码仓并更名为打包文件夹名字（如dist）
3.检测发布仓和代码仓git密码是否有保存，如果没有需要加上
4.根目录创建文件夹middeware，包含js文件：shell命令封装 sh.js ,自动打包提交 ci.js，自动打包 build.js,自动提交 push.js
5.pnpm install shelljs (不限制使用pnpm还是npm还是cnpm等等，本人习惯使用pnpm)
6.package.json内配置打包时不清除打包文件夹及常用的ci命令（见下图）

It is real show time!

首先封装需要用到的shell命令

/*
 * sh.js
 * @Descripttion: shell命令
 */
const sh = require('shelljs')

/**
 * @description 执行shell命令
 * @param {String}params命令
 * @returns
 */
 const exec = params => {return new Promise((resolve, reject) => {const code = sh.exec(params).codeif (code !== 0) {reject()} else {resolve()}})
}

/**
 *
 * @description 进入文件夹
 * @param {String}params地址
 * @returns
 */
const cd = params => {return new Promise((resolve, reject) => {const code = sh.cd(params).codeif (code !== 0) {reject()} else {resolve()}})
}

/**
 * @description删除操作
 * @param {String}params 文件或文件夹名字
 * @returns
 */
const rm = params => {return new Promise((resolve, reject) => {const code = sh.rm('-rf', params).codeif (code !== 0) {reject()} else {resolve()}})
}

module.exports = {exec,cd,rm
} 

代码仓自动提交功能

/*
 * push.js
 * @Descripttion: 自动提交
 */
const { exec } = require('./sh');

// 打包
const push = async () => {// 分支let branch = process.argv.length>2? process.argv[2]:'master' ;const log =process.argv.length>3? process.argv[3]:'auto push at '+new Date();try {// 推送分支代码await exec(`git status`);await exec(`git add .`);await exec(`git commit -m "${log}#FromAutoSubmit"`);await exec(`git pull origin master`);await exec(`git push fork ${branch}`);console.log('git done');} catch (error) {console.log(error, 'git error');}
}

push() 

自动打包功能

/*
 * build.js
 * @Descripttion: 自动打包提交
 */
const { resolve } = require('path')
const { exec, cd, rm } = require('./sh')

// 打包
const build = async () => {
	//打包目录const path = 'dist'const outPath = resolve('./')// ENV 环境 env 环境全称let ENV = process.argv.length>2? process.argv[2]:'dev',env='development';if(ENV == 'prod') env = 'production';const log =process.argv.length>3? process.argv[3]:'auto push at '+new Date();const branch = env=='development'?'dev':'master'await cd(path)try {console.log("开始拉取");// 切换分支并拉取代码await exec(`git checkout .`)console.log(`git checkout .`)await exec(`git checkout ${branch}`)console.log(`git checkout ${branch}`)await exec(`git pull origin ${branch}`)console.log(`git pull origin ${branch}`)} catch (error) {console.log(error, 'git error')}try {// 手动删除dist下面的文件夹或文件await rm('css')await rm('img')await rm('js')console.log(`rm css img js`)} catch (error) {console.log(error, 'rm error')}await cd(outPath);
	// 执行打包
	await exec(`pnpm run build:${ENV}`);
	await cd(path)try {// 推送分支代码await exec(`git add .`)await exec(`git commit -m "${log}#FromAutoSubmit"`)await exec(`git push origin ${branch}`)console.log('git done')} catch (error) {console.error(error, 'error')}await cd(outPath)
}

build() 

自动提交和打包

/*
 * ci.js
 * @Descripttion: 自动打包
 */
const { exec } = require('./sh');

// 自动打包
const ci = async () => {// ENV 环境 env 环境全称let ENV = process.argv.length>2? process.argv[2]:'dev',env='development';if(ENV == 'prod') env = 'production';const branch =process.argv.length>3? process.argv[3]:'dev';const log = process.argv.length > 4 ? process.argv[4] : 'auto push at ' + new Date();try {await exec(`pnpm run ci:build "${ENV}" "${log}#FromAutoSubmit"`);await exec(`pnpm run ci:push "${branch}" "${log}#FromAutoSubmit"`);} catch (error) {console.log(error, '执行出错，请检查');}
}

ci() 

相关命令

 pnpm run ci [env] [branch] [commit log]打包提交代码仓和发布仓pnpm run ci:build [env] [commit log] 打包提交发布仓pnpm run ci:push [branch] [commit log] 提交代码仓 

总结

以上就是前端本地自动化提交的所有内容了，读者的上线规范流程可能与本人不一致，可根据实际情况更改命令。

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享