Follow-up to #2815077: Adopt airbnb javascript style guide v13 as baseline ES6 javascript coding standards for Drupal

Problem/Motivation

Our current build process for ES6 is lacking some features, and is already out of date for transpile settings. Currently we have no support for JavaScript modules or polyfills, without including those files as libraries.

Proposed resolution

Move away from babel-preset-es2015 to babel-preset-env. Allowing us to specify targets for our built code, making it easier to only transpile the parts of our code that are incompatible with the browser environments we are currently supporting. Additionally, instead of using babel directly, wrap transpiling with Rollup, module bundler for JavaScript, allowing us to use polyfills for features such as Object.entries.

Remaining tasks

This patch should be applied, and will probably need a reroll, after #2815077: Adopt airbnb javascript style guide v13 as baseline ES6 javascript coding standards for Drupal is finalized.

Files: 
CommentFileSizeAuthor
rollup.patch5.87 KBdrpal

Comments

drpal created an issue. See original summary.

Status: Needs review » Needs work

The last submitted patch, rollup.patch, failed testing.

drpal’s picture

Status: Needs work » Needs review
droplet’s picture

Thanks @drpal, I waited for other comments for few day. Unfortunately no comments. Here's my little thoughts.

wrap transpiling with Rollup, module bundler for JavaScript, allowing us to use polyfills for features such as Object.entries.

@drpal, can you explain this point? Thanks!

** If we decided to go with Rollup. I think we can do it wiser and use Rollup's config / watcher.

There are few things I think we need to think 10000x times before introducing new toolings:

1. Adding new things in Drupal is hard but removing them would be 10000000000000000000x harder.
(Do it later, when we have a clear direction on how to organize the JS will be better than now)

2. Compile Performance. D8's JS are very lightweight. We have no HMR.

drpal’s picture

@droplet

Sure.

wrap transpiling with Rollup, module bundler for JavaScript, allowing us to use polyfills for features such as Object.entries.

Take Object.entries() as an example. If we want to use this, pretty useful for looking at objects, Babel will do nothing with it since it's just a syntax transpiler. If you want to include a polyfill for Object.entries() then we need a way to get it into the browser environment. We could just load a polyfill library on every page, probably not a good idea, or include a portion of core-js with a require/import statement and have those polyfills bundled with the files that need them.

There are some issues around that I can see, including a polyfill more than once, or forgetting to include it and breaking out of date browsers.

If we decided to go with Rollup. I think we can do it wiser and use Rollup's config / watcher.

Sure, whatever technical implementation we decide on is probably alright. I was looking to make the least amount of changes here and continue to use the existing watchers and JS api.

Compile Performance. D8's JS are very lightweight. We have no HMR

I've migrated about half of core/misc at this point. Compile performance has never been an issue. Additionally with Babili the built files are incredibly small and can still utilize the source maps.