We would like to make use of babel presets for transpiling.
Adopting transpiling amongst other things would empower:
- the adoption of jsx like syntax
- the ability to use class keyword and module imports and exports as well as ES6 syntax in our source code. We begin by focusing on the former.
- The ability to use const/let
- ES6 syntax for more readable code
Background
This task encompasses the work to enable ES6 syntax via Babel transpilation for functional and test code under src/. Code under src/ and webpack.config.js should be revised as part of this task at minimum to use import and export instead of require and module.exports.
We were very careful in Popups to forbid ES6 syntax in the build product. This task encompasses the work to either duplicate the effort in MobileFrontend. As part of this task and assuming we wish to keep the check, pushing the ES5 config from Popups to the Wikimedia ESLint config should be considered and may expand the effort required to complete the task.
Acceptance criteria
- A transpiler is added that allows ES6 to ES5 transpilation
- Important!: No changes to code have been made to make it possible to adopt ES6 syntax (we will consider and importantly discuss all the possibilities separately, so hold off those huge patches that switch var to let/const).
- ES6 syntax cannot end up in the built output e.g. "const x = 1" it doesn't end up in production code. A grep of const in resources/dist should show no results
Sign off steps
- Change a var to a const and confirm it's not in the built output
- Setup a chat for talking through how we will make use of the transpiler (maybe super happy dev time)