The Vue migration team is pleased to announce that MediaWiki finally has
built-in support for writing modern JavaScript with ES6.
Up until now, all JavaScript code in MediaWiki has been written in ES5 (a
version of JavaScript standardized in 2009), because MediaWiki maintains
support for some browsers that don't support ES6. Over the years this has
become increasingly frustrating for developers, because ES6 (standardized
in 2015) adds new language features that make writing code easier and more
pleasant, but these features couldn't be used in MediaWiki. A lot of modern
code and tools are now written in ES6, and browsers that don't support ES6
have become obsolete. At this point, the only significant non-ES6 browser
that MediaWiki continues to support is Internet Explorer 11, whose usage is
relatively low, but not yet quite low enough for us to drop support for it.
In keeping with the IE11 announcement[1] from earlier this month, we will
continue to support IE11, but some new features will not support it.
What this means for developers is that you can now use ES6 code in
MediaWiki core, extensions, and skins, as long as it's in a feature that
doesn't need to support IE11. ResourceLoader modules that use ES6 code have
to be flagged as such, and you will need to put ES6 code in a separate
directory so that different eslint rules can be applied. For detailed
instructions on how to start using ES6 in your code, see
https://www.mediawiki.org/wiki/ResourceLoader/ES6 .
Unfortunately, ES6 code is not yet supported in on-wiki JavaScript
(Gadgets, user scripts, and site scripts), because we need to check that
these scripts are syntactically valid, and our current validator only
understands ES5 [2].
To make this possible, we added functionality[3] to ResourceLoader to allow
modules to mark themselves as ES6-only, and prevent those modules from
being loaded in browsers that don't support ES6. We also made significant
changes[4] to our JavaScript minifier[5] to support the minification of ES6
code, which previously generated invalid output[6] when confronted with ES6
syntax. And we updated our eslint ruleset[7] to add a linter configuration
for ES6 code[8]. Thank you to Timo Tijhof (Krinkle) and DannyS712 for code
reviewing the ResourceLoader and minifier changes, to Lucas Werkmeister for
finding a critical bug[9] in the minifier change, and to James Forrester
and Ed Sanders for code reviewing the linter changes and releasing new
versions of all these packages.
Roan Kattouw
On behalf of the Vue migration team (Anne Tomasevich, Eric Gardner, Volker
Eckl, and myself)
[1]
https://www.mediawiki.org/wiki/Compatibility/IE11
[2]
https://phabricator.wikimedia.org/T75714
[3]
https://gerrit.wikimedia.org/r/c/mediawiki/core/+/657953
[4]
https://gerrit.wikimedia.org/r/c/mediawiki/libs/Minify/+/664700
[5]
https://github.com/wikimedia/Minify/
[6]
https://phabricator.wikimedia.org/T255556
[7]
https://github.com/wikimedia/eslint-config-wikimedia
[8]
https://github.com/wikimedia/eslint-config-wikimedia/pull/358
[9]
https://phabricator.wikimedia.org/T277161