Drupal core now using ES6 for JavaScript development

In order to modernize our JavaScript we are now using ES6 for core development. Writing a JavaScript patch for core require the use of Node.js and Babel to transpile ES6 to ES5. All tools and configuration are provided by core.

Core Patch Contributor Workflow

Pre-requisites

Before starting, ensure that you are using at least the latest LTS release an appropriate version of Node.js (and NPM/yarn) for your version of Drupal, which is available for your platform here. For Drupal 8 this is likely Node v10 (possibly v8 for early D8 versions), and D9 Node v12; otherwise you will get yarn install errors (see below). Follow the installer instructions to ensure Node.js is installed correctly. It is likely you'll need to manage Node.js versions with a package manager such as Node Version Manager (nvm); instructions are available here for many common package managers.

Once Node.js has been installed, we recommend Yarn (over NPM) for managing dependencies. Install Yarn either with the instructions here, or with NPM.

npm i -g yarn

Once finished installing Node.js and Yarn, navigate to the core/ directory and type yarn install to install all of the dependencies required to lint and build core JavaScript.

Working on core Javascript

When developing core JavaScript locally you can use the watcher to make changes and have them compiled as you save as well as generate source maps.

cd core
yarn install
yarn run watch:js

This watcher will only watch changes in files with the .es6.js extension.

If you want to build source maps during development use, yarn run watch:js-dev.

Building core JavaScript

To build all JavaScript run yarn run build:js. This will create .js transpiled versions of the .es6.js files. Source maps will not be included with the built files.

If you want to only transpile a specific file you can pass the --file flag.

yarn run build:js -- --file misc/drupal.es6.js

Creating a core patch

Since drupal.org package management does not build Javascript and we can't change our build process in a minor release, you will need to include the transpiled files in any patches submitted to drupal.org. Before creating a patch, build core's Javascript as above and then submit a patch which includes all the changes. The patch should include changes to .es6.js and .js files.

Reviewing a core patch

It is important to check that both the .es6.js and transpiled .js are present. It is also important to review the .es6.js changes and then ensure that if you transpile the .es6.js files you end up with the same patch.

For more information about ES6 coding standards and linting read https://www.drupal.org/node/2873849