Change record status: 
Project: 
Introduced in branch: 
8.4.x
Introduced in version: 
8.4.0
Description: 

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 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 run watch:js

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

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

Impacts: 
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: 
Other updates done

Comments

giorgio79’s picture

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