📦 Parcel v1.10.0 — Babel 7, Flow, Elm, and more! 🚀
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
styleattributes, along with
<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!
- 🔗 JSON LD support — Parcel now detects assets in JSON LD documents in HTML and includes them in the build.
- 💪 Many bugfixes and improvements!
Huge thanks to everyone who contributed to this release! 🙏
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 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
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 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
Inline script and style support
Parcel now handles inline
style attributes in HTML, along with inline
<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
// Your TypeScript code here...
Try it out!
I’m really excited about this release, and I can’t wait to see what you build with it!