如何在使用Parcel进行构建之前清除dist/目录

Question

我有一个非常简单的项目，使用Parcel作为打包工具。它只是他们入门指南中的基本示例。

对于单个构建，一切正常，但我注意到每次构建时JavaScript代码都会编译成一个新的哈希值。这可能会导致在dist/目录下创建多个JS哈希值。是否有一种方法可以在每次构建之前清除dist/中的所有内容，以便它只包含最新的代码？

- Valentin

Answer 1

您可以将清理任务委托给一个脚本，它的任务是清空您的输出目录。请注意，使用rm -rf比使用平台无关的包（如rimraf）更容易出错，后者还可以在Windows环境中执行而不会出现任何问题。

步骤如下：

1. npm i -D rimraf
2. 然后编辑您的package.json scripts键，如下所示。

{ 
   "scripts": {
     "clean:output": "rimraf dist",
     "start": "npm run clean:output && parcel src/index.html",
     "build": "npm run clean:output && parcel build src/index.html",
  }
 
}

作为一种替代方案，您可以为每个脚本使用一个命令，但我个人认为这会让您的脚本部分难以阅读。这种方法更灵活，适应变化能力更强。如果您后来决定更改目标输出目录，只需要在 package.json 文件中访问并更改一个位置即可。

- denik1981

Answer 2

在运行 parcel build 前，可以在 package.json 的脚本中直接执行 rm -rf public/dist/*

{ 
  // ...
  "scripts": {
    "build": "rm -rf public/dist/* && parcel build src/index.html --out-dir public/dist --public-url /dist/",
  }
  // ...
}

- OzzyCzech

---

对于 Windows 系统，您可以在安装 rimraf 作为开发依赖后，使用它来替换 rm -rf 命令。 - Caleb Miller

Answer 3

一种无需大量设置且跨平台的选择是使用插件，例如parcel-plugin-nuke-dist。只需安装它即可在每次构建前清除dist/目录：

npm install parcel-plugin-nuke-dist --save-dev

注意: parcel-plugin-nuke-dist 不兼容 Parcel v2，请参考其他答案获取替代方案。

- Valentin

Answer 4

你可以将rm -rf dist（或rimraf）添加到名为prebuild的package.json脚本中。这样，在构建之前会自动运行它，因此您不必更改现有的build脚本。

{
   "scripts": {
     "prebuild": "rm -rf dist",
     "build": "parcel build",
  }
}

- matronator