📦 Parcel v1.6.0: Zero Config ES6+ and JSX, Node and Electron Targets, Bundle Statistics, and more! 🚀

5 min readFeb 15, 2018

Today I’m excited to release Parcel v1.6.0, a huge release made possible by our awesome community! Check it out on Github.

Parcel is moving at a breakneck pace. Parcel v1.6.0 is a huge release that comes just 3 weeks after v1.5.0, with over 15 new features and lots of bugfixes and improvements. The highlights include:

🐠 Zero config ES6+ transpilation with Babel — It’s now even easier to get your projects started with even less configuration: .babelrc is now optional! Parcel automatically compiles ES6+ (including node_modules!) for you using babel-preset-env, and you can easily override the default browser targets by specifying a browserslist key in your package.json.
⚛️ Automatic JSX support for React and Preact — JSX support is now also completely automatic! If you’re writing React or Preact apps, you no longer need a .babelrc file to get started. Parcel automatically detects that you’re using React or Preact and enables JSX for you. 👌
🌐 Node and Electron targets — Parcel now supports bundling for Node and Electron apps. Features that these environments have natively like fs inlining are disabled, and node_modules are not bundled.
📊 Production bundle statistics — Parcel now reports individual bundle sizes and compile times when you build for production. Optionally, you can view a more detailed report with a breakdown of the largest files in each bundle to help you optimize!
6️⃣ Node 6 support — Parcel now runs on Node 6. If you’re not already running the latest and greatest Node version, Parcel will now work for you.
✅ W3C WebManifest support — important for Progressive Web Apps, Parcel now parses .webmanifest files linked to from your HTML files and processes dependencies such as homescreen icons, and service workers.
👌 Many bugfixes and improvements!

Huge thanks to the community for contributing all of this. 🙏

Zero Config Babel Transpilation

Parcel has always supported Babel out of the box to transpile your modern JavaScript down into something consumable by browsers. However, you still needed to write a .babelrc configuration file to get things working, and you had to install any presets and plugins you decided to use.

No longer! Parcel now supports zero configuration transpilation of modern JavaScript to your specified browser or node targets using babel-preset-env out of the box: no .babelrc file necessary. 👌

By default, Parcel compiles browser code for engines with > 1% market share, and Node to the current LTS version (currently 6.0.0), but you can override this by specifying a browserslist or engines.node key in your package.json.

Parcel also supports compiling ES6+ in node_modules! If a module specifies its supported engines as a higher target than your app, the module will be compiled down to your app’s targets. This means modules written in ES6 or higher can be published to npm, and your app can still use them with no configuration necessary. Modules will only be compiled as far as necessary to reach your app’s targets: if ES6 classes are supported for example, classes in node_modules won’t be compiled.

.babelrc files are still supported automatically if you want to add additional custom plugins or additional syntax proposals. However, this no longer applies to node_modules, only app code, since the prior behavior caused too many issues in the wild.

Automatic JSX support for React and Preact

Continuing on this theme, Parcel v1.6.0 also supports JSX out of the box with zero configuration. Parcel automatically detects when you have React or Preact installed as a dependency, enables JSX syntax, and chooses the correct JSX pragma for the library you’re using. React is the default, but Preact is also supported, and it is easy to add more libraries if you’re interested in contributing. 😍

These two features — zero config babel-preset-env, and automatic JSX support — combine to provide a completely zero configuration starting point for React apps. No more need to configure Babel just to get started! But if you need to add additional features, you can easily add a .babelrc file later. 👏

Thanks to Sheel Patel for contributing this feature to Parcel! 🏆

Node and Electron Targets

Parcel started by providing a blazing fast, zero configuration experience for web applications. But today, JavaScript extends far beyond the web browser. It is on the server, in desktop and mobile apps, and much more.

Parcel v1.6.0 now has targets for Node and Electron, which produce code friendly to those environments. Since those environments have their own module systems, and provide native support for many of the things Parcel shims for browsers (like filesystem access), Parcel disables several features when you specify Node or Electron targets.

Dependencies that are not relative (such as import express from 'express';) are assumed to be from node_modules and are left as is. Relative dependencies, such as import car from './car'are still bundled.
fs.readFileSync is left as is.
Globals such as Buffer or __dirname are left as is.
Hot Module Loading runtime is not added (for --target=node).

The default remains --target=browser so your browser apps will continue to work without changes.

Thanks to Guilherme Bernal for contributing this feature to Parcel! 👏

Production Bundle Statistics

When bundling for production, Parcel now reports statistics about the output files it creates including file size and build times. With the --detailed-report flag, it will also provide a breakdown of the top assets by file size in each bundle. It will even warn you when you have a very large bundle size that you should probably take a look at. ⚠️

I hope to expand this reporting further in the future to allow even greater insight into your bundled code.

Thanks to Jasper DeMoor for working on this feature. 🏅

Try it out!

Parcel has a great road ahead, and we’re just getting started. I can’t wait to see what you do with it!

Please report any bugs you find on Github. You can also find me @devongovett on Twitter.