Author: Eric Chen

A couple of weeks ago I attended ComponentsConf 2019 in Melbourne, Australia. This conference focuses on JavaScript frameworks and libraries, and I was pretty excited to attend it. This is because over the last year I have been working on a component library to be shared across a number of projects. It needs to work in everything from Drupal to Angular, and we're still trying to find the best foundation to build it on. A conference that is framework-agnostic seemed like a good place to learn more about the options that are available.

Our use case

It has been close to 3 years since Drupal 8 was released. With lots of amazing new features released in every 6 months we are getting more and more excited to see how Drupal has evolved and improved. With the release of Drupal 8.4, it is starting to use ES6 in core. However, there is not yet a standard practice to write ES6 in custom modules and themes. The ideal solution is for compiled JS to still stay in the original module or theme and make our output JS still be compatible with Drupal 8. Drupal is heavily modular, so Javascript files written for a module should ideally be stored with it. This atomic design pattern allows a module to easily be enabled or uninstalled, and makes our code clean. JS files could be also added in a theme level if they are more related to that theme. In this blog we will share our story on how to configure the project with webpack and other tools to facilitate ES6 in the whole Drupal 8 project including both custom modules and at the theme level.