parcel VS browserslist

Compare parcel vs browserslist and see what are their differences.

parcel

The zero configuration build tool for the web. πŸ“¦πŸš€ (by parcel-bundler)

browserslist

πŸ¦” Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env (by browserslist)
Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • JetBrains - Developer Ecosystem Survey 2022
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
parcel browserslist
109 25
40,883 10,743
0.6% 2.0%
9.5 8.7
4 days ago 6 days ago
JavaScript JavaScript
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

parcel

Posts with mentions or reviews of parcel. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-06-09.

browserslist

Posts with mentions or reviews of browserslist. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-05-24.
  • RIP IE!, would this give performance benefit for future react?
    1 project | reddit.com/r/reactjs | 16 Jun 2022
    If you want to optimize your bundle for ES6, use browserslist and drop IE (this works for most tools: CRA, Webpack, etc).
  • Internet Explorer retires on June 15 - what can a developer do?
    3 projects | dev.to | 24 May 2022
    If you are developing a web application, you are most likely using technologies such as Babel with the preset-env plugin and Webpack to bundle your code. You can set a browserslist (docs) property in package.json to set the browsers you want to target:
  • Detox doesn't detect button tap or run any tests
    1 project | reddit.com/r/reactnative | 17 May 2022
    https://github.com/browserslist/browserslist#browsers-data-updating
  • Open Source Adventures: Episode 24: Imba 2 and Cypress
    3 projects | dev.to | 25 Mar 2022
    $ npm test > test > cypress run ==================================================================================================== (Run Starting) β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ Cypress: 9.5.2 β”‚ β”‚ Browser: Electron 94 (headless) β”‚ β”‚ Node Version: v17.7.1 (/usr/local/Cellar/node/17.7.1/bin/node) β”‚ β”‚ Specs: 1 found (app.spec.js) β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ ──────────────────────────────────────────────────────────────────────────────────────────────────── Running: app.spec.js (1 of 1) Browserslist: caniuse-lite is outdated. Please run: npx [email protected] --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating JSON Pretty Printing App βœ“ does not format JSON automatically (634ms) βœ“ formats JSON when you press the button (521ms) βœ“ reports error if JSON is invalid, but clears if text changes (697ms) 3 passing (3s) (Results) β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ Tests: 3 β”‚ β”‚ Passing: 3 β”‚ β”‚ Failing: 0 β”‚ β”‚ Pending: 0 β”‚ β”‚ Skipped: 0 β”‚ β”‚ Screenshots: 0 β”‚ β”‚ Video: true β”‚ β”‚ Duration: 2 seconds β”‚ β”‚ Spec Ran: app.spec.js β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ (Video) - Started processing: Compressing to 32 CRF - Finished processing: ~/imba2-json-beautifier/cypress/videos/app.spec.js.mp4 (0 seconds) ==================================================================================================== (Run Finished) Spec Tests Passing Failing Pending Skipped β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ βœ” app.spec.js 00:02 3 3 - - - β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ βœ” All specs passed! 00:02 3 3 - - -
  • React not producing the 'build' folder
    1 project | reddit.com/r/reactjs | 8 Feb 2022
    > [email protected] build > react-scripts build (node:42983) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Users/tazar/nft-minter-tutor/minter-starter-files/node_modules/postcss-safe-parser/node_modules/postcss/package.json. Update this package.json to use a subpath pattern like "./*". (Use `node --trace-deprecation ...` to show where the warning was created) Creating an optimized production build... Browserslist: caniuse-lite is outdated. Please run: npx [email protected] --update-db Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating Compiled with warnings. src/Minter.js Line 17:13: Effect callbacks are synchronous to prevent race conditions. Put the async function inside: useEffect(() => { async function fetchData() { // You can await here const response = await MyAPI.getData(someId); // ... } fetchData(); }, [someId]); // Or [] if effect doesn't need props or state Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching react-hooks/exhaustive-deps Line 44:11: Using target="_blank" without rel="noreferrer" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener react/jsx-no-target-blank src/util/interact.js Line 18:17: Expected '===' and instead saw '==' eqeqeq Line 18:39: Expected '===' and instead saw '==' eqeqeq Line 18:67: Expected '===' and instead saw '==' eqeqeq Line 26:20: The object literal notation {} is preferrable no-new-object Line 99:15: Using target="_blank" without rel="noreferrer" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener react/jsx-no-target-blank Line 143:15: Using target="_blank" without rel="noreferrer" is a security risk: see https://html.spec.whatwg.org/multipage/links.html#link-type-noopener react/jsx-no-target-blank Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. File sizes after gzip: 405.89 KB build/static/js/2.c5012901.chunk.js 2.91 KB build/static/js/main.25eb141f.chunk.js 1.56 KB build/static/js/3.efe3821b.chunk.js 1.17 KB build/static/js/runtime-main.38263bc1.js 840 B build/static/css/main.f137583a.chunk.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: yarn global add serve serve -s build Find out more about deployment here: https://cra.link/deployment (base) [email protected] minter-starter-files %
  • Zero experience with Angular. I'm in charge of our CI and we're getting extremely slow prod build times (~1 hour 34 mins). Where should I start researching solutions for this?
    3 projects | reddit.com/r/angular | 1 Feb 2022
  • The Optional Chaining Operator, β€œModern” Browsers, and My Mom
    5 projects | news.ycombinator.com | 11 Jan 2022
    - iOS Safari 12.?? (originally released 2018, last update 2019[3])

    So using Create React app this probably should have at least worked in iOS Safari.

    So this brings up the question of how far back should we support? Chrome 76 and iOS 12 are only a few years old (2018-2019). According to caniuse[4], Both Chrome 76 and Safari 12.1 have a usage of 0.07% so in order to support it you would need to change the ">0.2%" to ">0.06%". If your build process is already setup to use Babel+BrowsersList then it should be an easy fix of just changing values in the array and it should come at no cost to your development experience.

    1. https://github.com/browserslist/browserslist

    2. https://en.wikipedia.org/wiki/Google_Chrome_version_history

    3. https://en.wikipedia.org/wiki/Safari_version_history

    4 https://caniuse.com/usage-table

  • Manage list of supported browsers for your application in Angular
    3 projects | dev.to | 14 Dec 2021
    This scenario is very easy to implement with browserslist-useragent-regexp package. This package along with browserlist (already provided by angular) enables us to query / cherry-pick browsers according to their version numbers.
  • How do you guys check the design and functionality for all devices and browsers?
    1 project | reddit.com/r/webdev | 9 Dec 2021
  • Newbie - Is browser comptability only related to mobile browsers?
    1 project | reddit.com/r/webdev | 6 Dec 2021
    During development it's important to implement tooling that will actively lint the code you're writing, it'll tell you if there's a problem i.e. browserslist, eslint, stylelint.

What are some alternatives?

When comparing parcel and browserslist you can also consider the following projects:

vite - Next generation frontend tooling. It's fast!

esbuild - An extremely fast JavaScript and CSS bundler and minifier

Snowpack - ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️ [Moved to: https://github.com/FredKSchott/snowpack]

webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

gulp - A toolkit to automate & enhance your workflow

Next.js - The React Framework

Rollup - Next-generation ES module bundler

tsdx - Zero-config CLI for TypeScript package development

create-react-app - Set up a modern web app by running one command.

FuseBox - A blazing fast js bundler/loader with a comprehensive API :fire:

autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use

swc - Rust-based platform for the Web