手误的代价

有次写个需要,其实代码量不算多,也就三四个文件,后果提代码的时候多了60多个文件,因为是接手的他人的工程,我过后就认为是原来脚手架的配置造成的,也就没在意。起初过了一个多月,共事拉代码的时候看到了多出的100多个文件问我咋回事儿,我一脸懵,翻了一下git记录,发现只有我的commit多了这么多代码,我看了下webpack配置,也没啥改变,但过后加了一堆部门外部的eslint插件,我共计这货色应该不能和eslint无关吧,就去google百度了一下,找了一早晨也没啥后果,起初周一接着找,发现思否上有个老哥和我状况一样,然而问题处于无人解答的状态,所以还是只能本人解决。上面附上一副commit 提交图,像这样的文件还有60多个。

每个目录下的js或css都生成了对应的dev文件,dev文件都是打包编译过的,像这样:

"use strict";Object.defineProperty(exports, "__esModule", {  value: true});exports.getUserName = void 0;var getUserName = function getUserName(f, n) {  return f + n;};exports.getUserName = getUserName;

一开始我猜是webpack援用的memory-fs出了问题导致编译后的文件没有放到内存里,于是我把代码回滚到之前的版本,而后本地生产环境打包一遍,开发环境打包一边都没有呈现任何变动,所以排出webpack打包问题,最初只能判断本地编辑器配置是否呈现问题,我从vscode的setting.json一个一个的找终于发现了嫌疑最大的插件--compile hero,云了一下这个插件的用途,它能够本地编译好代码输入到指定目录下,只有你在左侧文件树右键点这个compile file,上层的文件就都会生成dist:

找到罪魁祸首了,起初发现这个插件并不会撤销打包文件,无奈只能手动删了,然而目录太深了,有60多个,于是写了个node脚本,源码送上:

import fs from 'fs';const {statSync, readdirSync, rmdirSync, unlinkSync} = fs;const _path = '须要删除dist文件夹的目录'; // 此处换成你须要删dist目录的下层门路,须要写绝对路径const isDirectory = function (path) {    return statSync(path).isDirectory();}let num = 0;function removeTarget (path, target) {    if(isDirectory(path)) {        const files = readdirSync(path);        files.forEach(file => {            let currentPath = path + "/" + file;            const flag = file === target || !target;            if(isDirectory(currentPath)) {                flag ? readdirSync(currentPath).length > 0 ? removeTarget(currentPath) : rmdirSync(currentPath) : removeTarget(currentPath, target)            } else {                flag && unlinkSync(currentPath);            }        })        if(!target && readdirSync(path).length === 0) {            rmdirSync(path);            num++;        }    }}removeTarget(_path, 'dist');console.log('删掉了', num, '个含有文件的文件夹')

至此,问题解决了,然而也花掉了2天的工夫,这就是那天手误(cai)的代价。