Parcel: Flag to delete output folder before building

Created on 1 Oct 2019  ยท  16Comments  ยท  Source: parcel-bundler/parcel

๐Ÿ™‹ Feature request

A flag/option to delete the output folder before building.

It's common place to do that in order to avoid mixing dev asssets and production assets.

๐Ÿค” Expected Behavior

Simply remove the output destination recursively before building via a flag
Should be enabled by default.

๐Ÿ˜ฏ Current Behavior

It has to be scripted manually.

๐Ÿ’ Possible Solution

Per-target flag/option deleteBeforeBuild which is enabled by default in production build mode. Simply removes the output folder.

๐Ÿ”ฆ Context

Most people add rm -rf dist; before the parcel command

That's bad for windows users since rm doesn't work that way there

Having it in parcel would make things a lot easier and save the hassle of manually adding the recursive rm command

๐Ÿ’ป Examples

$ npx parcel build index.html -o dist --delete-before-build
{
  "target": {
    "browser": {
      "main": "index.html",
      "deleteBeforeBuild": true
    }
  }
}
Feature

Most helpful comment

this is going to be implemented? I guess this is basic functionality, lib should provide, --clean-before-build or --clean flag can be implemented

All 16 comments

Hi @mkg20001
After read a bunch of articles about responsibilities of this kind of tools, I advise you to use Gulp + Parcel. Parcel is a bundles as a webpack do, so what you are waiting for is a task better executed by a task manager as a Gulp. In this case, Parcel will run as one of your task list. It is very easy to config and be happy. I wish helped you. Best regards.

Userfull links

I would say using gulp is overkill here, running rm -rf build && parcel build ... works just fine.

But I still think that this should be somehow integrated into Parcel.

I'm sorry if it comes around as a stupid question, but is there really a reason to not remove the output directory before building?

What would be the use case for that?

I feel like removing that directory beforehand is what you would want by default 99% of the time, so just making it the default behavior with no flags involved might make sense, and that other 1% of cases would be handled with manual scripting.

@kirillrogovoy While I tend to agree with that, it's still something _someone_ might want to disable. Although we could also add it and then wait for somebody to request that (disabling auto-deletion) as a feature

I'm sure there'll be cases where auto-deletion is undesirable, but I'd be curious to study them.

Ultimately, just as for manual deletion, preservation might be done via scripting around Parcel for that 1 case out of 100. :)

I'm going to see what it'd look like codewise to add auto-deletion.

I'm going to see what it'd look like codewise to add auto-deletion.

Just adding https://npm.im/rimraf propably
Although I think it should only auto-delete if the output location is a folder, otherwise in case of files it'll overwrite them

One problematic case would be symlinks, in that case I think it should check if it's a symlink via lstat and instead rimraf all the files _in_ the folder and not _the_ folder (link)

So I guess it would look like this โ€” https://github.com/parcel-bundler/parcel/pull/3616.

FWIW, if your build step involves multiple different tools, and all of them decide to clear the output directory before building, it makes it extra annoying to get them working together. A good reason for making it a flag.

The term "clean" is often used for this purpose, so it could be --clean.

@ianstormtaylor I kind of see what you mean, but I can't come up with an example...

I mean:

  1. The steps in your building process are likely to be sequential; and
  2. You wouldn't want to use the same dir as both the source and the target for building (in other words, changing/creating the files in place). But even then, you should probably engage in some sort of concurrent building to have problems with it.

But I assume I might be missing something obvious here too.

@kirillrogovoy the use cases that become annoying are ones where (a) you have to use two different tools (bundlers, transpilers, etc.) and (b) you need them to both use the same directory for their output. There are probably many combinations of edge cases that end up having both constraints.

That said, the flag could either be --clean, or --no-clean if the default was cleaning.

But something to consider too is that there might be big performance gains to be had using caching and not cleaning by default (unless cleaning got a lot smarter than rm -rf). So that might be reason enough to make cleaning opt in. (For example, potentially for copying assets.)

My preference would be to have the dist cleaned by default, but I'd go with either.

Waiting for the feedback from the core team.

Also unlike Parcel 1, Parcel 2 can output files wherever you want (not necessarily into a dist directory). For example, you could have this in your package.json:

{
  "name": "my-package",
  "source": "src/index.js",
  "main": "index.js"
}

In that example, the dist directory is actually the main package dir with all your source code too. You wouldn't want to delete that.

Does parcel@1 plugins still work on parcel@2? I was using parcel-plugin-nuke-dist for this, but it does not work anymore on parcel@2.

Does parcel@1 plugins still work on parcel@2?

No, the plugin system was completely changed.

this is going to be implemented? I guess this is basic functionality, lib should provide, --clean-before-build or --clean flag can be implemented

at the moment I'm using npm scripts:

"preparcel": "rm -rf dist/",
"parcel": "parcel $RUN src/index.js --no-autoinstall",
"build": "RUN=build npm run parcel -- --no-cache",
"watch": "RUN=watch npm run parcel",
"serve": "RUN=serve npm run parcel",

but it would be nice to clean dist with plugin, etc, also started similar discussion

Was this page helpful?
0 / 5 - 0 ratings

Related issues

466023746 picture 466023746  ยท  3Comments

davidnagli picture davidnagli  ยท  3Comments

termhn picture termhn  ยท  3Comments

will-stone picture will-stone  ยท  3Comments

Niggler picture Niggler  ยท  3Comments