📦 Parcel v1.7.0: Vue, Content Hashed Bundle Names, Aliases, Auto-install dependencies, and more! 🚀

6 min readMar 28, 2018

Today I’m excited to release Parcel v1.7.0, a huge release with tons of new features and improvements! Check it out on Github.

Since the last release, Parcel has continued to improve at a breakneck pace. Parcel v1.7.0 includes over 15 MAJOR new features, and fixes lots of bugs too. The highlights include:

🖖 Zero config Vue support out of the box! — Parcel now has full support for .vue files out of the box with no plugins or configuration required, including support for preprocessors like CoffeeScript, Jade, and Stylus, scoped styles, CSS modules, functional templates, and hot module replacement!
💰 Content hashed bundle names for long-term caching — Parcel now supports long-term caching of assets using a new file naming strategy that includes a hash of file contents when building for production. Now, when a bundle changes, its filename will too. The original file paths are now also retained for HTML and other files that should have predictable links.
🕵️‍♂️ Faster resolver supporting aliases, absolute and tilde paths — Parcel’s module resolver has been completely rewritten, and now supports aliases (so you can e.g. alias react to preact), along with /absolute and ~/tilde paths to resolve to the project root more easily than ../../../relative/paths. The new resolver is also much faster, especially when building from cache.
🧙‍♂️ Automagically install missing dependencies in your code — Parcel now automatically installs missing npm dependencies that you require or import in your code with yarn or npm. As you develop and import a new dependency, you no longer need to switch to your terminal to manually npm install, Parcel takes care of it for you!
☕️ GLSL asset support — Parcel now supports importing GLSL code for use with WebGL! It uses glslify to do this, so you can even require GLSL files from each other as well. Thanks to Vladyslav Batyrenko for contributing this feature. 🙏
🐶 Pug and Jade support — Pug and Jade files are now supported out of the box, no plugin needed! Thanks to Maksim Karelov for contributing this feature. 😍
🚨 HMR error overlay — When you are developing with hot module replacement, and you write a syntax error, you’ll now get an overlay over your app with some details about the problem. Thanks to Leta Montopoli for contributing this feature. 👍
👌 Many bugfixes and improvements!

Huge thanks to the community for your contributions. 🙏

Vue Support

From day one, Vue support was Parcel’s top requested feature, gaining over 100 👍 on Github. Implementing it in Parcel turned out to be a little complicated, but after a few architecture improvements we got there. And boy is it good! 👌

Because of Parcel’s existing zero-config architecture, .vue files containing just about any language just work out of the box. This includes template languages like Pug and Jade (also added in this release), style languages like Stylus, SASS, and LESS, and script languages like CoffeeScript, and TypeScript. CSS modules are also supported, along with scoped styles. All of this requires zero configuration.

Hot module replacement also works completely automatically — your components will re-render in place as you develop, along with your styles.

Vue Hacker News example app, built with Parcel!

As a test app, I updated the Vue Hacker News example app to use Parcel to build instead of Webpack. This resulted in deleting about 400 lines of configuration and build code, along with removing 27 dependencies from package.json. Otherwise, the code worked without any changes! Check out the diff for more details.

Thanks to Shawn Presser and Jasper DeMoor for working on this feature! 🏆

Content hashed bundle names

Another huge ask from the community from early on was support for long-term cacheable files. This is usually done by adding a hash of file contents to the filename, so that when the file changes, so does the URL, which invalidates the cache. Since the hash is per-file, only the files that change between builds are invalidated.

Parcel now supports exactly this, and it is enabled automatically when building for production. We have a new file naming strategy, which automatically detects assets which should have predictable links that should not change between builds (like HTML files), and excludes those from hashing. Those files instead retain their original filename, and relative path. So if you link to ./foo/bar.html from index.html, a file called dist/foo/bar.html will be produced.

Static assets like images, scripts, and CSS files have a content hash added to them, and get placed in the top-level directory. For example, if you had a JS file called script.js, an output file called dist/script.af53de.js might be produced.

Faster resolver supporting aliases, absolute and tilde paths

Parcel originally used an npm module called browser-resolve to do all of its module resolution. This module implements the Node require resolution algorithm used by most bundlers.

Parcel v1.7.0 includes a new resolver written from the ground up to be much faster and more extendible. Along with the standard require resolution algorithm, Parcel’s resolver supports 3 new features: aliases, /absolute paths, and ~/tilde paths.

Aliases — Aliases were a highly requested feature, and basically allow you to override the resolution of a particular module in both your application’s code as well as any other node_modules you use. To use it, just add an alias field to your app’s package.json. For example, to replace react with preact across all code in your app: {"alias": {"react": "preact"}}.
Tilde paths — Sometimes it is annoying to have to write long relative paths like ../../../some/file.js. Wouldn’t it be nice to be able to easily reference the root of your project or module? Tilde paths let you do that. Just write ~/some/file.js instead and it will be resolved relative to the nearest node_modules folder or your project root.
Absolute paths — Absolute paths work the same way as tilde paths, except instead of resolving relative to the nearest module, they always resolve relative to the project root.

Along with these features, the new Parcel resolver is considerably faster than the previous one, especially when building from cache. On one large project, I saw build times go from 4.93s to 1.40s when building from cache!

Automagically install missing dependencies in your code

Parcel is all about creating a super great development experience. Early on, we added support for automatically installing build dependencies like compilers for you instead of throwing an error message. Now, we’re extending this experience to your code as well.

As you develop, you might need to add a new library from npm to your project. Usually, you’d need to switch to your terminal and manually install it. With Parcel v1.7.0, this is no longer necessary. Just add a require or import for it in your code, and Parcel will automatically take care of installing it for you with yarn or npm when you save. It’s like developing with all of the modules on npm already pre-installed!

Thanks to David Nagli for implementing this feature! 😍

Try it out!

Parcel v1.7.0 is a HUGE release, but we’re still 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.