文章目录

• 前言
• 文件夹复制思路
• 目标文件夹不存在
• 目标文件夹已存在
• • 清空文件夹内容
  • 删除所有空文件夹(包括目标文件夹)
• 总结

---

前言

webpack工具在打包前端文件时，比如打出的包为dist。cleanWebpackPlugin插件的作用是清除上一次打包的dist文件夹，copyWebpackPlugin插件的作用是将静态文件夹中的文件复制到dist文件中。
我想使用node的文件操作符fs和路径path，尝试实现简单版的这一个功能，主要就是文件夹的复制与删除操作。

文件夹复制思路

文件夹复制主要有以下思路：

• 判断源文件路径是否存在
• 判断目标文件路径是否存在
• 读取源文件夹
• 创建目标文件夹
• 复制文件

目标文件夹不存在

本文首先考虑目标文件夹不存在的情况。源文件夹如果不存在，给一个提示并终止流程；源文件夹存在按正常流程走，很简单。

const fs = require('fs')
const path = require('path')const srcDir = process.argv[2]
const destDir = process.argv[3]
const srcPath = path.resolve(__dirname,srcDir)
const destPath = path.resolve(__dirname,destDir)function copy(src, dest) {if (!fs.existsSync(src)) {console.log(`${srcDir}文件信息不存在`);return}if (fs.existsSync(dest)) {// 处理目标文件夹已经存在的流程，这里先不写} else {fs.mkdir(dest, (err) => {const srcFiles = fs.readdirSync(src)for (const file of srcFiles) {const srcFile = path.resolve(src, file)const destFile = path.resolve(dest, file)if (fs.lstatSync(srcFile).isDirectory()) {copy(srcFile, destFile)} else {fs.copyFileSync(srcFile, destFile)}}})}
}

目标文件夹已存在

当进行文件夹复制时，发现目标文件夹dist已经存在了，此时一定要先删除掉dist文件夹。因为这个文件夹是上次打包的产物。
但是当文件夹中有文件内容时无法直接删除，必须先将里面的文件全部删除，才能删除此文件夹。
所以当目标文件夹已经存在时的复制思路如下：

• 清空当前路径下的所有文件夹的内容
• 删除当前路径下的所有空文件夹(包括当前文件夹)
• 再重新开始复制

 if (fs.existsSync(dest)) {/*删除当前文件夹，文件夹中有内容时无法直接删除*/empty(dest)    // 清空当前路径下的所有文件夹的内容emptyDir(dest) // 删除当前路径下的所有空文件夹(包括当前文件夹)copy(src, dest) // 再次进行复制} else { // ........}

清空文件夹内容

 function empty(dest) {const destFiles = fs.readdirSync(dest)  for (const file of destFiles) {const destFile = path.resolve(dest, file)if (fs.lstatSync(destFile).isDirectory()) {empty(destFile)} else {fs.unlinkSync(destFile)}}
}

删除所有空文件夹(包括目标文件夹)

function emptyDir(dest) {const destFiles = fs.readdirSync(dest)  if (destFiles.length === 0) {fs.rmdirSync(dest)} else {for (const file of destFiles) {const destFile = path.resolve(dest, file)emptyDir(destFile)}fs.rmdirSync(dest)}
}

总结

文件夹的复制与删除之类的操作不难，都是调nodejs中内置的方法，可能对某些文件操作符方法不理解其意思，去node官网看一下就行了，或者去我的github仓库中看一下，我也写了一些注释。