📦 Parcel v1.10.0 — Babel 7, Flow, Elm, and more! 🚀

4 min readSep 25, 2018

Today I’m super excited to release Parcel v1.10.0. Check it out on Github!

🐠 Babel 7 support — Parcel now supports Babel 7 plugins out of the box, while retaining Babel 6 support as well. In addition, we now automatically install the correct version of Babel for you, along with any missing plugins as you develop!
🌊 Automatic Flow support — Parcel automatically detects Flow types and strips them from your JS at build time, just like we already do for TypeScript. No need to configure Babel — it just works!
🌳 Elm support — Elm is now supported out of the box! We automatically install the Elm toolchain for you if needed, and initialize an Elm project for you. Full optimization support is included by default for production builds.
👔 Inline script and style support — Parcel detects inline style attributes, along with <script> and <style> tags in your HTML and processes them the same way as it does external content. The results are placed back in your HTML so it remains inline as intended!
🏷 HTML bundle loader — You can now load external HTML files into your JavaScript asynchronously at runtime using the import('./some.html') syntax.
🔗 JSON LD support — Parcel now detects assets in JSON LD documents in HTML and includes them in the build.
🗺 Load existing source maps — Parcel can now load existing source maps that are referenced from imported pre-compiled JavaScript files, so you can debug using the true original source.
💪 Many bugfixes and improvements!

Huge thanks to everyone who contributed to this release! 🙏

Babel 7

Babel 7 has been a long time in the making, and was finally released a few weeks ago. Parcel v1.10.0 now has support for Babel 7 out of the box, while retaining support for existing projects using Babel 6 as well. When you switch to Babel 7, you should see slightly faster build performance, and support for new language feature proposals as well.

For many Parcel projects, a .babelrc is not needed at all since Parcel automatically supports compiling modern JS out of the box with babel-preset-env, along with automatic JSX support, and now Flow as well (see below). For those projects, you don’t need to do anything at all to start using Babel 7 — Parcel will do it for you automatically!

On existing projects with a .babelrc using Babel 6, we will continue using Babel 6 as normal. If you don’t have an explicit dependency on babel-core in your package.json, one will be automatically installed for you.

If you would like to upgrade to Babel 7, you need to add a dependency on @babel/core to your package.json and remove the dependency on babel-core, and adjust your .babelrc to point to Babel 7 plugins. After that, Parcel will automatically use Babel 7 to build your code.

For new projects, when you create a .babelrc file, we will automatically detect whether the plugins are dependent on Babel 6 or 7 and automatically install either babel-core or @babel/core into your project for you.

Parcel will also now automatically install Babel plugins specified in your .babelrc if they are not already installed. Now all you have to do to add a new plugin to your project is add the plugin to .babelrc and Parcel will take care of installing it for you! 💥

Automatic Flow Support

If you’re using the Flow type system with your JavaScript, you typically need to add a Babel plugin to strip the types as part of your build process. With Parcel v1.10.0, this is taken care of for you automatically.

Parcel automatically detects files with an @flow comment at the top, and strips the types for you. This means less manual configuration to manage in your app — easier to get started and maintain!

Elm Support

Elm is a functional programming language that compiles to JavaScript, designed for building webapps. Parcel v1.10.0 now supports Elm out of the box, with zero configuration!

When a .elm file is detected, Parcel automatically installs the elm compiler toolchain for you if you don’t already have it installed, initializes a project with an elm.json file if needed, and compiles the file to JavaScript. It automatically reloads the page when you change the file as well, for fast development.

When you’re ready to go to production, Parcel handles the compression and optimization settings for you. Since Elm does not have side-effects, some advanced optimizations can automatically be enabled that result in much smaller code than could typically be generated by a JavaScript minifier.

Inline script and style support

Parcel now handles inline style attributes in HTML, along with inline <script> and <style> tags. This means that things like referenced files in a background-image will automatically be detected and added to the dependency graph!

<div style="background-image: url(./logo.jpg)">Logo</div>

You can also use compile-to-JS (e.g. CoffeeScript or TypeScript), or compile-to-CSS (e.g. SASS, or Stylus) languages inline in HTML now. Just use the type attribute:

<script type="application/ts">
  // Your TypeScript code here...
</script>

Try it out!

I’m really excited about this release, and I can’t wait to see what you build with it!

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