6 ms·

I was just looking at Parcel a week or so ago to replace the stagnated Snowpack project for our frontend. Should I just stop trying to avoid it and just use We

I was just looking at Parcel a week or so ago to replace the stagnated Snowpack project for our frontend. Should I just stop trying to avoid it and just use Webpack 5, or can I actually rely on Parcel in a way I couldn't Snowpack? I just want to bundle my React app, I'm not trying to do anything special...

annoyingmous 5y ago
CognitiveLens 5y ago
Parcel has been around for awhile, and the project currently has a lot of activity - I've made the call to migrate an old create-react-app project to Parcel 2 and in general it is going well. The nice thing about Parcel is that it is intentionally low-config with relatively intuitive defaults, which tells me that it wouldn't be terribly difficult to move to a different bundler in the future. Webpack has gotten better, but you can quickly end up with a _lot_ of Webpack-specific config that makes future migrations hard. That said, optimizing for future migrations shouldn't generally be your #1 priority - I also like Parcel's speed, and new things like ParcelCSS just validate that further.
no_way 5y ago
Use Vite instead, it has very nice developer experience. Webpack is a "legacy" bundler, while it is supported, is shouldn't really be used in new projects if you really value your sanity.
- krono 5y ago
  Webpack is under active development though, nothing legacy about it as far as I'm aware. Are you referring to abandoned third-party plugins maybe? Vite and all the other bundlers are really awesome, but Webpack's strenght - and I think this may also be the root of the issues you seem to be having with the tool - is that there's almost no magic and barely any handholding. Freedom and reliability at the cost of having to build your own configuration (it's just dumping plugin config objects in an array, really not difficult).
  - 01acheru 5y ago
    > it's just dumping plugin config objects in an array, really not difficult Until you eject a CRA :)
    - krono 5y ago
      Which is the cherry on top for those types of self-chastisement fetishists who willingly put themselves at the mercy of CRA ;-)
      - bredren 5y ago
        Check out the CRACO project. Allows config of CRA w o ejecting.
        mitemte 5y ago
        Vite is so much better, IMO. Quicker too, since it uses esbuild in dev mode.
  - no_way 5y ago
    I have done manual configs from scratch in Rollup, even wrote bunch of plugins for stuff like custom css class minifying and web worker support, so no I don't need handholding :) Setting it all up was even fun, everything was well documented and clear, with Webpack on the other hand, you only have fun if you like pain.
  - ricardobeat 5y ago
    > there's almost no magic That depends entirely on your definition of “magic”. Needing a specific incantation of seven different plugins and rules, that are often conflicting and incomprehensible, to get a basic project to build, is the same as magic to me. I assume you mean magic == conventions or implicit behavior. I’ll take that over the Webpack mess any day.
    - krono 5y ago
- tiborsaas 5y ago
  > Webpack is a "legacy" bundler How did you end up with this assessment? I'm not a fan either, but it's still very popular, I doubt it will go away in the next 5 years.
  - no_way 5y ago
    It won't go away, it will still be supported and used for many years, but majority of new projects today won't use it. Brief history: Rollup dramatically improved bundler plugin and ES modules situation, then came new super fast bundlers like Esbuild and finally solutions combining both like Vite. Webpack is still playing catch up with that. There is literally zero reasons to choose clunky, slow Webpack configs, while alternatives exist, unless you have a legacy codebase and migrating is not an option.
    - howdydoo 5y ago
      > literally zero reasons What about module federation? Has any other bundler implemented that?
      - dmitriid 5y ago
        It's a relatively minor feature used by relatively few people.
      - tiborsaas 5y ago
        Do you know any success stories with that?
        howdydoo 5y ago
        I haven't heard any, but I haven't gone looking either. I'm just saying there's at least literally one reason to use webpack for new code.
- pferdone 5y ago
  I seriously don't get the hatred Webpack receives. Calling it legacy when it introduced stuff like module federation is unfair to say the least. Just because a lot of people use CRA or some "zero config" bundler, or because esbuild etc are picking up momentum, doesn't mean it's bad. The documentation is actually really good IMO.
  - spartanatreyu 5y ago
    The problem with using something like webpack is that you can't use it for something quick. You can't dip into the documentation for the one thing you're trying to do, you have to spend time reading a large chunk of the documentation, then going to forums and such to try an understand the history of how that one thing you're trying to do has changed over webpack's history. Then 5 months later when you're doing it for another project, you have to re-read all that documentation again because one other thing is different. Compare that waste of time and effort to: A developer is now unavailable and you are taking over the project. The project uses a modern build-system/module-loader/etc... You need to change one thing to the way to project is built. You don't have to learn an uber nested spaghetti config file that looks like a domain-specific language. You just read the miminal configuration the previous developer left you and now you know what to change, or how to add the one thing you need to do. You've now saved days of work.
  - alluro2 5y ago
    I agree that hatred is probably somewhat unwarranted, and flexibility and support Webpack has is immense - but, based on my experience, I understand some of the people and where it's coming from. I just replaced Webpack with Vite, in a 2yo React project, with relatively standard webpack config (scss, fonts, assets copying, minify etc). I was able to remove 24 total devDependencies packages, including the whole of babel and its related ones, bunch of webpack plugins that broke our build on every packages upgrade (e.g. to Webpack 4, then again for Webpack 5) etc etc. We now have nothing to do with babel, hard-to-understand plugins that someone added since it was solving a build error, nothing to do with webpack, just 1 almost non-existent config file, instant HMR, and 3x faster build...
  - rhengles 5y ago
- nicoburns 5y ago
  I'd argue that Vite's still pretty immature. It's great if you can stick within what works with it, but webpack is still the gold standard in terms of compatibility and features, and I suspect that will be the case for another couple of years while the native code bundlers (esbuild, swc, etc) catch up with their JS counterparts.
- TheFragenTaken 5y ago
  > Webpack is a "legacy" bundler What a weird thing to say. I feel like people say this because they don't understand it's uses, and it's versatility.
nawgz 5y ago
Snowpack, ESBuild, ..., all promised us nice frontend compiles, yet I still turn to Webpack every time I actually want everything to work - you always hit roadblocks you can't solve in these other tools. That'd be my recommendation to you, still, sadly.
- omnimus 5y ago
  Not my experience. Both esbuild and vite have been great for my usecases.
- armchairhacker 5y ago
  I recommend Vite. I use ESBuild in some libraries but it has a learning curve. Vite's experience is similar to Webpack.
01acheru 5y ago
Parcel is becoming my go-to choice most of the time now. I’ve migrated some apps out of CRA, pure Webpack and Snowpack to it and I need to say it was incredible. Some minor issues with HMR on one of those projects I still can’t figure out. Anyway having something that works, with JSX, with TS, really fast, in just 2/3 really simple steps is amazing! You don’t even need to turn your brain on. My two cents.
- CognitiveLens 5y ago
  Just a stab in the dark, but I was having HMR issues as well and it turned out to be an obscure transitive dependency conflict - details and solutions here on the outside chance it's the same thing affecting your project https://github.com/parcel-bundler/parcel/issues/6685 https://github.com/parcel-bundler/parcel/issues/6685
  - 01acheru 5y ago
    I'm also on that issue with you :) Sadly in my use case it is not a dependency conflict, but I'm failing to replicate it (and actually not even trying very hard). I guess it will automagically fix itself on some minor update.
ReleaseCandidat 5y ago
I used Parcel for about a week a month ago. Couldn't get the HTTPS server to use my certificate and key and would have needed to write a plugin so that it wouldn't rename favicons and delete files not mentioned in the HTML file. So, Esbuild for 'no configuration' as it is significantly faster than Parcel and Webpack for more complex stuff.
samhuk 5y ago
I have been using esbuild for a while, and I can say that it's looking like a huge improvement over webpack, snowpack, vite, etc. I made a web app starter that uses esbuild to bundle a react-redux app [0] and my experience was very positive of the bundler. [0] https://github.com/samhuk/tree-starter https://github.com/samhuk/tree-starter
- ianschmitz 5y ago
  Vite and snowpack are built on top of esbuild, so I’m not sure your comment makes sense.
  - samhuk 5y ago
    The point being that, IMHO, extensions over ESBuild tend to not improve the developer experience because they have a tendency to bloat and steer towards being "webpack but esbuild", which defeats the point of esbuild, being the "anti-webpack".
    - mitemte 5y ago
      Tools such as Vite, aren’t designed to improve the developer experience of ESBuild. They exist separately and leverage ESBuild’s strong qualities – JS, TS and CSS bundling and minification.

annoyingmous 5y ago

CognitiveLens 5y ago

Parcel has been around for awhile, and the project currently has a lot of activity - I've made the call to migrate an old create-react-app project to Parcel 2 and in general it is going well. The nice thing about Parcel is that it is intentionally low-config with relatively intuitive defaults, which tells me that it wouldn't be terribly difficult to move to a different bundler in the future. Webpack has gotten better, but you can quickly end up with a _lot_ of Webpack-specific config that makes future migrations hard. That said, optimizing for future migrations shouldn't generally be your #1 priority - I also like Parcel's speed, and new things like ParcelCSS just validate that further.

no_way 5y ago

Use Vite instead, it has very nice developer experience. Webpack is a "legacy" bundler, while it is supported, is shouldn't really be used in new projects if you really value your sanity.

krono 5y ago
Webpack is under active development though, nothing legacy about it as far as I'm aware. Are you referring to abandoned third-party plugins maybe? Vite and all the other bundlers are really awesome, but Webpack's strenght - and I think this may also be the root of the issues you seem to be having with the tool - is that there's almost no magic and barely any handholding. Freedom and reliability at the cost of having to build your own configuration (it's just dumping plugin config objects in an array, really not difficult).
- 01acheru 5y ago
  > it's just dumping plugin config objects in an array, really not difficult Until you eject a CRA :)
  - krono 5y ago
    Which is the cherry on top for those types of self-chastisement fetishists who willingly put themselves at the mercy of CRA ;-)
    - bredren 5y ago
      Check out the CRACO project. Allows config of CRA w o ejecting.
      - mitemte 5y ago
        Vite is so much better, IMO. Quicker too, since it uses esbuild in dev mode.
- no_way 5y ago
  I have done manual configs from scratch in Rollup, even wrote bunch of plugins for stuff like custom css class minifying and web worker support, so no I don't need handholding :) Setting it all up was even fun, everything was well documented and clear, with Webpack on the other hand, you only have fun if you like pain.
- ricardobeat 5y ago
  > there's almost no magic That depends entirely on your definition of “magic”. Needing a specific incantation of seven different plugins and rules, that are often conflicting and incomprehensible, to get a basic project to build, is the same as magic to me. I assume you mean magic == conventions or implicit behavior. I’ll take that over the Webpack mess any day.
  - krono 5y ago
tiborsaas 5y ago
> Webpack is a "legacy" bundler How did you end up with this assessment? I'm not a fan either, but it's still very popular, I doubt it will go away in the next 5 years.
- no_way 5y ago
  It won't go away, it will still be supported and used for many years, but majority of new projects today won't use it. Brief history: Rollup dramatically improved bundler plugin and ES modules situation, then came new super fast bundlers like Esbuild and finally solutions combining both like Vite. Webpack is still playing catch up with that. There is literally zero reasons to choose clunky, slow Webpack configs, while alternatives exist, unless you have a legacy codebase and migrating is not an option.
  - howdydoo 5y ago
    > literally zero reasons What about module federation? Has any other bundler implemented that?
    - dmitriid 5y ago
      It's a relatively minor feature used by relatively few people.
    - tiborsaas 5y ago
      Do you know any success stories with that?
      - howdydoo 5y ago
        I haven't heard any, but I haven't gone looking either. I'm just saying there's at least literally one reason to use webpack for new code.
pferdone 5y ago
I seriously don't get the hatred Webpack receives. Calling it legacy when it introduced stuff like module federation is unfair to say the least. Just because a lot of people use CRA or some "zero config" bundler, or because esbuild etc are picking up momentum, doesn't mean it's bad. The documentation is actually really good IMO.
- spartanatreyu 5y ago
  The problem with using something like webpack is that you can't use it for something quick. You can't dip into the documentation for the one thing you're trying to do, you have to spend time reading a large chunk of the documentation, then going to forums and such to try an understand the history of how that one thing you're trying to do has changed over webpack's history. Then 5 months later when you're doing it for another project, you have to re-read all that documentation again because one other thing is different. Compare that waste of time and effort to: A developer is now unavailable and you are taking over the project. The project uses a modern build-system/module-loader/etc... You need to change one thing to the way to project is built. You don't have to learn an uber nested spaghetti config file that looks like a domain-specific language. You just read the miminal configuration the previous developer left you and now you know what to change, or how to add the one thing you need to do. You've now saved days of work.
- alluro2 5y ago
  I agree that hatred is probably somewhat unwarranted, and flexibility and support Webpack has is immense - but, based on my experience, I understand some of the people and where it's coming from. I just replaced Webpack with Vite, in a 2yo React project, with relatively standard webpack config (scss, fonts, assets copying, minify etc). I was able to remove 24 total devDependencies packages, including the whole of babel and its related ones, bunch of webpack plugins that broke our build on every packages upgrade (e.g. to Webpack 4, then again for Webpack 5) etc etc. We now have nothing to do with babel, hard-to-understand plugins that someone added since it was solving a build error, nothing to do with webpack, just 1 almost non-existent config file, instant HMR, and 3x faster build...
- rhengles 5y ago
nicoburns 5y ago
I'd argue that Vite's still pretty immature. It's great if you can stick within what works with it, but webpack is still the gold standard in terms of compatibility and features, and I suspect that will be the case for another couple of years while the native code bundlers (esbuild, swc, etc) catch up with their JS counterparts.
TheFragenTaken 5y ago
> Webpack is a "legacy" bundler What a weird thing to say. I feel like people say this because they don't understand it's uses, and it's versatility.

nawgz 5y ago

Snowpack, ESBuild, ..., all promised us nice frontend compiles, yet I still turn to Webpack every time I actually want everything to work - you always hit roadblocks you can't solve in these other tools. That'd be my recommendation to you, still, sadly.

omnimus 5y ago
Not my experience. Both esbuild and vite have been great for my usecases.
armchairhacker 5y ago
I recommend Vite. I use ESBuild in some libraries but it has a learning curve. Vite's experience is similar to Webpack.

01acheru 5y ago

Parcel is becoming my go-to choice most of the time now. I’ve migrated some apps out of CRA, pure Webpack and Snowpack to it and I need to say it was incredible. Some minor issues with HMR on one of those projects I still can’t figure out. Anyway having something that works, with JSX, with TS, really fast, in just 2/3 really simple steps is amazing! You don’t even need to turn your brain on. My two cents.

CognitiveLens 5y ago
Just a stab in the dark, but I was having HMR issues as well and it turned out to be an obscure transitive dependency conflict - details and solutions here on the outside chance it's the same thing affecting your project https://github.com/parcel-bundler/parcel/issues/6685 https://github.com/parcel-bundler/parcel/issues/6685
- 01acheru 5y ago
  I'm also on that issue with you :) Sadly in my use case it is not a dependency conflict, but I'm failing to replicate it (and actually not even trying very hard). I guess it will automagically fix itself on some minor update.

ReleaseCandidat 5y ago

I used Parcel for about a week a month ago. Couldn't get the HTTPS server to use my certificate and key and would have needed to write a plugin so that it wouldn't rename favicons and delete files not mentioned in the HTML file. So, Esbuild for 'no configuration' as it is significantly faster than Parcel and Webpack for more complex stuff.

samhuk 5y ago

I have been using esbuild for a while, and I can say that it's looking like a huge improvement over webpack, snowpack, vite, etc. I made a web app starter that uses esbuild to bundle a react-redux app [0] and my experience was very positive of the bundler. [0] https://github.com/samhuk/tree-starter https://github.com/samhuk/tree-starter

ianschmitz 5y ago
Vite and snowpack are built on top of esbuild, so I’m not sure your comment makes sense.
- samhuk 5y ago
  The point being that, IMHO, extensions over ESBuild tend to not improve the developer experience because they have a tendency to bloat and steer towards being "webpack but esbuild", which defeats the point of esbuild, being the "anti-webpack".
  - mitemte 5y ago
    Tools such as Vite, aren’t designed to improve the developer experience of ESBuild. They exist separately and leverage ESBuild’s strong qualities – JS, TS and CSS bundling and minification.