Update: Getting Started - Compiling for the Browser

[milesfrain]

Suggesting a rewrite of the Compiling for the Browser and Compiling CommonJS Modules sections as follows:

Compiling for the Browser

• spago build produces CommonJS output.
• The upcoming 0.15 compiler release will produce ES Modules, which simplifies the following steps, but until then, a bundler is required.
• Demonstrate how to point index.html to output/Main/index.js, bundle, and launch in webpage with parcel.
• Note how to enable automatic rebuilds and page refresh with the correct editor configuration.

Bundling for the Browser

• spago bundle-app produces a single index.js file.
• Demonstrate how to include this in index.html.
• Note that bundle-app removes unused code. This steps slows-down rebuilds, so it is best used for production builds, rather than active development.
• The output can be further minimized with a bundler, such as parcel. Demonstrate how, and compare to unbundled output.

Analysis of Generated JS code

This is currently part of the "Compiling for the Browser" section. I don't think this material serves the "Getting Started" goal, so I think we should remove it. If we do keep it, the unbundled output is nicer to look at:

// Generated by purs version 0.13.8
"use strict";
var Data_EuclideanRing = require("../Data.EuclideanRing/index.js");
var Data_Foldable = require("../Data.Foldable/index.js");
var Data_List = require("../Data.List/index.js");
var Data_List_Types = require("../Data.List.Types/index.js");
var Data_Semiring = require("../Data.Semiring/index.js");
var ns = Data_List.range(0)(999);
var multiples = Data_List.filter(function (n) {
    return Data_EuclideanRing.mod(Data_EuclideanRing.euclideanRingInt)(n)(3) === 0 || Data_EuclideanRing.mod(Data_EuclideanRing.euclideanRingInt)(n)(5) === 0;
})(ns);
var answer = Data_Foldable.sum(Data_List_Types.foldableList)(Data_Semiring.semiringInt)(multiples);
module.exports = {
    ns: ns,
    multiples: multiples,
    answer: answer
};

// Generated by purs version 0.13.8
"use strict";
var Data_Show = require("../Data.Show/index.js");
var Effect_Console = require("../Effect.Console/index.js");
var Euler = require("../Euler/index.js");
var main = Effect_Console.log("The answer is " + Data_Show.show(Data_Show.showInt)(Euler.answer));
module.exports = {
    main: main
};