关于javascript:本地代码意外生成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)的代价。