Thus begins the technical part of MobileFrontend's webpack adventure. We need to setup the foundations of the next few quarters of work... exciting!
Precursors
- T197639 has been completed.
- Tech lead (or substitute) has reviewed and amended this card to reflect output.
- Existing code coverage is documented on mediawiki.org project page -- Stephen's note: invalid; see T197637
Plan
Based on the initial exploratory work (https://gerrit.wikimedia.org/r/406782) and hopefully confirmed by T197639, we will begin by porting the module.startup JavaScript starting with modules.js and its tests to Webpack. Take the easy road wherever possible by striving for 1:1 correspondence with the Webpack build product and the ResourceLoader inputs. E.g., after this task is completed, extension.json may change from:
"scripts": [ "resources/mobile.startup/modules.js", "resources/mobile.startup/oo-extend.js", "resources/mobile.startup/util.js", "resources/mobile.startup/View.js", "resources/mobile.startup/browser.js", "resources/mobile.startup/cache.js", "resources/mobile.startup/time.js", "resources/mobile.startup/context.js", "resources/mobile.startup/user.js", "resources/mobile.startup/PageGateway.js", "resources/mobile.startup/Anchor.js", "resources/mobile.startup/Button.js", "resources/mobile.startup/Icon.js", "resources/mobile.startup/icons.js", "resources/mobile.startup/Panel.js", "resources/mobile.startup/Section.js", "resources/mobile.startup/Thumbnail.js", "resources/mobile.startup/Page.js", "resources/mobile.startup/Skin.js", "resources/mobile.startup/OverlayManager.js", "resources/mobile.startup/Overlay.js", "resources/mobile.startup/LoadingOverlay.js", "resources/mobile.startup/rlModuleLoader.js", "resources/mobile.startup/Drawer.js", "resources/mobile.startup/CtaDrawer.js", "resources/mobile.startup/PageList.js", "resources/mobile.startup/toast.js" ]
To keep things simple, (since configuring webpack is hard), this task can be considered done when modules.js has been replaced by a webpack bundle.
e.g.
"scripts": [ "resources/mobile.startup/dist/index.js", "resources/mobile.startup/oo-extend.js", "resources/mobile.startup/util.js", "resources/mobile.startup/View.js", "resources/mobile.startup/browser.js", "resources/mobile.startup/cache.js", "resources/mobile.startup/time.js", "resources/mobile.startup/context.js", "resources/mobile.startup/user.js", "resources/mobile.startup/PageGateway.js", "resources/mobile.startup/Anchor.js", "resources/mobile.startup/Button.js", "resources/mobile.startup/Icon.js", "resources/mobile.startup/icons.js", "resources/mobile.startup/Panel.js", "resources/mobile.startup/Section.js", "resources/mobile.startup/Thumbnail.js", "resources/mobile.startup/Page.js", "resources/mobile.startup/Skin.js", "resources/mobile.startup/OverlayManager.js", "resources/mobile.startup/Overlay.js", "resources/mobile.startup/LoadingOverlay.js", "resources/mobile.startup/rlModuleLoader.js", "resources/mobile.startup/Drawer.js", "resources/mobile.startup/CtaDrawer.js", "resources/mobile.startup/PageList.js", "resources/mobile.startup/toast.js" ]
After building this one module, we should be able to get a better estimate about whether it's feasible to tackle the whole module in one task. Long term we'll aim to get to:
e.g.
"scripts": [ "resources/mobile.startup/dist/index.js" ]
Acceptance criteria
- Does MobileFrontend have a working version of the latest version of webpack?
- Does the resulting code get bundled into the mobile.startup module?
- Are the tests for the ModuleLoader working in headless node-qunit?
- Is MobileFrontend working just as it did before? Can Minerva still access an instance of the ModuleLoader?
- Is one copy of oo-js being loaded (the one inside core?)
Developer notes
Although longterm we may not need the ModuleLoader which provides M.define and M.require functionality, we will need to keep it around during the port given many things depend on it. There's a great irony in porting a ModuleLoader to a system where one of the benefits allows module loading. Enjoy.
Note, the POC loaded oojs from npm. Don't do that as we'll be shipping 2 copies of OOjs.
Note, the POC uses webpack 3. Webpack 4 makes more sense now. Let's start of as shiny as possible.
Sign off steps
- Revisit T155802 and rewrite/unstall it based on feedback from the developer working this task on how long it took.
- Record the change in JS size