Use webpack/scalajs-bundler to minify files

[ebruchez]

sbt-web is dead and the UglifyJs we use is fairly broken in that it regularly recompresses all the files.

Seems that we "want to use webpack’s uglify plugin, not sbt’s one", see:

https://github.com/scalacenter/scalajs-bundler/blob/master/sbt-scalajs-bundler/src/sbt-test/sbt-scalajs-bundler/sharedconfig/prod.webpack.config.js

[ebruchez]

scalajs-bundler allows us to specify npmDependencies in sbt. What's unclear for now is what happens to those: are they just stored into *-fastopt-bundle.js? Are there options?

We have a JavaScript baseline. How would bundling impact that since it's done at compile-time?

[ebruchez]

It seems that webpack can output separate files.

If we use webpack to do the processing (minification, less-to-css, etc.) and still produce individual files/modules, then we can probably keep our baseline/other scheme.

But should we want to use webpack to actually resolve and bundle modules, we might have to revise our dynamic baseline/other scheme.

[ebruchez]

I looked again into scalajs-bundler. It seems that if we want to keep the ability to export things globally, we need:

webpackBundlingMode := BundlingMode.LibraryAndApplication()

But even so, we will no longer be able to use @JSExportTopLevel and namespaces, see this.

So we have to see how we can export our public APIs in a backward-compatible way. We also have some of those APIs which we use internally, for example from xforms.js.

This said I tried enabling scalajs-bundler on formRunnerJS, and I managed to create a bundle and use a dependency with @JSImport (for Ladda) and get things to work.

Next steps:

• [ ] figure out how to export our global APIs
  • [ ] as top-level objects, for backward compatibility
    • our code could, upon initialization, set itself into the appropriate window.ORBEON hierarchy
  • [ ] can we also somehow expose our APIs as modules?
    • those would probably have to be native ES6 modules? although WebPack doesn't allow exporting ES6 modules as of 2020-02-07, I think
• [ ] figure out how to include the minified JS into our bundle
• [ ] update build.sbt

[ebruchez]

To clarify the process, here is how things work:

• Scala.js compiles to foo-fastopt.js or foo-opt.js as usual
• imports in the Scala file translate to "naked" calls to require, as in:

  var $i_ladda = require("ladda");

• scalajs-bundler when using the Application mode:
  • gathers all dependencies from npmDependencies in build.sbt
  • produces a package.json
  • calls webpack (version 4)
    • downloads/resolves all node_modules I think (package.json as input)
      • bundles foo-fastopt.js with the dependencies and resolve module imports and and exports
      • produces foo-fastopt-bundle.js
• NOTE: jsDependencies should not be used/won't do anything useful.

The resulting bundle appears minified by default, including the npmDependencies modules.

More questions/tasks:

• [ ] how to include baseline JavaScript files which we do not/cannot access as modules?
  • legacy YUI JavaScript files
  • underscore.js
  • JQuery used by xforms.js
  • our own legacy JavaScript files
  • JavaScript files referred to by XBL components
• [ ] how to process LESS/CSS files with webpack

[ebruchez]

Also, can we make some baby steps in the right direction?

Following the Ladda button experiment, can we handle this with webpack and add to that later? The P1 issues for this are:

• [ ] maybe: use BundlingMode.LibraryAndApplication() temporarily, while we can still use @JSExportTopLevel and namespaces (before Scala.js 1.0.0), and see if this works with namespaces
• [ ] modify build.sbt to use the -bundle.js file

[ebruchez]

+1 from customer