📦 Parcel v1.6.0: Zero Config ES6+ and JSX, Node and Electron Targets, Bundle Statistics, and more! 🚀
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:
.babelrcis 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
browserslistkey 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
.babelrcfile 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
fsinlining 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
.webmanifestfiles 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
.babelrc configuration file to get things working, and you had to install any presets and plugins you decided to use.
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
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 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_modulesand are left as is. Relative dependencies, such as
import car from './car'are still bundled.
fs.readFileSyncis left as is.
- Globals such as
__dirnameare left as is.
- Hot Module Loading runtime is not added (for
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!