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

Question

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

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

Answer 1

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

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

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

Answer 2

您可以运行 rm -rf public/dist/* 在运行ning parcel 构建之前直接在 package.json scripts

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

Answer 3

您可以将清理任务委托给一个单独的脚本，该任务将擦除您的 output 目录。请注意，使用 rm -rf 比使用 rimraf 等与平台无关的软件包更容易出错，后者在 Windows 环境中也可以毫无问题地执行。

步骤是：

npm i -D rimraf
然后编辑您的 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 文件中进行更改。

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

How to wipe dist/ directory before a build with Parcel

parceljs