如何在使用 Parcel 构建之前擦除 dist/ 目录

Question

我有一个非常简单的项目，设置为使用 Parcel 作为捆绑器。这只是他们的入门指南中的基本示例。

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

Answer 1

您可以将清理任务委托给单个脚本，该脚本的任务是擦除输出目录。请注意，使用与平台无关的包（例如rimrafrm -rf）相比，使用它更容易出错，而 rimraf 在 Windows 环境中也可以毫无问题地执行。

步骤是：

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

{ 
   "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 文件中的一处并进行更改。

Answer 2

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

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

Answer 3

一种需要很少设置且跨平台的选项是使用像Parcel-plugin-nuke-dist这样的插件。只需安装它，它就会dist/在每次构建之前清除目录：

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

注意：parcel-plugin-nuke-dist与 Parcel v2 不兼容，请参阅其他答案以获取替代方案