关于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) 的代价。