文章目录

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



前言

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仓库中看一下,我也写了一些注释。