Building, running and debugging
Using package.json, we specify two build npm lifecycles that are also "programmed" into the webpack config:
- build: Full production build.
- dev: Development build. Uses sbt fastOptJS
You run them as:
npm run build
npm run dev.
The output is in the bin direcotry is
You can run the script using
bin/cli.js because the cli.js has the shebang header and has been marked executable by webpack.
Debugging is much more difficult in a two build-system world. The lag time between builds is large. Some approaches include:
Chained and continuously running build steps
In this approach we can easily chain the build tools using sbt. Since we previously setup a lifecycle step called
afterscalajs that only looks for changes in the sbt target directory, we can use that target to run after scala runs:
To run the two build steps once, one after the other:
sbt> ;fastObjJS; postScalaJS
To run them continuously as changes are made in your scala source files can you use:
sbt> ~ ;fastOptJS ;postScalaJS
If you want to detect changes in both your scala and supporting js files, you will want to run sbt and webpack in parallel with sbt focusing on ~fastOptJS and webpack focusing on afterscalajs-watch.
Source file maps are carried throughout including conveying the scalajs basesd source maps into the final, consolidated source maps file located in "bin".
Any colored output from Chalk will not show in the sbt console since the nodejs detection mechanism does not detect that the sbt console is capable of handling color output.
If you want to add an alias for the commands above, you can use sbt:
addCommandAlias("watchit", "~ ;fastOptJS ;postScalaJS")
Using a debugger such as Visual Studio Code