背景

在npm run build时，一般都会清空项目中已有的dist目录再构建，避免新旧混合。

如何使用

可以简单使用rimraf这个npm依赖包。

目前rimraf的最新版已经到v6了。所以在安装时，要注意下版本问题：

v5 to v6
Require node 20 or >=22
Add --version to CLI
v4 to v5
There is no default export anymore. Import the functions directly using, e.g., import { rimrafSync } from ‘rimraf’.

因为我用的nodejs的版本是18，所以用"rimraf": "^5.0.5", 就好了。

1、在项目中安装

npm i rimraf@5 --save-dev

2、配置package.json

"scripts": {
    "clean": "rimraf dist",  // 新增，表示删除dist目录
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vite",
    "build": "npm run clean && vite build"  //新增npm run clean && 
  },

3、在项目构建时，直接用

npm run build

此时会先执行npm run clean，后构建。

附上rimraf的介绍和说明

rimraf 是一个用于删除文件和文件夹的 Node.js 包。它的名字来源于 Unix 命令 rm -rf，其中 rm 是删除命令，-rf 选项表示递归删除文件和文件夹，并且不提示确认。

主要作用

• 递归删除文件夹：rimraf 可以递归地删除整个文件夹及其内容，包括子文件夹和文件。
• 跨平台兼容：rimraf 在 Windows、macOS 和 Linux 等不同操作系统上都能正常工作，解决了 Node.js 自带的 fs.rmdir 和 fs.unlink 在 Windows 上删除非空文件夹时的限制。
• 异步和同步操作：rimraf 提供了异步和同步两种删除方式，方便在不同场景下使用。

使用场景

• 清理构建目录：在构建项目之前，通常需要清理旧的构建输出目录，rimraf 可以快速删除这些目录。
• 删除临时文件：在开发过程中，可能需要删除一些临时生成的文件或文件夹。
• 卸载或重置时清理：在卸载或重置应用程序时，可以使用 rimraf 清理相关文件和文件夹。

安装

你可以通过 npm 安装 rimraf：

npm install rimraf --save-dev

使用示例

异步删除

const rimraf = require('rimraf');

rimraf('/path/to/directory', function (err) {
  if (err) {
    console.error('删除失败', err);
  } else {
    console.log('删除成功');
  }
});

同步删除

const rimraf = require('rimraf');

try {
  rimraf.sync('/path/to/directory');
  console.log('删除成功');
} catch (err) {
  console.error('删除失败', err);
}

参考资料

https://www.npmjs.com/package/rimraf

---

如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片。

免费答疑，行业深潜多年的技术牛人帮你解决bug。

并可提供web前端开发，网站开发、技术咨询、答疑、直播讲座等服务。

祝你能成为一名优秀的WEB前端开发工程师！