本地代码意外生成dist文件-CompileHero

手误的代价

有次写个需求，其实代码量不算多，也就三四个文件，结果提代码的时候多了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)的代价。