Change record status: 
Introduced in branch: 
Introduced in version: 

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


Before starting, ensure that you are using at least the latest LTS release of Node.js, which is available for your platform here. Follow the installer instructions to ensure Node.js is installed correctly. If you want to manage Node.js with a package manager, 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 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 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

Module developers
Updates Done (doc team, etc.)
Online documentation: 
Not done
Theming guide: 
Not done
Module developer documentation: 
Not done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other updates done


giorgio79’s picture

Could we get a Youtube vid for the workflow? :P

redgluten’s picture

Given the pace of change in the JavaScript ecosystem, can you explain the motivations for using Yarn over NPM? The latest npm release includes huge performance improvements and the support for a lock file package-lock.json which were some of the most important advantages of yarn. Seeing what happened with HHVM / PHP 7, maybe a slightly more conservative choice would be better to avoid another migration in the future?

droplet’s picture


I think we open for any changes. Also @see: #2881697: npm@5 creates package-lock.json automatically

tedbow’s picture

This needs to be updated. Currently to build source maps you need to use
yarn run watch:js-dev

loopduplicate’s picture

Looks like that information has been added to the description.